CSS水平下拉菜单 [英] CSS horizontal dropdown menu
本文介绍了CSS水平下拉菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您可以帮我吗？
HTML：
< div id =menucontaineralign =center>
< div id =menubaralign =center>
< ul class =mainnav>
< li>< a href =index.html>首页< / a>< / li>
< li>< a href =courses.html>课程< / a>
< ul class =子菜单>
< ul class =column>
< li>< a href =business.html>商业< / a>< / li>
< li>< a href =acca.html>•ACCA< / a>< / li>
< li>< a href =cat.html>•认证会计技术员< / a>< / li>
< / ul>
< ul class =column>
< li>< a href =english.html>英文< / a>< / li>
< li>< a href =generalenglish.html>•常规英语< / a>< / li>
< li>< a href =camexenglish.html>•剑桥考试英语< / a>< / li>
< / ul>
< ul class =column>
< li>< a href =comput.html>计算< / a>< / li>
< / ul>
< / ul>
< / li>
< li>< a href =facility.html>设施< / a>
< ul class =子菜单>
< li>< a href =studyarea.html>研究区域< / a>< / li>
< li>< a href =itlab.html> IT实验室< / a>< / li>
< / ul>
< / li>
< li>< a href =services.html>服务< / a>
< ul class =子菜单>
< li>< a href =airportpickup.html>机场接送< / a>< / li>
< li>< a href =firstday.html>第一天方向< / a>< / li>
< / ul>
< / li>
< li>< a href =international.html>国际< / a>
< ul class =子菜单>
< li>< a href =aboutuk.html>关于英国< / a>< / li>
< li>< a href =aboutlondon.html>关于伦敦< / a>< / li>
< / ul>
< / li>
< li>< a href =admissions.html>招生< / a>
< ul class =子菜单>
< li>< a href =entryreq.html>条目要求< / a>< / li>
< li>< a href =howtoapply.html>如何应用< / a>< / li>
< / ul>
< / li>
< li>< a href =aboutus.html>关于我们< / a>
< ul class =子菜单>
< li>< a href =messagefrom.html>来自主体的消息< / a>< / li>
< li>< a href =whychoose.html>为什么选择< / a>< / li>
< / ul>
< / li>
< li>< a href =contactus.html>联系我们< / a>
< ul class =子菜单>
< li>< a href =byemail.html> By Email< / a>< / li>
< li>< a href =byphoneorfax.html>通过电话或传真< / a>< / li>
< / ul>
< / li>
< / ul>
< / div>
< / div>
CSS
/ *第二个容器* /
#menucontainer {width：100％;高度：54px;背景色：＃872e26; }
#menubar {width：950px;高度：54px; }
#headerx {width：100％;高度：为5px;背景：＃872e26;背景图像：网址（../图像/ footerx.png）;背景位置：中心;背景重复：不重复;
/ *第二个容器结束* /
/ *下拉菜单* /
.mainnav {list-style-type：none;填充：0;余量：0;文本对齐：中心; }
.mainnav li {float：left;宽度：118.75px; }
.mainnav a {text-decoration：none;颜色：#FFF;显示：块;行高：54px; }
.mainnav a：hover {background-color：＃e3c153;颜色：＃872e26; }
.submenu {display：none;列表样式类型：无;填充：0;余量：0;背景色：＃872e26;位置：绝对的;浮动：无;字体大小：10px的; }
li：hover .submenu {display：block; }
.column {list-style-type：none;文本对齐：中心; }
/ * drop menu end * /
- 我希望下拉菜单中的元素是另一个的元素，而不是像现在这样，一个接一个。
- 此外，子菜单继承从导航的大小。只能为子菜单定义较少的行高吗？
尝试一切，似乎没有发现错误。
解决方案
将位置：相对添加到父 li 元素：
.mainnav li {
float：left;
display：block;
width：118.75px;
position：relative;
}
然后添加 position：absolute 到孩子 .submenu 元素。这绝对定位了元素相对于父元素。
li：hover .submenu {
display：block;
position：absolute;
}
如果要更改 line-height 的孩子 li 元素，您可以使用直接兄弟组合器> 来定位子孙的直接孩子 li 元素：
.column> li a {
line-height：30px;
}
I have a problem with a CSS dropdown horizontal menu. Can you help me with this?
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*/
- I would like that the elements from the dropdown to be one on top of the other, NOT like they are now, one next to the other.
- Also, the submenu inherits the size from the navigation. Can I define less line-height for submenu only?
Tried everything and I do not seem to find the fault.
解决方案
Add position: relative to the parent li elements:
.mainnav li {
float: left;
display: block;
width: 118.75px;
position: relative;
}
Then add position:absolute to the child .submenu element. This absolutely positions the elements relative to the parent element.
li:hover .submenu {
display: block;
position: absolute;
}
If you want to change the line-height of the child li elements, you could use the direct sibling combinator, > to target the direct children of the descendant li elements:
.column > li a {
line-height: 30px;
}
这篇关于CSS水平下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
