Блог

Я работаю над простым выпадающим меню css, при наведении курсора на список отображается выпадающий список, но когда моя мышь перемещается за пределы div-оболочки «# head», список закрывается.

головной div обертывает меню, мой логотип и панель поиска. Содержимое div обертывает все мое содержимое.

Если под «головным» div есть содержимое, скажем, другое «содержимое» div, то раскрывающийся список отображается до тех пор, пока я не наведу курсор за пределы «головного» div

 div#content{
    display:block;
    width:972;
    float:none;
    position:relative;
}
#top_menu{
    float:right;
    text-align: left;
    width: 505px;
    padding: 5px 0 0 0;
    display: inline-block;
}

#top_menu ul{
    list-style-type:none;
    float:right;
}
#top_menu ul li ul{
    display:none;
}
#top_menu ul li{
    float: left;
    padding: 0 0 0 14px;
    margin: 0;
    width: auto;
}
#top_menu ul li:hover ul{
    display:block;
    position:absolute;
}
#top_menu ul li:hover ul li{
    clear: left; 
}
#top_menu a{
    display:block;
}



    <div id="head">
        <div id = "top_menu">
            <ul class="nav">
                <li><a href="index.php">Home</a></li>
                <li><a href="about.php">About</a>
                    <ul>
                        <li><a href="1.php">1</a></li>
                        <li><a href="2.php">2</a></li>
                        <li><a href="3.php">3</a></li>
                        <li><a href="4.php">4</a></li>
                        <li><a href="5.php">5</a></li>
                        <li><a href="6.php">6</a></li>
                    </ul>
                </li>
            </ul>

        </div>
        <div class="clear"></div>
        <div class="search">
            <form action="search.php" method="post">
                <input type="text" maxlength="30" width="40" />
                <input type="submit" value="submit" />
            </form>
            </div>
    </div>
  

хорошо … я исправил это, добавив z-индекс, получается, что содержимое div, которое прикреплено под заголовком div, закрывает выпадающий список. итак, в css я просто добавил: z-index: 1000, тогда это сработало. спасибо всем.