CSS水平下拉菜单 [英] CSS horizontal dropdown menu

问题描述

我有一个CSS下拉菜单水平菜单的问题。
请帮助我：

I have a problem with a CSS dropdown horizontal menu. Can you please 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*/

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

1. 我想从下拉列表中的元素是一个在另一个之上，而不是他们现在，一个在另一个。


2. 此外，子菜单继承尺寸从导航;我可以定义更少的行高为子菜单吗？

尝试了一切，我似乎没有找到错误。

Tried everything and I do not seem to find the fault. Thank you very much.

推荐答案

添加 position：relative 到父 li 元素：

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

然后添加 position：absolute 到子 .submenu 元素。这绝对定位相对于父元素的元素。

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

如果要更改 line-height 元素，您可以使用直接同胞组合器> 来定位子元素 li 的直接子元素：

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屋！