将下拉菜单添加到导航栏

debugcn 发表于 Dev

兔兔

我只是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 &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>

斯宾塞X

尝试这样的事情：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。