Menu e Submenu HTML e CSS
Olá a todos
alguém me pode ajudar a conseguir mudar a largura de cada submenu conforme o tamanho dos links, Isto é, se é possível um submenu ter 100px de largura, outro 120px, mas que alarguem de forma automática, conforme comprimento texto do link sem dobrar? Por enquanto consegui que ficasse conforme o tamanho de cada link, ao pôr width: auto; logo abaixo de --COR DE FUNDO DO SUB MENU--*/ ... mas queria que toda a borda do submenu acompanhasse o mesmo tamanho.
O código é o seguinte:
/* NavbarMenu
--------------------------- */
#NavbarMenu {
background: #cc0000;/*--COR DE FUNDO DO MENU--*/
width: 1022px;/*--TAMANHO DO MENU--*/
float: left;
height: 35px;/*--ALTURA DAS CASAS--*/
font-size: 13px;/*--TAMANHO DA FONTE--*/
font-family: arial;/*--TIPO DA FONTE--*/
color: #fff;/*--cor do link--*//*--COR DA FONTE--*/
font-weight: none;
margin: 0;
padding: 10;
text-transform: none;
}
#NavbarMenuleft {
width: 100%;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: yes;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF; /*--edite cor do link--*/
display: block;
font-size: 13px;/*--tamanho da fonte do link--*/
font-family: arial;
font-weight: bold;
text-transform: none;
margin: 0;
padding: 9px 15px 8px;
border-right: 1px solid #FFFFFF;/*--COR E TIPO DE BORDA--*/
}
#nav li a:hover, #nav li a:active {
background: #ffffff;/*--COR DE FUNDO EM ESTADO HOVER--*/
color: #FFF; /*--COR DA FONTE EM ESTADO HOVER--*/
margin: 0;
padding: 9px 15px 8px;
text-decoration: yes; color: #000000;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #cc0000;/*--COR DE FUNDO DO SUB MENU--*/
width: auto;
color: #FFF; /*--cor do link--*/
font-size: 13px;/*--TAMANHO DA FONTE DO SUB MENU--*/
font-family: Arial;/*--FONTE DO SUB MENU--*/
font-weight: normal;
text-transform: none;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #cc0000;
border-left: 2px solid #cc0000;
border-right: 2px solid #cc0000;
}
#nav li li a:hover, #nav li li a:active {
background: #ffffff;/*--COR DE FUNDO DO SUB MENU EM ESTADO HOVER--*/
color: #FFF; /*--COR DA FONTE DO SUB MENU EM ESTADO HOVER--*/
text-transform: yes; color: #000000; font-weight: bold;
padding: 7px 10px;
}
#nav li {float: left; padding: 0;
}
#nav li ul {z-index: 1000; position: absolute; left: -999em; height: auto; width: 132px; margin: 0; padding: 0;
}
#nav li ul a {width: 100px;
}
#nav li ul ul {margin: -32px 0 0 171px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover {position: static;}
------------------------------------------------------------------------------------------------------
<div id="NavbarMenu">
<div id="NavbarMenuleft">
<ul id="nav">
<li><a href="">AAAAAA ▾</a>
<ul class="scroll">
<li><a href="">111111111111111</a></li>
<li><a href="">2222</a></li>
<li><a href="">33333333</a></li>
<li><a href="">444444444444</a></li>
</ul></li>
<li>
<li><a href="">BBBBBB ▾</a>
<ul class="scroll">
<li><a href="">555555</a></li>
<li><a href="">6666666666</a></li>
<li><a href="">7777777</a></li>
<li><a href="">888888888888888</a></li>
</ul></li>
<li>
<li><a href="">CCCCCC ▾</a>
<ul class="scroll">
<li><a href="">999999</a></li>
<li><a href="">000000</a></li>
<li><a href="">000000</a></li>
<li><a href="">00000000</a></li>
</ul></li>
<li>
<li><a href="">DDDDDD ▾</a>
<ul class="scroll">
<li><a href="">111111111111111</a></li>
<li><a href="">22222222222222222</a></li>
<li><a href="">33333333333333333333</a></li>
<li><a href="">44444444444444444</a></li>
</ul></li>
<li>
<li><a href="">EEEEEE ▾</a>
<ul class="scroll">
<li><a href="">555</a></li>
<li><a href="">6666</a></li>
<li><a href="">777</a></li>
<li><a href="">888</a></li>
</ul></li>
<li>
<li><a href="">FFFFFF ▾</a>
<ul class="scroll">
<li><a href="">99999999999</a></li>
<li><a href="">00000000</a></li>
<li><a href="">0000000000000</a></li>
<li><a href="">0000</a></li>
</ul></li>
<li>
</li></li></li></li></li></li></ul>
<li>
</li></div></div>
Exemplos:
Discussão (12)
Carregando comentários...