проблемы с навигационным меню в css (фон не отображается за всем div)

Question

Я пишу код CSS для веб-страницы, вверху у меня есть меню навигации с кодом:

    <div class="nav-menu">
        <ul>
            <li><a href="#">Services</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Tell a friend</a></li>
            <li><a href="#">Mission</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
    </div>

Меню CSS для nav-menu включает:

.nav-menu {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    background: url(bgcolor.jpg) repeat-x;
}

.nav-menu li {
float: left;
}

.nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;  
}

.nav-menu li a {
background: url(bgcolor.jpg) repeat-x;
line-height: 36px;
height: 40px;
float: left;
width: 9em;
border-top: 1px solid #01607E;
border-right: 1px solid #01607E;
border-bottom: 1px solid #01607E;
color: white;
font-family: "Lucida Sans";
font-size: 10pt;
text-decoration: none;
text-align: center;
}

Тем не менее, он не показывает bgcolor.jpg за всем div, он просто показывает его за (li) рамками, а не за while div.Кто-нибудь может увидеть, в чем здесь проблема?

Спасибо за вашу помощь (если вам нужно больше объяснений о проблеме, пожалуйста, спросите, и я отредактирую это с ответами)

Answer 1

Ваш контейнерный блок разрушается, потому что высота не наследуется от элементов списка. Добавьте флажок после ul:

        <div class="nav-menu">
        <ul>
            <li><a href="#">Services</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Tell a friend</a></li>
            <li><a href="#">Mission</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
<div style="clear:both;"></div>
    </div>

Answer 2

Звучит как плавающий вопрос. Попробуйте это:

.nav-menu {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    background: url(bgcolor.jpg) repeat-x;
    overflow:hidden;
}

Или, если это не сработает:

.nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;  
    overflow:hidden;
}