CSS 드롭 다운 메뉴 정렬

CSS 기반 드롭 다운 메뉴를 만들었지 만 상위 목록 항목 위로 마우스를 가져 가면 순서가 지정되지 않은 목록이 상위 항목의 왼쪽에 고정되어 표시됩니다. 나는 그것이 그들에게 중심이되고 싶다. 그러나 나는 그 방법을 이해할 수 없다.CSS 드롭 다운 메뉴 정렬

http://jsfiddle.net/jspring/LtVaq/

html로는 :

<ul class="ulRight"> 
<li><a href="#">Settings</a> 
    <ul> 
     <li><a href="#">This Is</a></li> 
     <li><a href="#">Sub Menu</a></li> 
     <li><a href="#">One</a></li> 
    </ul> 
</li> 
<li><a href="#">Your Account</a> 
    <ul> 
     <li><a href="#">Sub Menu</a></li> 
     <li><a href="#">Two</a></li> 
     <li><a href="#">Now!</a></li> 
    </ul> 
</li>

.ulRight { 
    /*To float UL List to right*/ 
    list-style:none outside none !important; 
    position:absolute; 
    right:10px; 
    top:0px; 
    display:inline-table; 
    z-index:1000; 
} 
.ulRight ul:after { 
    content:""; 
    clear:both; 
    display:block; 
} 
.ulRight > li { 
    display:inline; 
    color:#BBBBBB; 
    width:auto; 
} 
.ulRight li > ul { 
    vertical-align:middle; 
    z-index:1001; 
    display:none; 
    position:relative; 
    margin:auto; 
    top:40px; 
    width:inherit; 
} 
.ulRight li:hover > ul { 
    display:block; 
} 
.ulRight > li { 
    margin:0 5px 0 5px; 
} 
.ulRight > li { 
    float:left; 
} 
.ulRight > li:hover { 
    background:#FFF; 
    border:1px solid #CCCCCC; 
} 
.ulRight a { 
    text-decoration:none; 
    font-weight:normal; 
    display:block; 
    padding:10px; 
} 
.ulRight li:hover a { 
    font-weight:bold; 
    color:#80B5E9; 
    text-align:center; 
} 
.ulRight li > ul { 
    background:#FFF; 
    border-radius:0px; 
    padding:0px; 
    position:absolute; 
    box-shadow:0px 0px 9px rgba(0, 0, 0, 0.15); 
    border:1px solid #CCCCCC; 
} 
.ulRight li > ul > li { 
    list-style:none; 
    float:none; 
    border-top:1px solid #CCCCCC; 
    border-bottom:1px solid #CCCCCC; 
    position:relative; 
} 
.ulRight li > ul a { 
} 
.ulRight li > ul a:hover { 
    color:#FFF; 
    background:#303030; 
}

은 어떤 도움이 많이 주시면 감사하겠습니다! 상대 위치

.ulRight li > ul{ 
position:relative; 
top:0; 
}

출처

2013-06-24 J Spring

변화는 부모 목록의 폭이 일치하지 않는 것입니다.

.ulRight li >ul{ 
position:realative; // this position makes the child position realative to your parent list which is left justified.... 
}

가장 빠르고 쉬운 것은 적용 폭입니다. 이렇게하면 부모와 자녀 목록의 너비가 모두 동일합니다. 이 솔루션을 좋아하지 않는 경우

.ulRight > li { 
display:inline; 
color:#BBBBBB; 
width:auto; // Change this to 110px or what ever you see fit 
}

이이

도움 (어쨌든 내 지식) ... 매개 변수를 설정하는 자바 스크립트를 사용하는

희망이 필요합니다

출처

2013-06-24 23:03:45 Mark

내가 볼 수있는 주요 문제에 대한

출처

2013-06-24 23:14:34

CSS 드롭 다운 메뉴 정렬

답변

관련 문제