2012-04-06 9 views
0

ドロップダウンメニューからドロップダウンメニューからのリンクを使用してドロップダウンメニューの位置または主に背景を取得する際に問題が発生した場合、問題の原因を特定できません。それがどのように見えるかにリチウム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/

基本的 .menu李{左:50%}削除 および .menuリチウムのA {左追加:0 ; }

+0

これは今のところhttp://i.imgur.com/MrOw3.jpgのようなもので、中央効果は消えてしまいます(私はメニューを中央にしたいと言っているはずです) – sn00p

関連する問題