Question

我只是HTML，CSS，PHP，javaScript的初学者。我的导航栏下拉菜单无效。当我将鼠标悬停在导航栏中的链接上时，没有下拉菜单是apeearing。需要某人的帮助。

CODE

<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 &amp; 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>

Answer 1

尝试这样的事情：

#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;
    }

Answer 2

请查看以下代码

 #menu ul li a:hover > ul {
   float:none;
    display:block;
  }

上面的代码会在悬停锚元素时显示子级别。但是在你的代码中，它是一个兄弟元素而不是子元素。因此，请使用下面的下一个兄弟元素语法。

 #menu ul li a:hover + ul {
   float:none;
    display:block;
  }

但是在此之后你必须做很多事情来更好地运用你的菜单。这将仅解决悬停显示问题。

DEMO

Answer 3

您可以在没有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;
}

将下拉菜单添加到导航栏

3 个答案: