CSS 수평 메뉴 센터

Question

내가 내 탐색 메뉴이 CSS 코드를 가지고 :

#cssmenu ul { margin: 0; padding: 0;} 
#cssmenu li { margin: 0; padding: 0;} 
#cssmenu a { margin: 0; padding: 0;} 
#cssmenu ul {list-style: none;} 
#cssmenu a {text-decoration: none;} 
#cssmenu {height: 50px; background-color: #f36f25; box-shadow: 0px 2px 3px rgba(0,0,0,.4);} 
#cssmenu > ul > li { 
    float: left; 
    margin-left: 15px; 
    position: relative; 
} 
#cssmenu > ul > li > a { 
    color: #ffffff; 
    font-size: 15px; 
    line-height: 50px; 
    padding: 5px 20px; 
-webkit-transition: color .15s; 
    -moz-transition: color .15s; 
    -o-transition: color .15s; 
     transition: color .15s; 
} 
#cssmenu > ul > li > a:hover {color: #666666; } 
#cssmenu > ul > li > ul { 
    opacity: 0; 
    visibility: hidden; 
    padding: 16px 0 20px 0; 
    background-color: #eeeeee; 
    text-align: left; 
    position: absolute; 
    top: 30px; 
    left: 50%; 
    margin-left: -90px; 
    width: 180px; 
-webkit-transition: all .3s .1s; 
    -moz-transition: all .3s .1s; 
    -o-transition: all .3s .1s; 
     transition: all .3s .1s; 
-webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
     border-radius: 5px; 
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
     box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
} 
#cssmenu > ul > li:hover > ul { 
    opacity: 1; 
    top: 65px; 
    visibility: visible; 
} 
#cssmenu > ul > li > ul:before{ 
    content: ''; 
    display: block; 
    border-color: transparent transparent rgb(250,250,250) transparent; 
    border-style: solid; 
    border-width: 10px; 
    position: absolute; 
    top: -20px; 
    left: 50%; 
    margin-left: -10px; 
} 
#cssmenu > ul ul > li { position: relative;} 
#cssmenu ul ul a{ 
    color: #000000; 
    font-size: 13px; 
    background-color: #eeeeee; 
    padding: 5px 8px 7px 16px; 
    display: block; 
-webkit-transition: background-color .1s; 
    -moz-transition: background-color .1s; 
    -o-transition: background-color .1s; 
     transition: background-color .1s; 
} 
#cssmenu ul ul a:hover {background-color: #f36f25;} 
#cssmenu ul ul ul { 
    visibility: hidden; 
    opacity: 0; 
    position: absolute; 
    top: -16px; 
    left: 206px; 
    padding: 16px 0 20px 0; 
    background-color: #eeeeee; 
    text-align: left; 
    width: 160px; 
-webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    -o-transition: all .3s; 
     transition: all .3s; 
-webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
     border-radius: 5px; 
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
     box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
} 
#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;} 
#cssmenu ul ul a:hover{ 
    background-color: #f36f25; 
    color: rgb(240,240,240); 
} 

내가 하위 메뉴 상자가 그래서 당신은 주황색 부분에 상단에있는 작은 화살표를 볼 수있는 조금 더 이동해야 메뉴 (주 비트) 및도 만들 그것은이 있지만, 링크/텍스트 페이지 여기

을 중심으로 만든다대로 전체 페이지 폭이 바이올린입니다 : http://jsfiddle.net/dQnjt/

어떤 아이디어?

Answer 1

대신 사용 float의 display: inline-block 부모 ul에 text-align: center을 추가

#cssmenu ul { margin: 0; padding: 0; text-align: center; } 

#cssmenu > ul > li { 
    display: inline-block; 
    margin-left: 15px; 
    position: relative; 
} 

그냥 가져가에 최고 값을 줄일 수는 :

#cssmenu > ul > li:hover > ul { 
    opacity: 1; 
    top: 55px; 
    visibility: visible; 
} 

http://jsfiddle.net/dQnjt/1/

Answer 2

나는 위치를 추가 한 : 다음과 관련이 있습니다.

#cssmenu > ul > li > ul { 
    opacity: 0; 
    visibility: hidden; 
    padding: 16px 0 20px 0; 
    background-color: #eeeeee; 
    text-align: left; 
    position: relative; 
    left: 50%; 
    margin-left: -90px; 
    width: 180px; 
-webkit-transition: all .3s .1s; 
    -moz-transition: all .3s .1s; 
    -o-transition: all .3s .1s; 
     transition: all .3s .1s; 
-webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
     border-radius: 5px; 
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
     box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
} 
#cssmenu > ul > li:hover > ul { 
    opacity: 1; 
    top: 0px; 
    visibility: visible; 
    position:relative; 
} 

http://jsfiddle.net/dQnjt/5/

Answer 3

당신은 단지 ul:display:table; margin:0 auto;을 추가 할 수 있습니다, 이것은 그 안에 떠 요소를 중심합니다.