드롭 다운 자바 스크립트 메뉴에서 센터링 링크

Question

하위 메뉴가있는 드롭 다운 메뉴가 있습니다. 전체 메뉴는 브라우저의 전체 너비에 걸쳐 있으며, 링크는 모두 화면 왼쪽에 있습니다. 내가 원하는 것은 내 링크가 화면의 중앙에 있고, 오렌지색 배경이 여전히 브라우저의 전체 너비에 걸쳐 있다는 것입니다. 여기

코드입니다 :

머리 내부의 자바 스크립트와 CSS 및 신체의 나머지 간다 :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 

    $("#menu li").hover(function(){ 
     $(this).children(":hidden").slideDown(); 

    },function(){ 
     $(this).parent().find("ul").slideUp(); 

    }); 

}); 

</script> 


<style> 

#menu{ 
height: 30px; 
background-color:#F90; 
} 

#menu li li:hover{ 
background-color:yellow; 
cursor:pointer; 
} 

#menu ul, #menu li{ 
list-style-type:none; 
padding:0; 
margin:0; 
} 

#menu li{ 
float:left; 
width:120px; 
list-style-type:none; 
line-height:30px; 
text-align:center; 
} 

#menu li ul{ 
position:absolute; 
background-color:#f90; 
display:none; 
} 

#menu li li{ 
float:none; 
padding:2px; 
} 

#menu a{ 
color:#000; 
text-decoration:none; 
} 
</style> 



<div id="menu"> 
<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Info</a> 
      <ul> 
       <li><a href="http://www.example.com">example</a></li> 
       <li><a href="#">Submenu2</a></li> 
       <li><a href="#">Submenu3</a></li> 
      </ul> 
      </li> 
    <li><a href="#">Portfolio</a> 
      <ul> 
       <li><a href="#">Submenu1</a></li> 
       <li><a href="#">Submenu2</a></li> 
       <li><a href="#">Submenu3</a></li> 
      </ul> 
      </li> 
</ul> 
</div> 

Answer 1

추가를 margin: auto 및 display: table :

CSS

#menu{ 
    height: 30px; 
    background-color:#F90; 
    width:100%; 
} 

#menu li li:hover{ 
    background-color:yellow; 
    cursor:pointer; 
} 

#menu ul, #menu li{ 
    list-style-type:none; 
    padding:0; 
    margin:auto;/*Add this*/ 
    display: table;/*Add this*/ 
} 

#menu li{ 
    float:left; 
    width:120px; 
    list-style-type:none; 
    line-height:30px; 
    text-align:center; 
} 

#menu li ul{ 
    position:absolute; 
    background-color:#f90; 
    display:none; 
} 

#menu li li{ 
    float:none; 
    padding:2px; 
} 

#menu a{ 
    color:#000; 
    text-decoration:none; 
} 

fiddle