2012-04-06 182 views
0

在下拉菜单位置或主菜单的下拉菜单中出现问题时,出现了一些问题,但无法确定可能存在的问题......以下是CSS代码(菜单利UL上它的外观)图像 - >http://i.imgur.com/9VjpW.jpg或的jsfiddle http://jsfiddle.net/F5wCG/3/下拉菜单

.menu ul{ 
background-color: transparent; 
height: 25px; 
list-style: none; 
margin: 0; 
padding: 0; 
position: relative; 
clear: left; 
float: right; 
text-align: center; 
right: 50%; 

} 
.menu li{ 
    float: left; 
    padding: 0px; 
    position: relative; 
    left: 50%; 
    margin: 0px; 
    list-style: none; 
    } 

.menu li a{ /* Where main link names are etc */ 
    background: #333 url("images/seperator.gif") bottom right no-repeat; 
    color: #CCC; 
    display: block; 
    font-weight: normal; 
    line-height: 35px; 
    margin: 0px; 
    padding: 0px 25px; 
    text-align: center; 
    text-decoration: none; 
    } 

    .menu li a:hover, .menu ul li:hover a{ 
     background-color: #2580A2; 
     background-image: url('images/hover.gif'); 
     background-position: bottom center; 
     background-repeat: no-repeat; 
     color:#FFFFFF; 
     text-decoration:none; 
     } 

.menu li ul{ /* Drop down menu */ 
    background-color: #333; 
    display: none; 
    height: auto; 
    border: 0px; 
    position: absolute; 
    width: 225px; 
    z-index: 200; 
    padding: 0px; 
    margin: 0px; 
    border: 0px; 
    } 

.menu li:hover ul{ 
    display: block; 
    } 

.menu li li { 
    background: url('images/sub_sep.gif') bottom left no-repeat; 
    display: block; 
    float: none; 
    width: 220px; 
    } 

.menu li:hover li a{ 
    background: none; 

    } 

.menu li ul a{ 
    display: block; 
    height: 35px; 
    font-size: 12px; 
    font-style: normal; 
    margin: 0px; 
    padding: 0px 10px 0px 15px; 
    text-align: left; 
    } 

    .menu li ul a:hover, .menu li ul li:hover a{ 
     background: #2580A2; 
     background-image: url(images/hover_sub.gif); 
     background-position: center left; 
     background-repeat: no-repeat; 
     border: 0px; 
     color: #FFF; 
     text-decoration: none; 
     } 

.menu p{ 
    clear: left; 
    } 

回答

1

http://jsfiddle.net/F5wCG/4/

基本上除去 。菜单里{左:50%} 并添加 。菜单里一个{左:0 ; }

+0

现在,它就像这个http://i.imgur.com/MrOw3.jpg中心效应消失了(也许我应该提到我希望菜单居中) – sn00p 2012-04-06 21:29:09