Question

我试过移动这个位置：亲戚;环顾四周，但据我所知，这应该是...应该纠正我，因为我的理解显然是错误的！

<ul id="menu">  

                <li><a href="/products/">All Products</a> 
                    <ul>
                        <li><a href="/products/stock/">Stock Lanyards</a></li>
                        <li><a href="/products/screen-printed/">Screen Printed Lanyards</a></li>
                        <li><a href="/products/full-color/">Full Color Lanyards</a></li>
                        <li><a href="/products/custom-cord/">Custom Cord Lanyards</a></li>
                        <li><a href="/products/specialty/">Specialty Lanyards</a></li>
                   </ul>
                </li>

                  <li><a href="/reorders/">Reorders</a></li>  
                  <li><a href="/resources/">Resources</a>
                    <ul>
                        <li><a href="/products/faq/">FAQ</a></li>
                        <li><a href="/products/art-requirements/">Art Requirements</a></li>
                        <li><a href="/products/production-times/">Production Times</a></li>
                        <li><a href="/products/about-us/">About Us</a></li>
                        <li><a href="/products/contact-us/">Contact Us</a></li>
                        <li><a href="/products/request-a-sample/">Request A Sample</a></li>
                    </ul>

                  </li>  

                <li><a href="/blog/">Blog</a></li>  
            </ul>

...的CSS

ul#menu {  
    margin:0px;
    padding-top:20px;
    position:absolute;  
    right:0px;
    font-weight:bold;
    font-size:14px;


}  
ul#menu li {  
    display:inline;  
    padding-left:8px;


}  
ul#menu a{
    color:#8ba693;
    text-decoration:none;
    padding:5px;
}
ul#menu a:hover, a:active{
/* text-shadow: 0 0 0.9em #ccc; 
text-decoration:underline; */
background-color:#000;
}

/* -- DROPDOWN MENU STYLES -- */
#menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  }
  #menu ul li {
    display: block;
    position: relative;
    left:0;
    top:100%;
  }
  #menu li ul { display: none;
  position: absolute;
    z-index:1000;
  margin:5px 0 0 0px;
       top:100%;
          left:0;
       }
     #menu ul li a {
      display: block;
      text-decoration: none;
       padding: 7px 15px 6px 10px;
         margin: 0px 0 0 0;
     white-space: nowrap;
        border-top: 1px solid #8ba693;
        border-left: 1px solid #8ba693;
          border-right: 1px solid #8ba693;

 }

  #menu ul li a:hover { background: #000; }
  #menu li:hover > ul {
    display: block;

  }

  #menu li:hover li {
    float: none;
    font-size: 11px; 
  }
  #menu li:hover a { background: #fff; }
  #menu li:hover li a:hover { background: #8ba693; color: #fff; }

Answer 1

ul#menu li {
    display: inline;
    padding-left: 8px;
    position: relative;
}

http://jsfiddle.net/HFp6K/2/

position:relative必须在position:absolute的父母身上。

CSS菜单下拉列表出现在相同（最左侧）的父项下

1 个答案: