Question

我一直试图找出如何为双下拉菜单设置“溢出”列。（所有CSS）

我正在使用“娱乐”链接仅
这是实例：{{3} } <
> | Duos | Trios“ 显然太长并且是一个问题。我试图在10个左右“溢出”到另一列（尚未显示）之后制作任何列出的项目。

有关如何做到这一点的任何帮助或建议将非常有帮助，并始终感激。

感谢大家（和女士们）

这是我的导航CSS：

#nav {
font-family: arial, sans-serif;
position: relative;
width: 990px;
height:60px;
font-size:0.95em;
color:#999;}

#nav ul li {
float: left;
position: relative;
list-style-type: none;}

#nav ul li a {
text-align: center;
height:60px;
display:block;
text-decoration:none;
color:#999;
text-indent:-9999px;}

#nav #company a  {
    background:url(http://glustik.com/dustreeproductions/images/navigation/nav-company.png) no-repeat;
    display:block;
    text-decoration:none;
    width:103px;
    margin:20px 27px 0 20px;
    height:20px;}
    #nav #company:hover > a {
    background-position:0 -20px;}
    #nav #company a:active {
    background-position:0 -40px;}
    body#body_company #company a {
    background-position:0 -40px;}

#nav #entertainment a  {
    background:url(http://glustik.com/dustreeproductions/images/navigation/nav-entertainment.png) no-repeat;
    display:block;
    text-decoration:none;
    width:168px;
    margin:20px 27px 0 0;
    height:20px;}
    #nav #entertainment:hover > a {
    background-position:0 -20px;}
    #nav #entertainment a:active {
    background-position:0 -40px;}
    body#body_entertainment #entertainment a {
    background-position:0 -40px;}

#nav #video a  {
    background:url(http://glustik.com/dustreeproductions/images/navigation/nav-video.png) no-repeat;
    display:block;
    text-decoration:none;
    width:63px;
    margin:20px 27px 0 0;
    height:20px;}
    #nav #video:hover > a {
    background-position:0 -20px;}
    #nav #video a:active {
    background-position:0 -40px;}
    body#body_video #video a {
    background-position:0 -40px;}

#nav #studio a  {
    background:url(http://glustik.com/dustreeproductions/images/navigation/nav-studio.png) no-repeat;
    display:block;
    text-decoration:none;
    width:76px;
    margin:20px 27px 0 0;
    height:20px;}
    #nav #studio:hover > a {
    background-position:0 -20px;}
    #nav #studio a:active {
    background-position:0 -40px;}
    body#body_studio #studio a {
    background-position:0 -40px;}

#nav #liveAudio a  {
    background:url(http://glustik.com/dustreeproductions/images/navigation/nav-live.png) no-repeat;
    display:block;
    text-decoration:none;
    width:113px;
    margin:20px 27px 0 0;
    height:20px;}
    #nav #liveAudio:hover > a {
    background-position:0 -20px;}
    #nav #liveAudio a:active {
    background-position:0 -40px;}
    body#body_live #liveAudio a {
    background-position:0 -40px;}

#nav #eventPlanning a  {
    background:url(http://glustik.com/dustreeproductions/images/navigation/nav-events.png) no-repeat;
    display:block;
    text-decoration:none;
    width:172px;
    margin:20px 27px 0 0;
    height:20px;}
    #nav #eventPlanning:hover > a {
    background-position:0 -20px;}
    #nav #eventPlanning a:active {
    background-position:0 -40px;}
    body#body_event #eventPlanning a {
    background-position:0 -40px;}

#nav #contact a  {
    background:url(http://glustik.com/dustreeproductions/images/navigation/nav-contact.png) no-repeat;
    display:block;
    text-decoration:none;
    width:93px;
    margin:20px 12px 0 0;
    height:20px;}
    #nav #contact:hover > a {
    background-position:0 -20px;}
    #nav #contact a:active {
    background-position:0 -40px;}
    body#body_contact #contact a {
    background-position:0 -40px;}

#nav ul li ul {display: none}

#nav ul li:hover ul#sub {
display: block;
position: absolute;
margin:0 0 0 0;
z-index:15;}

#nav ul li:hover ul#sub li a {
display:block;
background:#e6e6e6;
color:#d89656;
padding:5px 10px 0px 10px;
height:25px;
width:265px;
text-align: left;
text-indent:0px;
border-right: none;
margin: 0 0;}

#nav ul li:hover ul#sub li a:hover {
background:#CCC;
color:#d89656;}

#nav > li ul li:hover ul {
    position:absolute;
    left:280px;
    top:0;
    display:block;
    width:305px;
    padding:0px 10px 0px 5px;}

#country > ul {margin:-30px 0 0 0;}
#dance > ul {margin:-60px 0 0 0;}
#dj > ul {margin:-90px 0 0 0;}
#karaoke > ul {margin:-120px 0 0 0;}
#productionShows > ul {margin:-150px 0 0 0;}
#rockabilly > ul {margin:-180px 0 0 0;}
#solos > ul {margin:-210px 0 0 0;}

Answer 1

为什么不使用现有ID瞄准违规ul并将其扩大？

 #solos ul{width: 575px;}

由于你已经向li左移了，当你扩展ul的宽度以便能够容纳两个li时，它们将包裹在2。

您还需要更改此规则：

#nav > li ul li:hover ul {
    display: block;
    left: 280px;
    padding: 0 10px 0 5px;
    position: absolute;
    top: 0;
    width: 305px; /* Delete this */
}

双下降 - 用于子的OVERFLOW第3列列表

1 个答案: