Question

当我只有一个导航栏时，我的下拉菜单正常工作，但现在我的业务的辅导页面成为了我所有业务的网站中的子页面，我将辅导导航栏设为子栏，并且在那时，我的下拉菜单停止工作。当我将鼠标悬停在＆＃34;服务上时，＆＃34; ＆＃34;与我联系，＆＃34;和＆＃34;资源，＆＃34;我应该看到一个下拉菜单，但我不知道，所以现在客户端无法访问多个页面。我不明白为什么他们停止工作，我试图研究这个，但我觉得我已经做好了一切......

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 CODE（这是两个导航栏的代码）

    <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>

所以我有显示：无;隐藏它然后显示：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，供其参考。希望能够解决问题。

Subnavbar下拉菜单不起作用

1 个答案: