[Resolvido] Remover classe css de elementos filho

[Vinicius Cainelli 17]

To com um probleminha aqui..

 

tenho essa estrutura de menu

 

<ul>
 <li class="parent"><a href=""></a>
   <ul>
     <li class="children"><a href=""></a></li>
     <li class="children"><a href=""></a></li>
   </ul>
 </li>
 <li class="parent"><a href=""></a></li>
 <li class="parent"><a href=""></a></li>
</ul>

 

com esse estilo aqui..

li.parent a { width:80px; text-align:center; background:#F00; color:#000; text-decoration:none;}
li.children a { padding:3px 10px; color:#090;}

 

 

O que acontece é que, os elementos filho da lista, herdam a largura que eu coloquei pros pais.. e eu não queria, queria que eles continuassem sem largura definida,... alguém sabe como fazer isso? Fui claro na minha dúvida?

[William Bruno 1501]

eles não "herdam", mas eles são limitados pela largura do pai.

 

não faz sentido um elemento maior dentro de um menor.

[Vinicius Cainelli 17]

Mas o elemento maior é o pai, e não o filho, eu quero que o filho fique sem largura nenhuma..

 

Com esse print aqui acho que fica mais fácil entender..

 

 

 

Nesse caso, o pai tem 391px de largura, e o filho eu deixei com width:80px, pq se deixasse sem largura, ele herdaria a do pai, e ficaria gigante, certo?

Mas eu não quero que ele tenha uma largura certa, e sim, deixa-lo sem largura, e não herdar a largura do pai.

[William Bruno 1501]

Mas ele não herda. O que acontece é que ele vai ocupar 100% da largura do pai.

 

veja sobre display: inline-block; e width: auto;

[Vinicius Cainelli 17]

Agora eu coloquei o width: auto; e funcionou, pq resetou a largura do filho, e não herdou o valor do pai.