html – CSS下拉菜单(右侧)

发布时间：2020-12-14 23:22:11 所属栏目：资源来源：网络整理

导读：我正在尝试创建一个浮动到右侧的子菜单.但是,我撞到了一堵砖墙,只能让它浮在水面上. http://jsfiddle.net/jspring/yD9N4/ 您可以在此处看到(虽然它比正常情况稍宽)子菜单只显示在父列表项中.如果有人能帮我把它漂到右边那就太好了！ ul class="cl-menu" liLi

我正在尝试创建一个浮动到右侧的子菜单.但是,我撞到了一堵砖墙,只能让它浮在水面上.

http://jsfiddle.net/jspring/yD9N4/

您可以在此处看到(虽然它比正常情况稍宽)子菜单只显示在父列表项中.如果有人能帮我把它漂到右边那就太好了！

<ul class="cl-menu">
    <li>Link 1
        <ul>
            <li><a href="#">Sub Link 1</a>
            </li>
            <li><a href="#">Sub Link 2</a>
            </li>
        </ul>
    </li>
    <li>Link 2
        <ul>
            <li><a href="#">Sub Link 1</a>
            </li>
            <li><a href="#">Sub Link 2</a>
            </li>
        </ul>
    </li>
</ul>

.cl-menu{
    list-style:none outside none;
    display:inline-table;
    position:relative;
    width:100%;
}
.cl-menu li{
    list-style:none outside none;
    border-bottom:1px solid #cccccc;
    padding:5px 1px;
    text-align:center;  

}
.cl-menu > li:hover{

    /*background-color:#303030;*/
    background-color:#66819C;
    color:#FFF;
    font-weight:bold;
    text-decoration:underline;
    opacity:1;
}

.cl-menu li ul{
    display:none;
}

.cl-menu li:hover ul{
    display:block;
    opacity:0.8;
    background-color:#FFF;
    margin-top:4px;
    font-weight:normal !important;
}

.cl-menu li ul li{
    border-bottom:1px solid #cccccc !important;
    border-top:none !important;
    border-left:none !important;
    border-right:none !important;
}

.cl-menu li ul li a{
    color:#000;
    text-decoration:none;
}

.cl-menu li ul li a:hover{
    color:#390;
    text-decoration:underline;
}

.cl-menu ul:after{
    content:"";
    clear:both;
    display:block;
}

解决方法

使用position：子菜单的绝对属性.使用正确的css属性正确定位子菜单.

.cl-menu li ul
     { 
         display:none; 
         position:absolute;
         right:20%; 
     }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!