[Resolvido] Menu com Sub menu Css

[Gerciley 14]

To Com um probleminha com esse menu em CSS o tamanho dos links do sub menus são menores que a div pai, e ao passar o mause o efeito não completa, ficando esteticamente deselegante, a unica forma que consegui de resolver não é "ecologicamente correta" pois tenho setar o tamanho dos links, assim uma coluna com palavras pequenas fica muito grande sem necessidade, por causa de outra coluna que tem uma palavra grande, queria que a UL do submenu tivesse o tamanho da maior palavra da LI do menu.

[William Bruno 1501]

tente aplicando um display: block;

 

assim, por default irá ocupar 100% de largura do elemento pai.

[Gerciley 14]

ja está, asim segue abaixo todo CSS do Menu

 

/*Retirando as decorações dos links e listas*/
#menu ul {
margin:0;
padding:0;
list-style:none;
}
/*Escondendo os Sub Menus de 1° Nível*/
#menu li ul{
display:none;
}
/*Posisionando os itens do Menu*/
#menu ul li{
float:left;
position:relative;
width:auto;
height:auto;
}
/*Setando as aparencias dos links*/
#menu a{
text-decoration:none;
font-variant:small-caps;
display:block;
width:85px;-------------> pra funcionar esse valor tem que esta setado com uma largura fixa;
padding:3px 30px;
font-family:Verdana, Geneva, sans-serif;
color:#666;
background:#F2F2F2;
}
/*Setando as aparencias dos links ao passar o mause*/
#menu ul li a:hover{
color:#fff;
padding:3px 30px;
background:#ccc;
width:auto;-------------> pra funcionar esse valor tem que esta setado com uma largura fixa;
}
/*Exibindos os Sub Menus de 1° Nível*/
#menu ul li:hover ul{
display:block;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
position:absolute;
}
/*Escondendo os Sub Menus de 2º Nível*/
#menu ul li:hover ul li ul {
display:none;
}
/*Exibindos os Sub Menus de 2° Nível*/
#menu ul li:hover ul li:hover ul{
display:block;
position:absolute;
left:100%;
top:0;
}

[William Bruno 1501]

tem coisas desnecessárias ai.

 

aplique essa regra:

#menu ul li ul li { float: none; }

[Gerciley 14]

Sim, Tinha esse Float, ja tirei m as o outro Float não posso tirar se não vai ficar vertical o e menu é na horizontal com Sub Menu na Vertical, você vil a imagem? clicou no link e viu a imagem?

[William Bruno 1501]

Vi sim. Qual a sua dúvida ?

 

Poste um link.

[Gerciley 14]

Na própria imagem está dizendo, o tamanho dos links não acompanham Por exemplo

 

<ul>
 <li><a href="#">Novo</a></li>
     <li><a href="#">Editar</a></li>
     <li><a href="#">Excluir</a></li>
     <li><a href="#">Repor Estoque</a></li>
 </ul>

 

note na imagem que o tamanho dos links Editar Excluir e Repor Estoque são proporcionais ao seus tamanhos e portanto não completam até o tamanho da UL acima se eu colocar width: 100% os links ficam maiores do que o UL Pai. Entendeu?

[William Bruno 1501]

Com o que eu te disse, já deveria ter resolvido.

 

Se ainda não deu certo, é pq você fez alguma coisa errada, ou não entendeu oq eu disse.

Poste o teu html para eu montar o exemplo completo e te enviar.

[Gerciley 14]

Valew obrigado, Já resolvi o problema!!!