html – CSS下拉菜单(右侧)

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

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

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

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

总结

以上是内存溢出为你收集整理的html – CSS下拉菜单(右侧)全部内容，希望文章能够帮你解决html – CSS下拉菜单(右侧)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。