Полноразмерное горизонтальное центрированное меню и подменю

Question

Я пытаюсь создать меню с подменю. Я хотел бы, чтобы оба меню были горизонтальными, полными и центрированными. Возможно ли это, и если да, то есть ли у кого-нибудь какие-либо советы о том, как этого достичь?

Заранее благодарен!

Этот код создает горизонтальное меню и подменю, но они выравниваются влево, и я не могу получить их как по всей ширине, так и по центру.

HTML:

<div id="menu"> 

<ul id="nav"> 
<li><a href="#">Menu 1</a> 
<ul> 
<li><a href="#">Menu 1 Submenu item 1</a></li> 
<li><a href="#">Menu 1 Submenu item 2</a></li> 
<li><a href="#">Menu 1 Submenu item 3</a></li> 
</ul> 
</li> 

<li><a href="#">Menu 2</a> 
<ul> 
<li><a href="#">Menu 2 Submenu item 1</a></li> 
<li><a href="#">Menu 2 Submenu item 2</a></li> 
<li><a href="#">Menu 2 Submenu item 3</a></li> 
</ul> 
</li> 

<li><a href="#">Menu 3</a> 
<ul> 
<li><a href="#">Menu 3 Submenu item 1</a></li> 
<li><a href="#">Menu 3 Submenu item 2</a></li> 
<li><a href="#">Menu 3 Submenu item 3</a></li> 
</ul> 
</li> 

<li><a href="#">Menu 4</a> 
<ul> 
<li><a href="#">Menu 4 Submenu item 1</a></li> 
<li><a href="#">Menu 4 Submenu item 2</a></li> 
<li><a href="#">Menu 4 Submenu item 3</a></li> 
</ul> 
</li> 
</ul> 

</div> 

CSS:

<style type="text/css"> 
#menu { 
    width: 960px; 
    height: 40px; 
    clear: both; 
} 

ul#nav { 
    float: left; 
    width: 960px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    background: #dc0000 url(../img/menu-parent.png) repeat-x; 
    -moz-border-radius-topright: 10px; 
    -webkit-border-top-right-radius: 10px; 
    -moz-border-radius-topleft: 10px; 
    -webkit-border-top-left-radius: 10px; 
    text-align: center; 
} 

ul#nav li { 
    display: inline; 
} 

ul#nav li a { 
    float: left; 
    font: bold 1.1em arial,verdana,tahoma,sans-serif; 
    line-height: 40px; 
    color: #fff; 
    text-decoration: none; 
    text-shadow: 1px 1px 1px #880000; 
    margin: 0; 
    padding: 0 30px; 
    background: #dc0000 url(../img/menu-parent.png) repeat-x; 
    -moz-border-radius-topright: 10px; 
    -webkit-border-top-right-radius: 10px; 
    -moz-border-radius-topleft: 10px; 
    -webkit-border-top-left-radius: 10px;  
} 

/* APPLIES THE ACTIVE STATE */ 
ul#nav .current a, ul#nav li:hover > a { 
    color: #fff; 
    text-decoration: none; 
    text-shadow: 1px 1px 1px #330000; 
    background: #bb0000; 
    -moz-border-radius-topright: 10px; 
    -webkit-border-top-right-radius: 10px; 
    -moz-border-radius-topleft: 10px; 
    -webkit-border-top-left-radius: 10px; 
} 

/* THE SUBMENU LIST HIDDEN BY DEFAULT */ 
ul#nav ul { 
    display: none; 
} 

/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */ 
/* Sub menu UL */ 
ul#nav li:hover > ul { 
    position: absolute; 
    display: block; 
    width: 920px; 
    height: 45px; 
    position: absolute; 
    margin: 40px 0 0 0; 
    background: #aa0000 url(../img/menu-child.png) repeat-x; 
    -moz-border-radius-bottomright: 10px; 
    -webkit-border-bottom-right-radius: 10px; 
    -moz-border-radius-bottomleft: 10px; 
    -webkit-border-bottom-left-radius: 10px; 
} 

/* Sub menu link */ 
ul#nav li:hover > ul li a { 
    float: left; 
    font: bold 1.1em arial,verdana,tahoma,sans-serif; 
    line-height: 45px; 
    color: #fff; 
    text-decoration: none; 
    text-shadow: 1px 1px 1px #110000; 
    margin: 0; 
    padding: 0 30px 0 0; 
    background: #aa0000 url(../img/menu-child.png) repeat-x; 
} 

    /* Sub menu link hover */ 
ul#nav li:hover > ul li a:hover { 
    color: #120000; 
    text-decoration: none; 
    text-shadow: none; 
} 
    </style> 

Answer 1

Проверить this

Я использовал display: table; для UL и display: table-cell для li для создания меню регулировки.

HTML

<div id="menu"> 

<ul id="nav"> 
<li><a href="#">Menu 1</a> 
<div class="dropdown"><ul> 
<li><a href="#">Menu 1 Submenu item 1</a></li> 
<li><a href="#">Menu 1 Submenu item 2</a></li> 
<li><a href="#">Menu 1 Submenu item 3</a></li> 
</ul> 
    </div> 
</li> 

<li><a href="#">Menu 2</a> 
    <div class="dropdown"> 
<ul> 
<li><a href="#">Menu 2 Submenu item 1</a></li> 
<li><a href="#">Menu 2 Submenu item 2</a></li> 
<li><a href="#">Menu 2 Submenu item 3</a></li> 
</ul> 
    </div> 
</li> 

<li><a href="#">Menu 3</a> 
<div class="dropdown"> <ul> 
<li><a href="#">Menu 3 Submenu item 1</a></li> 
<li><a href="#">Menu 3 Submenu item 2</a></li> 
<li><a href="#">Menu 3 Submenu item 3</a></li> 
</ul> 
    </div> 
</li> 

<li><a href="#">Menu 4</a> 
<div class="dropdown"><ul> 
<li><a href="#">Menu 4 Submenu item 1</a></li> 
<li><a href="#">Menu 4 Submenu item 2</a></li> 
<li><a href="#">Menu 4 Submenu item 3</a></li> 
</ul> 
    </div> 
</li> 
</ul> 

CSS

#menu { 
    width: 960px; 
    height: 40px; 
    clear: both; 
    position: relative; 
} 

ul#nav { 
    display: table; 
    width: 960px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    background: #dc0000 url(../img/menu-parent.png) repeat-x; 
    -moz-border-radius-topright: 10px; 
    -webkit-border-top-right-radius: 10px; 
    -moz-border-radius-topleft: 10px; 
    -webkit-border-top-left-radius: 10px; 
    text-align: center; 
} 

ul#nav li { 
    display: table-cell; 
} 

ul#nav li a { 
    display: block; 
    font: bold 1.1em arial,verdana,tahoma,sans-serif; 
    line-height: 40px; 
    color: #fff; 
    text-decoration: none; 
    text-shadow: 1px 1px 1px #880000; 
    margin: 0; 
    padding: 0 30px; 
    background: #dc0000 url(../img/menu-parent.png) repeat-x; 
    -moz-border-radius-topright: 10px; 
    -webkit-border-top-right-radius: 10px; 
    -moz-border-radius-topleft: 10px; 
    -webkit-border-top-left-radius: 10px;  
} 

/* APPLIES THE ACTIVE STATE */ 
ul#nav .current a, ul#nav li:hover > a { 
    color: #fff; 
    text-decoration: none; 
    text-shadow: 1px 1px 1px #330000; 
    background: #bb0000; 
    -moz-border-radius-topright: 10px; 
    -webkit-border-top-right-radius: 10px; 
    -moz-border-radius-topleft: 10px; 
    -webkit-border-top-left-radius: 10px; 
} 

/* THE SUBMENU LIST HIDDEN BY DEFAULT */ 
ul#nav .dropdown { 
    display: none; 
    position: absolute; 
    left: 0; 
    top: 40px; 
    width: 100%; 
} 
ul#nav .dropdown ul { 
    display: table; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */ 
/* Sub menu UL */ 
ul#nav li:hover > .dropdown { 

    display: block; 

    background: #aa0000 url(../img/menu-child.png) repeat-x; 
    -moz-border-radius-bottomright: 10px; 
    -webkit-border-bottom-right-radius: 10px; 
    -moz-border-radius-bottomleft: 10px; 
    -webkit-border-bottom-left-radius: 10px; 
} 
ul#nav li > .dropdown a { 
    padding: 3px 30px 
} 
/* Sub menu link */ 
ul#nav li:hover > ul li a { 
    font: bold 1.1em arial,verdana,tahoma,sans-serif; 
    line-height: 45px; 
    color: #fff; 
    text-decoration: none; 
    text-shadow: 1px 1px 1px #110000; 
    margin: 0; 
    padding: 0 30px 0 0; 
    background: #aa0000 url(../img/menu-child.png) repeat-x; 
} 

    /* Sub menu link hover */ 
ul#nav li:hover > ul li a:hover { 
    color: #120000; 
    text-decoration: none; 
    text-shadow: none; 
}