CSS水平下拉菜單

Question

我有一個CSS下拉菜單的問題。 你能幫我嗎？

HTML：

<div id="menucontainer" align="center"> 
    <div id="menubar" align="center"> 
     <ul class="mainnav"> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="courses.html">Courses</a> 
       <ul class="submenu"> 
        <ul class="column"> 
         <li><a href="business.html">Business</a></li> 
         <li><a href="acca.html">• ACCA</a></li> 
         <li><a href="cat.html">• Certified Accounting Technician</a></li> 
        </ul> 
        <ul class="column"> 
         <li><a href="english.html">English</a></li> 
         <li><a href="generalenglish.html">• General English</a></li> 
         <li><a href="camexenglish.html">• Cambridge Exam English</a></li> 
        </ul> 
        <ul class="column"> 
         <li><a href="computing.html">Computing</a></li> 
        </ul> 
       </ul> 
      </li> 
      <li><a href="facilities.html">Facilities</a> 
       <ul class="submenu"> 
        <li><a href="studyarea.html">Study Area</a></li> 
        <li><a href="itlab.html">IT Lab</a></li> 
       </ul> 
      </li> 
     <li><a href="services.html">Services</a> 
       <ul class="submenu"> 
        <li><a href="airportpickup.html">Airport Pickup</a></li> 
        <li><a href="firstday.html">First Day Orientation</a></li> 
       </ul> 
      </li> 
<li><a href="international.html">International</a> 
       <ul class="submenu"> 
        <li><a href="aboutuk.html">About UK</a></li> 
        <li><a href="aboutlondon.html">About London</a></li> 
       </ul> 
      </li> 
<li><a href="admissions.html">Admissions</a> 
       <ul class="submenu"> 
        <li><a href="entryreq.html">Entry Requirements</a></li> 
        <li><a href="howtoapply.html">How to Apply</a></li> 
       </ul> 
      </li> 
<li><a href="aboutus.html">About us</a> 
       <ul class="submenu"> 
        <li><a href="messagefrom.html">Message from the Principal</a></li> 
        <li><a href="whychoose.html">Why Choose</a></li> 
       </ul> 
      </li> 
<li><a href="contactus.html">Contact us</a> 
       <ul class="submenu"> 
        <li><a href="byemail.html">By Email</a></li> 
        <li><a href="byphoneorfax.html">By Phone or Fax</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

CSS

/* 2nd container */ 
#menucontainer { width:100%; height:54px; background-color:#872e26; } 

#menubar { width:950px; height:54px; } 

#headerx { width:100%; height:5px; background:#872e26; background-image:url(../images/footerx.png); background-position:center; background-repeat:no-repeat; } 
/* 2nd container end */ 

/* drop menu */ 
.mainnav { list-style-type:none; padding:0; margin:0; text-align:center; } 

.mainnav li { float:left; width:118.75px; } 

.mainnav a { text-decoration:none; color:#fff; display:block; line-height:54px; } 

.mainnav a:hover { background-color:#e3c153; color:#872e26; } 

.submenu { display:none; list-style-type:none; padding:0; margin:0; background-color:#872e26; position:absolute; float:none; font-size:10px; } 

li:hover .submenu { display:block; } 

.column { list-style-type:none; text-align:center; } 
/* drop menu end*/ 

http://jsfiddle.net/r8Rc9/11/

1. 我想，從下拉列表中的元素是一個在另一個之上，而不是像他們現在，一個緊挨着另一個。
2. 此外，子菜單繼承導航的大小。我只能爲子菜單定義較少的行高嗎？

嘗試了一切，我似乎沒有找到過錯。

Answer 1

添加position: relative父li元素：

.mainnav li { 
    float: left; 
    display: block; 
    width: 118.75px; 
    position: relative; 
} 

然後加入position:absolute孩子.submenu元素。這絕對定位相對於父元素的元素。

li:hover .submenu { 
    display: block; 
    position: absolute; 
} 

如果你想改變孩子li元素的line-height，你可以使用直接兄弟組合子，>目標後代的直接孩子li元素：

.column > li a { 
    line-height: 30px; 
} 

UPDATED EXAMPLE HERE