-2

我的下拉菜单有问题。我不希望菜单是垂直下拉菜单，而是水平线子菜单。当我没有将鼠标悬停在“关于”和“联系我”菜单链接时，它只是不起作用，当我将鼠标悬停在它上面时，会出现垂直下拉菜单

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

工作示例

4

1 回答 1

0

我不会用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/

于 2013-09-03T00:46:18.160 回答