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/

我希望下拉列表中的元素是一个在另一个上面的元素，而不是像现在这样，一个接一个。
此外，子菜单会从导航中继承大小。我可以仅为子菜单定义较少的行高吗？

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

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

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

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

UPDATED EXAMPLE HERE

CSS水平下拉菜单

1 个答案: