子导航栏下拉菜单不起作用
子导航栏下拉菜单不起作用
提问于 2016-03-09 11:24:40
我的下拉菜单在我只有一个导航栏的时候是有效的，但是现在我的业务的辅导页面变成了一个包含我所有业务的网站的子页面，我把辅导导航栏变成了一个子导航栏，在这一点上，我的下拉菜单停止了工作。当我将鼠标悬停在“服务”、“联系我”和“资源”上时，我应该会看到一个下拉菜单，但我没有看到，所以现在有几个页面是客户端无法访问的。我不明白他们为什么停止工作，我试着研究过这一点，但我觉得我做的一切都是对的……
CSS代码
**/* 1st Navigation Bar */**
#nav {
width: 100%; /* Spans the width of the page */
height: 40px;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(94, 185, 176);
}
.navbar {
height: 40px;
margin: 0;
padding: 0;
border-right: 1px solid #54879d;
}
.navbar li {
height: 50px;
width: 155px;
float: right;
text-align: center;
list-style: none;
margin: 0;
background-color: rgb(94, 185, 176);
font: normal 200%/110% 'chocolatebox deco regular',sans-serif;
font-size: 16px;
}
.navbar a {
padding: 14px 0; /* Adds a padding on the top and bottom so the text appears centered vertically */
border-left: 1px solid #74e3d8; /* Creates a border in a slightly lighter shade of blue than the background. */
border-right: 1px solid #4d9a92; /* Creates a border in a slightly darker shade of blue than the background. */
text-decoration: none; /* Removes the default hyperlink styling. */
color: black;
display: block;
}
.navbar li a:hover {
background-color: #ffe643;
}
.navbar li.active {
background-color: #ffe643;
border-bottom: 5px dashed black;
text-decoration: underline;
}
**/* 2nd Nav bar */**
#subnav {
width: 100%; /* Spans the width of the page */
height: 40px;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ffe643;
}
.subnavbar {
height: 40px;
margin: 0;
padding: 0;
border-right: 1px solid #54879d;
}
.subnavbar li {
height: 50px;
width: 155px;
float: right;
text-align: center;
list-style: none;
margin: 0;
background-color: #ffe643;
font: normal 200%/110% 'chocolatebox deco regular',sans-serif;
font-size: 16px;
}
.subnavbar a {
padding: 14px 0; /* Adds a padding on the top and bottom so the text appears centered vertically */
border-left: 1px solid #fefefb; /* Creates a border in a slightly lighter shade of yellow than the background. */
border-right: 1px solid #fee121; /* Creates a border in a slightly darker shade of yellow than the background. */
text-decoration: none; /* Removes the default hyperlink styling. */
color: black;
display: block;
}
.subnavbar li:hover, a:hover {
background-color: #CFEAE7;
}
.subnavbar li.active {
background-color: #CFEAE7;
**/* Drop down menu */**
.subnavbar li ul {
display: none; /* Hides the drop-down menu */
z-index: 999;
height: 50px;
margin: 0; /* Aligns drop-down box underneath the menu item */
padding: 0; /* Aligns drop-down box underneath the menu item */
background-color: rgb(94, 185, 176);
}
.subnavbar li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
}
.subnavbar li ul li a {
border-left: 1px solid #74e3d8;
border-right: 1px solid #74e3d8;
border-top: 1px solid #4d9a92;
border-bottom: 1px solid #4d9a92;
}
.subnavbar li ul li a:hover{
background-color: #ffe643;
}HTML代码(这是两个导航栏的代码)
<div id="nav">
<ul class="navbar">
<li><a href="../Content_Writing.htm">Content Writing</a></li>
<li><a href="../Copy_Editing.htm">Editing</a></li>
<li><a href="../Video_Courses.htm">Video Courses</a></li>
<li class="active"><a href="Tutoring/Tutor_Home.htm">Tutoring</a></li>
<li><a href=http://tutorwithkatie.org/Blog/blog-2>Blog</a></li>
<li><a href="../index.htm">Home</a></li>
</ul> <div id="subnav">
<ul class="subnavbar">
<li></li>
<li><a href="#">Resources</a>
<ul>
<li><a href="Resources/English.htm">English Resources</a></li>
<li><a href="Resources/Math.htm">Math Resources</a></li>
<li><a href="Resources/Study-Skills-and-Organization.htm">Study skills and organization Resources</a></li>
<li><a href="Resources/Parent.htm">Parent Resources</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a>
<ul>
<li><a href="Contact/Request-Information.htm">Request Information</a></li>
<li><a href="Contact/Request-New-Client.htm">Schedule new client appoitnment</a></li>
<li><a href="Contact/Contact-Details.htm">Contact Details</a></li>
</ul>
</li>
<li><a href="Policies.htm">Policies</a></li>
<li><a href="Current-Students.htm">Current Students</a>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="Services/English-Tutoring.htm">English Tutoring</a></li>
<li><a href="Services/Homeschool-English.htm">Homeschool English</a></li>
<li><a href="Services/Algebra-Tutoring.htm">Math Tutoring</a></li>
<li><a href="Services/Online-Tutoring.htm">Online Tutoring</a></li>
</ul>
</li>
</ul>
<div>因此，我使用display: none；隐藏它，然后使用display: block；在悬停时显示它，但它不再在悬停时显示它。它曾经是，然后当我添加第一个导航栏并调用这个类.subnavbar时，它就停止工作了……
回答 1
Stack Overflow用户
发布于 2016-03-11 02:27:55
它不工作的原因是因为你有很多问题：
代码中的额外*会导致CSS问题，并使CSS变得一团糟。去掉所有的注释行，如下所示：
**/* Drop down menu */**
并将其替换为如下所示的有效注释：
/* Drop down menu */
此CSS规则中还缺少结束}
.subnavbar li.active { background-color: #CFEAE7;
并将#subnav上的此行从overflow: hidden;更改为overflow: visible;，以便在您将鼠标悬停在其上时显示SubNav。
#subnav { width: 100%; /* Spans the width of the page */ height: 40px; margin: 0; padding: 0; overflow: visible; background-color: #ffe643; }
在<div id="nav">的超文本标记语言中还缺少一个结束</div>标记，并且在<div id="subnav">的末尾有一个<div>而不是一个结束</div>。
下面是一个工作中的，供参考。希望这能把事情说清楚。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35882305
复制相关文章
相似问题
腾讯云开发者
