导航栏的CSS下拉菜单添加

Question

我正在尝试为我的菜单添加下拉菜单，但是当我将鼠标悬停在它上面时它似乎没有显示。感谢即将到来的支持。

这是我在 jfiddle 中的代码:http://jsfiddle.net/nbh2e15y/2/

CSS:

#nav {
    background: none repeat scroll 0 0 #585858;
    border-radius: 3px;
    height: 50px;
    margin-bottom: 10px;
    padding: 0;
}

#searchbar input[type=text] { 

    background: none repeat scroll 0 0 #fff;
    border: 1px solid black;
    height: 25px;
    padding: 1px 1px 1px 5px;
    width: 230px;


}

#searchbar input[type="submit"] {
    background: none repeat scroll 0 0 #1abc9c;
    border: 1px solid #12ab8d;
    color: white;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 15px;
}

#searchbar { margin-right:10px; }



#nav ul {
    list-style: none outside none;
    margin: 0;
padding: 0 0 0 10px;
}

#nav ul li {
line-height:50px;
float:left;
}

#nav ul li a {
line-height:50px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:400;
text-decoration:none;
color:#FFF;
background-color:none repeat scroll 0 0 #585858;
display:block;
padding:0 20px;
}


#nav ul ul {
    background: #5f6975; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
}
    #nav ul ul li {
        float: none; 
        border-top: 1px solid #6b727c;
        border-bottom: 1px solid #575f6a;
        position: relative;
    }
        #nav ul ul li a {
            padding: 15px 40px;
            color: #fff;
        }   
            #nav ul ul li a:hover {
                background: #4b545f;
            }


#nav ul li a:hover {
background-color:#333;
}

#nav ul li a.active {
background-color:#333;
}
#nav ul li active {
background-color:red;
}

li.active {
    float: right !important;
}
li.active_messages {
    float: right;
}

和html代码:

<div id="nav"> 

<ul>
<li><a href="index.php">Home</a></li>
<li><a href="categories.php">Categories</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a></li>
            </ul>
        </li>

<li><a href="about.php">About us</a></li>
<li><a href="my_profile.php">Profile</a></li>
<li><a href="my_parts.php">My Listings</a></li>
<li><a href="verification.php">Get Verified!</a></li>
<li><a href="logout.php">Log out</a></li>
<li class="active">
<div id="searchbar">  
<form action="search.php" method="get">
<input type="text" hidden="" value="product/search" name="route">
<input type="text" required="" placeholder="Search..." name="search">
<input type="submit" value="Search">
</form>
</div></li>
</ul>

</div>

Answer 1

如果你添加

#nav ul>li:hover>ul {
  top:initial;
}

到您的 CSS，然后当 li 被鼠标悬停时，ul 将恢复到其原始 View ，因此下拉菜单将“出现”。

执行此操作时，您会注意到一些变化。您的 CSS 需要一些改进以提高可读性，但这种转变是因为沿途的某些东西没有从页面流中删除，但这是另一个问题。