I have this menu:
<div id=“mainmenu”>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
</ul>
</div>
inside a container (width of 957px). What I’m trying to do is not only center the menu within the container but also trying to get the menu to fill the width of the container. I can’t seem to figure out how to do that without the menu flowing OUTSIDE or BEYOND the container width.
Also, I have it set to absolute because my next layer will be a rather large image behind the menu.
CSS:
.mainmenu {
position: absolute;
margin-top: 7px;
top: 0px;
left: 0px;
line-height: normal;
z-index: 1000;
}
.mainmenu ul {
margin: 0px;
padding: 0px;
text-align: center;
font: normal 14px Georgia, "Times New Roman", Times, serif;
background: rgba(0,0,0,.5);
}
.mainmenu ul.menu li {
margin: 0px;
display: inline;
list-style-type: none;
padding: 10px 0px;
border-left: 1px solid #737476;
}
.mainmenu ul.menu li.first-child {
border-left: none;
}
.mainmenu ul.menu li a, .mainmenu ul.menu li a:link, .mainmenu ul.menu li a:active, .mainmenu ul.menu li a:visited {
color: #FFF;
padding: 10px 55px;
text-decoration: none;
text-transform: capitalize;
}
.mainmenu ul.menu li a:hover {
color: #000;
background: #FFF;
}
Thank you!