如何正确定位第三级菜单

如果您在“关于ISL” - >“董事会”下查看here，您可以看到我创建了第三级下拉菜单，但我该如何正确对齐该下拉菜单？下面你会看到我的CSS。如何正确定位第三级菜单

#menudiv { 
    width: 999px; 
    float: left; 
    clear: left; 
    height: 250px; 
    background: url(images/top_bg.png) no-repeat; 
    margin-top: 10px; 
} 
#mainmenu { 
    width: 948px; 
    height: 63px; 
    float: left; 
    margin-left: 16px; 
    margin-top: 5px; 
    border: 1px solid #D5D5D5; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.1); 
    -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.1); 
    background: url(images/nav_bg.gif) repeat; 
} 
.mainnav { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
.mainnav * { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
.mainnav ul { 
    position: absolute; 
    top: -999em; 
    display: none; 
} 
.mainnav li { 
    float: left; 
    position: relative; 
    z-index: 999; 
    height: 63px; 
    line-height: 55px; 
    margin-right: 0px; 
    border-right: 1px solid #D5D5D5; 
} 
.mainnav li.last { 
    border-right: none; 
} 
.mainnav a { 
    display: block; 
    font-size: 19px; 
    margin: 0; 
    color: #cc9900; 
    font-family: Copperplate,Arial,Helvetica,Sans serif; 
    font-weight: 600; 
    text-decoration: none; 
    padding: 3px 13px 3px 12px; 
    color: #555; 
    text-shadow: 0 1px 1px white; 
} 
.mainnav li:hover { 
    text-decoration: none; 
    border-bottom: solid 0px #ccc; 
    background: white; 
} 
.mainnav ul li { 
    width: 132px; 
} 
.mainnav li:hover ul, 
ul.mainnav li.sfHover ul { 
    left: 0px; 
    top: 50px; 
    padding-top: 0px; 
    width: 132px; 
    border-bottom: solid 0px #eaeaea; 
    background: url(images/nav_dropdown_shadow.gif) repeat-x top; 
    padding: 6px 0 0px 0px; 
    margin: 13px 0 0 -1px; 
    border: 1px solid #D5D5D5; 
    -moz-border-radius-bottomleft: 3px; 
    -webkit-border-bottom-left-radius: 3px; 
    -moz-border-radius-bottomright: 3px; 
    -webkit-border-bottom-right-radius: 3px; 
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.1); 
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.1); 
    width: 175px; 
    border-bottom-left-radius: 3px 3px; 
    border-bottom-right-radius: 3px 3px; 
} 
.mainnav li:hover li ul, 
.mainnav li.sfHover li ul { 
    top: -999em; 
} 
.mainnav li li:hover ul, 
ul.mainnav li li.sfHover ul { 
    left: 132px; 
    top: -8px; 
} 
.mainnav li:hover ul, 
.mainnav li li:hover ul { 
    top: -999em; 
} 
.mainnav li li { 
    color: #555; 
    display: block; 
    padding: 0px; 
    height: auto !important; 
    border: none; 
    width: 175px; 
    background: url(images/nav_dropdown_bg.gif) repeat; 
    margin: 0; 
} 
.mainnav li li a:link, 
.mainnav li li a:visited { 
    display: block; 
    height: auto !important; 
    line-height: 30px; 
    color: #333; 
    font-weight: normal; 
    font-family: arial,helvetica,sans-serif; 
    font-size: 12px; 
    border: none; 
    margin: 0; 
    padding-left: 10px; 
    overflow: hidden; 
    border-bottom: 1px solid #E3E3E3; 
} 
.mainnav li li :hover { 
} 
.mainnav li li a:hover { 
    background: none; 
    color: #555 ; 
    border-bottom: 1px solid #E3E3E3; 
}

问题是ul.sub-menu li ul.sub-menu离左边太远，并且由其父项覆盖。我如何修复这些ul元素的右对齐？

来源

2011-11-10 drewrowalnd

尝试在iPad/iPhone或Android设备上导航，您可能会考虑重新考虑您的设计。下拉CSS菜单几乎不可能在触摸屏上导航。 – jfrankcarr

最终我将创建一个移动网站，但他们认真对待这些下拉菜单。 – drewrowalnd

如果你不能说出来，这太糟糕了。由于我使用手机浏览更多自己，我已经远离使用任何下拉菜单或可折叠区域。 – jfrankcarr

在line 211在您的mainmenu.css中，调整子菜单的left位置，如178px，应该将子菜单放置在更舒适的地方。

来源

2011-11-11 13:03:34

如何正确定位第三级菜单

回答

相关问题