将下拉菜单添加到导航栏
[英]Adding Drop-down Menus to the Navigation Bar
问题描述
我只是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>
3 个解决方案
解决方案1
1 已采纳 2014-07-27 16:46:34
尝试这样的事情：
#menu ul li:hover > ul{
display: block;
}
尝试在此处评论这些行：
#menu ul li ul {
position:absolute;
/*top:30px;*/
left:0px;
}
和：
#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;
}
解决方案2
1 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;
}
但是在此之后，您必须做很多事情才能更好地使用菜单。 这将仅解决悬停显示问题。
解决方案3
1 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;
}
不需要伪元素:hover在第a标签上（无论如何会在li标签上）。 由于您只能在鼠标悬停时看到第二a标记，因此它可以一直保持这种样式：
#menu ul li ul li a:hover {
background-color:#3399FF;
text-decoration:underline;
}
WordPress管理栏未同时显示两个自定义下拉菜单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.