Question

嗨，请帮我解决这个问题。

问题：菜单的下拉值显示在其他菜单中（它不与菜单一致）。示例：主菜单的下拉值为Home-1，Home-2，Home-3，它将显示在National party菜单下。如何在正确的菜单下正确显示演示：http://jsfiddle.net/shrikanth/Sv79m/

  <div id="menu">
  <ul>
      < li><a href="index.html">Home</a><ul>
       <li><a href="index.html">Home-1</a></li>
       <li><a href="aboutus.html">Home-2</a></li>
       <li><a href="services.html">Home-3</a></li>
        </ul></li>
       <li ><a href="aboutus.html">National Parties<ul>
              <li><a href="index.html">BJP</a></li>
              <li><a href="aboutus.html">Congress</a></li>
              <li><a href="services.html">CPM</a></li>
      </ul></a></li>
      <li><a href="services.html">Services<ul>
       <li><a href="index.html">TV</a></li>
       <li><a href="aboutus.html">Cell</a></li>
       <li><a href="services.html">Radio</a></li>
        </ul></a></li>
        <li>Contact Us
         <ul>
          <li><a href="index.html">India</a></li>
          <li><a href="aboutus.html">USA</a></li>
          <li><a href="services.html">SAUS</a></li>
         </ul>

        </li>
         </ul>
            </div>

CSS

     #menu {
     width: 550px;
     height: 35px;
     font-size: 16px;
     font-family: Tahoma, Geneva, sans-serif;
     font-weight: bold;
     text-align: center;
     text-shadow: 1px 2px 1px #333333;
     background-color: #8AD9FF;
     border-radius: 8px;
     }


    #menu ul {
    height: auto;
    padding: 8px 0px;
     margin: 0px;
       }

         #menu li { 
         display: inline; 
         padding: 20px; 
         }

            #menu ul li a {
            text-decoration: none;
             color: #00F;
             padding: 8px 8px 8px 8px;
             }


            #menu a:hover {
             color: #F90;
          background-color: #FFF;
           }




               #menu ul li ul{
                 display:none;
             position:absolute;
             top:31px;
           background-color:red;



                   }



          #menu ul li:hover ul{


            display:inline-block;
           height:auto;
            width:135px;




          }

            #menu  ul  li ul:before{



             content: '';

              border-color: transparent transparent red transparent;

              border-style: solid;

                 border-width: 10px;  /* The border on the drop down box  */ 

              position: absolute;

               top: -20px;

                   left: 37%;

                  margin-left:10px;

                }

Answer 1

http://jsfiddle.net/Sv79m/1/

给#menu li一个亲戚的位置：

#menu li { 
display: inline; 
padding: 20px;     
position:relative;
}

用左调整一点绝对定位：0：

#menu ul li ul{
    display:none;
    position:absolute;
    top:51px;
    background-color:red;
    left:0;
    }

编辑：

另外，要解决重叠链接，请添加：

#menu ul li ul li{
    display:block;
    padding:5px;
}

http://jsfiddle.net/Sv79m/2/

此外，你有一些未封闭的标签，我关闭它们，现在它好多了：

http://jsfiddle.net/Sv79m/3/

<a href="aboutus.html">National Parties<ul>
                                      ^^CLOSE ME!

Answer 2

这完全归结于包含元素的定位。如果你使用position：relative;它允许您将元素绝对定位在其中。

这是一个关于创建下拉导航的教程，它解释了定位和结构。这应该有帮助 - CSS 3 navigation menu

定位下拉菜单

2 个答案: