将下拉菜单添加到导航栏中
将下拉菜单添加到导航栏中
提问于 2014-07-27 16:40:13
我只是一个对HTML，CSS，PHP，javaScript的初学者。我的下拉菜单到导航栏不起作用。当我把鼠标放在导航栏的链接上时，没有下拉菜单。需要某个人的帮助。
码
<head>
#menu {
width:1060px;
margin:auto;
padding:0px 0px 0px 0px;
position:relative;
}
#menu ul {
height:25px;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;
background-color:#8AD9FF;
border-radius:18px;
margin-top:10px;
margin-bottom:5px;
list-style:none;
}
#menu ul li{
border-style:solid;
border-width:2px;
border-bottom:none;
border-top:none;
border-color:#0000FF;
display:inline-block;
text-decoration:none;
color:#FF0000;
padding-bottom:0px;
padding-top:0px;
margin-right:-8px;
}
#menu ul li a {
padding-left:25px;
padding-right:25px
}
#menu ul li a:link{
color:#3366CC;
text-decoration:none;
}
#menu ul li a:visited{
color:#3366CC;
text-decoration:none;
}
#menu ul li a:hover{
background-color:#3399FF;
text-decoration:underline;
}
#menu ul ul {
display:none;
width:125px;
}
#menu ul li a:hover > ul {
margin:0px;
padding:0px;
}
#menu ul li a:hover > ul li {
float:none;
display:block;
}
#menu ul li a:hover > ul li a {
color:#3366CC;
min-width:150px;
}
#menu ul li a:hover > ul li a:hover {
background-color:#3399FF;
text-decoration:underline;
}
#menu ul li {position:relative;}
#menu ul li ul {
position:absolute;
top:30px;
left:0px;
}
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">College</a>
<ul>
<li><a href="#">Faculties & Departments</a></li>
<li><a href=#"">Centres</a></li>
<li><a href="#">College Facts</a></li>
<li><a href="#">Awards</a></li>
</ul>
</li>
<li><a href="">Education</a>
<ul>
<li><a href="#">Pahrmacy Law Exam Review Course</a></li>
<li><a href="#">Doctor Of Pharm Degree (Pharm. D.)</a></li>
<li><a href="#">Graduate Programs</a></li>
<li><a href="#">Online MS Programs</a></li>
</ul>
</li>
<li><a href="#">Research</a>
<ul>
<li><a href="#">Medicina lChemistry</a></li>
<li><a href="#">Doctor Of Pharm Degree (Pharm. D.)</a></li>
<li><a href="#">Graduate Programs</a></li>
<li><a href="#">Online MS Programs</a></li>
</ul>
</li>
<li><a href="#">Faculty & Staff</a>
<ul>
<li><a href="#">Faculty Directory</a></li>
<li><a href="#">Staff Dierctory</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
</ul>
</div>
</body>
回答 2
Stack Overflow用户
发布于 2014-07-27 16:56:28
看下面的代码
#menu ul li a:hover > ul {
float:none;
display:block;
}上述代码将在子级别悬停锚元素时显示它们。但是在您的代码中，它是一个同级元素，而不是子元素。因此，请使用下一个兄弟元素语法，如下所示。
#menu ul li a:hover + ul {
float:none;
display:block;
}但是在这之后，你必须做很多事情来更好地处理你的菜单。这将只修复悬停显示问题。
Stack Overflow用户
发布于 2014-07-27 17:13:30
您可以不使用JS或PHP来完成这个任务。在大多数CSS中都有一个额外的a标记。当有人在锚上盘旋时，您不应该显示嵌套的ul，当有人在列表项上盘旋时，您应该显示它：
#menu ul li ul {
display: none;
}
#menu ul li:hover ul {
display: block;
}同样，上面的样式隐藏了整个嵌套的ul，而不是每个li，这很麻烦。只显示和隐藏一件事:包含元素。
我推荐更多的组织来保持秩序。
它可以帮助您编写ul ul{}，而不是编写ul li ul{}，至少在这段代码变得对您来说很自然之前是如此。
这里还有很多额外的伪元素。例如：
#menu ul li a:hover > ul li a:hover {
background-color:#3399FF;
text-decoration:underline;
}不需要第一个a标记上的伪元素a(无论如何都是在li标记上)。由于您只能在悬停时看到第二个a标记，所以它可以一直保持这种样式：
#menu ul li ul li a:hover {
background-color:#3399FF;
text-decoration:underline;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24983092
复制相关文章
相似问题
腾讯云开发者
