Html 双下拉菜单-带溢出第三列列表的接头
Html 双下拉菜单-带溢出第三列列表的接头,html,css,drop-down-menu,Html,Css,Drop Down Menu,我一直在想如何为我的双下拉菜单设置一个“溢出”列。(所有CSS)我只使用娱乐链接这里是一个活生生的例子:独奏二重奏三重奏显然太长了,是一个问题。我试图使任何列出的项目在10左右“溢出”到另一列(尚未显示)任何关于如何做到这一点的帮助或建议都将非常有用,我们将永远感激谢谢各位(和女士们)以下是我的导航CSS: #nav { font-family: arial, sans-serif; position: relative; width: 990px; height:60px; font-size
我一直在想如何为我的双下拉菜单设置一个“溢出”列。(所有CSS)
我只使用娱乐链接
这里是一个活生生的例子:
独奏二重奏三重奏
显然太长了,是一个问题。我试图使任何列出的项目在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;}
为什么不使用现有的ID来定位违规的
ul
,并将其扩大
#solos ul{width: 575px;}
由于您已经将li
浮动到左侧,当您扩展ul
的宽度以便能够容纳两个li
时,它们将以两行的形式包装
您还需要更改此规则:
#nav > li ul li:hover ul {
display: block;
left: 280px;
padding: 0 10px 0 5px;
position: absolute;
top: 0;
width: 305px; /* Delete this */
}
字体更小,填充更少,或者将它们过滤成两列?我已经尝试过了,但似乎不起作用。还有人在测试这个吗?@varazi:我仔细查看了你的代码,并为你更新了我的答案。啊,我明白了,非常感谢——这非常有帮助。