Question

我在下拉菜单中遇到问题。我不希望菜单是垂直下拉菜单，而是水平线子菜单。当我不将鼠标悬停在它上面时，“关于”和“联系我”菜单链接被推到最右侧，当我将鼠标悬停在它上面时，垂直下拉出现< / p>

HTML

<div id="wrap_link">
    <div id="toplink">
        <ul>
            <li><a href="index.php">Home</a>
            </li>
            <li><a href="#">Services</a>

                <ul>
                    <li><a href="tutorials.php">tutorials</a>
                    </li>
                    <li><a href="exams.php">Exams</a>
                    </li>
                    <li><a href="mocks.php">Mocks</a>
                    </li>
                </ul>
            </li>
            <li><a href="about.php">About</a>
            </li>
            <li><a href="contact.php">Contact</a>
            </li>
        </ul>
    </div>
    <!--topLinks -->
</div>

CSS

#toplink {
    margin-left: 10px;
    float: left;
    width: 100%;
}
#toplink ul {
    /*left: 10%;*/
    position:relative;
    margin: 0;
    padding: 0;
    list-style:none;
}
#toplink ul li {
    position: relative;
    float:left;
}
#toplink li ul {
    /*  display:none;*/
    display:inline;
}
/* decoration for menu and submenu*/
 #toplink ul li a {
    width: 235px;
    line-height:30px;
    display: block;
    text-decoration:none;
    color: #000;
    padding: 5px;
    background: #fff;
    margin-left:1px;
    white-space: nowrap;
}
#toplink ul li a:hover {
    background:#aaa;
    color:#fff;
}
#toplink li:hover ul {
    display: block;
    position: absolute;
}
#toplink li:hover li {
    float: none;
    font-size:11px;
}
#toplink li:hover a {
    background:#aaa;
    color:#fff;
}
#toplink li:hover li a:hover {
    background:#777;
    color:#fff;
}
#wrapper {
    margin-top:10px;
    background:#333;
    width: 1000px;
    margin-left:auto;
    margin-right:auto;
    padding-top:5px;
    height: 750px;
    text-align:center;
}
body {
    background:#000;
    color:#FFF;
    font: 14px Arial, Helvetica, sans-serif;
}

Working example

Answer 1

我不会使用float，而是使用display:inline-block代替。

变化：

#toplink ul li {
position: relative;
float:left;
}

致：

#toplink>ul>li{
    position: relative;
    display:inline-block;
    vertical-align:top;
}

请参阅：http://jsfiddle.net/4TW4S/1/

有关内联块与浮点数的更多信息：http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

<强>更新

如果要将水平放在横向上，请改为使用以下内容：

#toplink ul>li{
/*  position: relative;*/
    display:inline-block;
    vertical-align:top;
}

http://jsfiddle.net/4TW4S/3/

下拉子菜单水平问题

1 个答案: