центрирующие ссылки в раскрывающемся меню javascript

Question

У меня есть раскрывающееся меню с подменю, все меню охватывает всю ширину браузера, прямо сейчас ссылки расположены слева от экрана. Я бы хотел, чтобы мои ссылки были в центре экрана, а оранжевый фон все еще охватывал всю ширину браузера.

Вот код:

внутри головы идет на JavaScript и 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; 
}