开发者

Two horizontal menus: problems if i don't give a height to the container div

开发者 https://www.devze.com 2023-02-07 13:07 出处:网络
i have this code and rules: <html> <head> <style type=\"text/css\"> * { margin: 0; padding: 0;

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...

0

精彩评论

暂无评论...
验证码 换一张
取 消