html - 子导航栏下拉菜单不起作用

Question

当我只有一个导航栏时，我的下拉菜单可以正常工作，但现在我的业务的辅导页面变成了一个包含我所有业务的网站的子页面，我将辅导导航栏设为子导航栏，此时，我的下拉菜单停止工作。当我将鼠标悬停在“服务”、“联系我”和“资源”上时，我应该会看到一个下拉菜单，但我没有，所以现在有几个页面客户无法访问。我不明白他们为什么停止工作，我已经尝试对此进行研究，但我觉得我做的一切都是对的......

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;隐藏它然后显示: block ；在悬停时显示它，但它不再在悬停时显示它。它曾经是，然后当我添加第一个导航栏并调用此类 .subnavbar 时，它停止工作....

Answer 1

它不工作的原因是因为你有很多问题:

额外 *在您的代码中导致 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>在 HTML 中标记 <div id="nav">你还有一个<div>而不是关闭 </div>在 <div id="subnav"> 的末尾.

这是一个有效的 JSFIDDLE供引用它在哪里工作。希望一切都清楚。