1
我有一个CSS下拉菜单的问题。 你能帮我吗?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*/
- 我想,从下拉列表中的元素是一个在另一个之上,而不是像他们现在,一个紧挨着另一个。
- 此外,子菜单继承导航的大小。我只能为子菜单定义较少的行高吗?
尝试了一切,我似乎没有找到过错。
还有一件事,如果你看** **课程**,我怎样才能创建3列,如float:left,out of ** Business,English and Computing **。所以这三者中的每一个都在单独的列上,所以它们不会延伸太多而不能脱离屏幕?谢谢。 – Daniel
@Daniel您将不得不修改HTML结构。你希望他们能延伸出哪个“李”? –
所以我想安排在COURSES下的子菜单安排在3列,商业,英语和计算机。当然,每个人都有自己的“李”。希望你能理解我。 – Daniel