CSS菜單下拉菜單全部出現在同一個（最左邊的）父項下

我嘗試了移動位置：relative;設置，但我的理解是它應該在哪裏......請糾正我，因爲我的理解顯然是錯誤的！CSS菜單下拉菜單全部出現在同一個（最左邊的）父項下

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

來源

2011-09-22 Michael

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

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

position:relative需要在position:absolute的父。

來源

2011-09-22 22:04:25

也就是'position：absolute; left：0;'將這個項目放在他的第一個「parent」的左邊，並且用'position：relative;'。在@邁克爾的情況下，這是'＃菜單'，@約瑟夫的答案糾正了這一點。 – ANeves

CSS菜單下拉菜單全部出現在同一個（最左邊的）父項下

回答

相關問題