Two horizontal menus: problems if i don't give a height to the container div
i have this code and rules:
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#menu_utente_1 ul
{
list-style-type: none;
}
#menu_utente_1 li
{
float: left;
}
#menu_ut开发者_StackOverflow中文版ente_1
{
background: #C6C6C6;
height: 45px;
border-bottom: 2px solid white;
}
</style>
</head>
<body>
<div id="menu_utente_1">
<ul>
<li><a href="#">Option 1_1</a></li>
<li><a href="#">Option 1_2</a></li>
<li><a href="#">Option 1_2</a></li>
<li><a href="#">Option 1_3</a></li>
</ul>
</div>
<div id="menu_utente_1">
<ul>
<li><a href="#">Option 2_1</a></li>
<li><a href="#">Option 2_2</a></li>
<li><a href="#">Option 2_2</a></li>
<li><a href="#">Option 2_3</a></li>
</ul>
</div>
</body>
</html>
If i comment height: 45px; the menus are not showed correctly (correctly would be first one and below the other one).
Any idea?
Regards
Javi
You need the UL to overflow the li's. Like this:
#menu_utente_1 ul
{
list-style-type: none;
overflow:auto;
}
And: Don't use the same ID in an html document twice...
加载中,请稍侯......
精彩评论