Criando menus com css, mais não tá dando o resultado esperado.
Tá aqui o index.php:
- Código: Selecionar todos
<html>
<header>
<title>Menu em CSS</title>
<link href="css/estilos.css" rel="stylesheet" type="text/css" />
</header>
<body>
<div id="menu">
<ul class="nav">
<li><a href="#">Menu 1</a></li>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</ul>
<ul class="nav">
<li><a href="#">Menu 2</a></li>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</ul>
<ul class="nav">
<li><a href="#">Menu 3</a></li>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</ul>
<ul class="nav">
<li><a href="#">Menu 4</a></li>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</ul>
</div>
</body>
</html>
Aqui o estilos.css:
- Código: Selecionar todos
/*Resetando todos os itens de menu*/
* {
margin: 0;
padding: 0;
}
/*Formatando o menu principal*/
#menu {
margin: auto;
width: 500px;
font-family: arial, verdana;
}
/*Formatando as lista de menus*/
ul, ol {
list-style: none;
}
/*Criando uma classe para formatar os links e sublinks dos menus*/
.nav li a {
background-color: #CCCCCC;
color: #0066FF;
text-decoration: none;
padding: 10px 15px;
display: block;
}
/*Adicionando uma cor de fundo ao passar o mouse sobre algum menu e/ou submenu*/
.nav li a:hover{
background-color: #FF9900;
}
/*Alindo os sub-menus*/
.nav > li {
float: left;
}
/*Ocultando os sub-menus*/
.nav li ul{
display: none;
position: absolute;
min-width: 150px;
}
/*Exibindo sub-menus ao passar o mouse sobre o menu*/
.nav li:hover > ul{
display: none;
}
/*Colocando sub-menus de sub-menus ao lado direito*/
.nav li ul li {
position: relative;
}
.nav li ul li ul {
right:-150px;
top: 0px;
}
O menu que eu quero criar, é igual ao menu do BFW, se possível alguém testa aí.
Aqui eu não conseguie esconder os sub-menus e nem alinhar os sub-menus.