CSS barra de Navegação automática de altura
-
22-12-2019 - |
Pergunta
Eu quero definir o segundo nível de navegador para ser auto de altura, mudança para uma nova linha quando muito longa.
HTML:
<ul id="menu">
<li><a href="">About Us</a>
<ul>
<li><a href="">Introduction</a></li>
<li><a href="">Orgaizational Structure</a></li>
<li><a href="">Mission&Vision</a></li>
</ul>
</li>
</ul>
CSS:
* {
padding: 0;
margin: 0;
}
#menu {
list-style: none;
font-size: 0.8em;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px 0 #cccccc;
box-shadow: 0 2px 5px 0 #aaa;
background: #dddddd;
height: 40px;
width: 800px;
float: left;
}
#menu li {
display: block;
position: relative;
float: left;
}
#menu li ul {
display: none;
}
#menu li a {
display: block;
text-decoration: none;
padding: 12px 15px;
margin-left: 1px;
white-space: nowrap;
}
#menu li:hover ul {
display: block;
position: absolute;
background: #dddddd;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px 0 #cccccc;
box-shadow: 0 2px 5px 0 #aaa;
width: 100px;
}
Executá-lo aqui: http://jsfiddle.net/U72Hm/
Solução
Eu não tenho certeza do que você está pedindo, mas se você quiser que seu texto para moldar uma nova linha, alterar white-space:no-wrap;
para white-space:normal
para menu li a{...}
.
Outras dicas
Enquanto esta resposta não tecnicamente responder a pergunta, há alguns recursos excelentes para o menu aqui http://www.cssplay.co.uk/menus/ explicando o porquê de CSS e as decisões são tomadas e para que os navegadores.
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow