Question

我正在制作一个CSS下拉菜单。因此，当鼠标悬停一个菜单项时，它会显示其子标题。好吧，除了子菜单的位置外，一切正常。我得到的是：

|Menu 1|    |Menu 2|
            |Submenu 1|
            |Submenu 2|
            |Submenu 3|

但是当鼠标悬停一个项目时，我必须将此布局更改为：

|Menu 1|    |Menu 2|
         |Submenu 1|
         |Submenu 2|
         |Submenu 3|

我不知道是否有可能做出改变。

CSS

.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
    float: right;
    width: auto;
}

.menu ul{
background:#EBF0FD;
line-height: 2.0em;
list-style:none;
margin:0;
padding:0px;
}

.menu li{
    float:left;
    padding:0px;
    }

.menu li a{
    background:#EBF0FD url("images/seperator.gif") bottom right no-repeat;
    color:#336699;
    display:block;
    font-weight:normal;
    line-height:2.0em;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
    }

.menu li a:hover, .menu ul li:hover a{
        background: #5E78B5 bottom center no-repeat;
        color:white;
        text-decoration:none;
}

.menu li ul{
    background:#EBF0FD;
    display:block;
            float: left;
    height:auto;
    padding:0px;
    margin:0px;
    border-style:solid;
            border-color:#C9D8FF;
    position:absolute;
    width:auto;
    z-index:200;
    }

.menu li:hover ul{
    display:block;
    }

.menu li li {
    background: bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:225px;
            color: red;
    }

.menu li:hover li a{
    background:none;
    color: #336699;
    }

.menu li ul a{
    display:block;
    line-height:35px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
    }

.menu li ul a:hover, .menu li ul li:hover a{
        background:#5E78B5 left no-repeat;
        border:0px;
        color:#ffffff;
        text-decoration:none;
        }

.menu p{
    clear:left;
    }

HTML

<div class="menu">
    <ul>
        <li>
              <a href="#">Menu 1</a>
               <ul>
                   <li><a href="#">Submenu 1</a></li>
                   <li><a href="#">Submenu 2</a></li>
                   <li><a href="#">Submenu 3</a></li>
                </ul>
         </li>
     </ul>                
 </div>

解：

Andres Ilich的代码解决了我的问题（谢谢！）。现在，所有子菜单右上边缘都与顶部菜单的右下边缘正确对齐。但是，当几个菜单（顶层）在布局中时它出现了问题，因此它们出现在垂直而不是水平。我能纠正它。所以，如果有人也面临这个问题，我会发布最终的工作CSS。谢谢你的帮助！

.menu {
    font-size:14px;
    font-weight:bold;
    float: right;
    width: auto;
}

.menu ul {
    background:#EBF0FD;
    line-height: 2.0em;
    list-style:none;
    margin:0;
    padding:0px;
    font-family: Verdana, Geneva, sans-serif;
}

.menu  li {
    float:left;
    padding:0;
    margin:0;
    position:relative;
}

.menu li a {
    background:#EBF0FD;
    color:#336699;
    display:block;
    font-weight:bold;
    line-height:2.0em;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
}

.menu li a:hover, .menu ul li:hover a {
    background: #5E78B5 bottom center no-repeat;
    color:white;
    text-decoration:none;
}

.menu li ul {
    background:#EBF0FD;
    display:none;
    float: left;
    height:auto;
    padding:0px;
    margin:0px;
    border-style:solid;
    border-color:#C9D8FF;
    position: absolute;
    right: 0;
    width:auto;
    z-index:200;
}

.menu li:hover ul {
    display:block;
}

.menu li li {
    background: bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:200px;
}

.menu li:hover li a {
    background:none;
    color: #336699;
}

.menu li ul a {
    display:block;
    line-height:35px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 21px;
    text-align:right;
}

.menu li ul a:hover, .menu li ul li:hover a {
    background:#5E78B5 left no-repeat;
    color:#ffffff;
    text-decoration:none;
}

Answer 1

您可以绝对定位子菜单，只需将其与主菜单的最右侧部分对齐，如下所示：

首先将您的li项声明为相对项，以正确定位子菜单：

.menu li {
    float: left;
    padding: 0;
    position: relative;
}

然后将您的子菜单声明为position:absolute以及right:0属性，将子菜单绝对定位到主菜单的右边缘：

.menu li ul {
    position: absolute;
    right: 0;
}

然后只需将子菜单文本放在右侧即可完成效果：

.menu li ul a {
    text-align:right;
}

修改：Demo

Answer 2

试试这个 .menu li ul {display：block; margin-left：-130px; }

jsfiddle示例： http://jsfiddle.net/BBJv5/

但在你这样做之前，你必须知道子菜单项的宽度。

Answer 3

查看代码和演示的小提琴

小提琴：http://jsfiddle.net/dMCKD/1/

演示：http://jsfiddle.net/dMCKD/1/embedded/result/

屏幕截图：

enter image description here

更改下拉菜单的子列表的位置

解：

3 个答案: