0

我试图在下面的代码中将下拉菜单置于其链接下方。这是怎么做到的？我将使用 来进行显示/隐藏部分jquery，但我无法将其置于字母下方的中心，r这将是glyphicon稍后的。

    <!DOCTYPE html>
<html>
<head>
<title> New Document </title>
<style type="text/css">
.main{
    width:300px;
    background:cyan;
}
.right{
    float:right;
    position: relative;
    white-space: nowrap;
}
ul {
    list-style:none outside none;
    padding:0px;
    margin:0;
    position:absolute;
    right: 0;

}

</style>
</head>

<body>
<div class="main">
    Left
    <div class="right">
                <span>R</span>
            <ul>
                <li>Option 1</li>
                <li>Option 2</li>
                <li>Option 3</li>
                <li>Option 4</li>
            </ul>
    </div>
</div>

</body>
</html>
4

1 回答 1

1

把R里面的ul作为第一个列表元素。添加一些CSS修改，你就完成了。

看我的小提琴：http: //jsfiddle.net/Wq2Ls/1/

你也不需要.menu容器。它所有的 CSS 都可以放在ul.
我还用div替换了.right span。Span 是一个内联元素，最好不要在其中放置一个元素。ul

编辑：
如果设置position:absolute为它不是块元素，即使有ul，也不会让位置本身在中心。也应该放入一个它可以填充其父级的整个宽度。 更新小提琴：http: //jsfiddle.net/Wq2Ls/5/RRtext-align:centerRdiv

于 2013-10-10T18:11:46.847 回答