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将恢复到原始视图，因此下拉列表将显示为＃34;。

当你这样做时，你会发现一些变化。你的CSS在可读性方面需要一些改进，但这种转变将是因为沿途的某些东西不是从页面流中取出的，而是另一个问题。

Answer 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;
display:none;
position: absolute;
}
#nav ul li:hover ul{
display:block;
position:absolute;
}
#nav ul ul li a {
color: #fff;
background: #5f6975; 
}   
#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;
}

导航栏的css下拉菜单

2 个答案: