Два горизонтальных меню: проблемы, если я не задаю высоту контейнера div - PullRequest
0 голосов
/ 31 января 2011

У меня есть этот код и правила:

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

Если я прокомментирую height: 45px;, меню не будут отображаться правильно (правильно будет первый и ниже другого).Есть идеи?

С уважением

Хави

1 Ответ

1 голос
/ 31 января 2011

Вам нужен UL, чтобы переполнить li.Например:

#menu_utente_1 ul
{
  list-style-type: none;    
    overflow:auto;
}

И: не используйте один и тот же идентификатор в HTML-документе дважды ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...