I have a simple menu bar inside a div and I can center the div but I want to center the menu bar inside the div.
This is the code:
CSS:
* {
margin: 0px;
padding: 0px;
}
.menu {
height: 35px;
width: auto;
background: url("../img/slash-layer.png") repeat scroll 0% 0% rgb(130, 28, 107);
border-radius: 15px;
padding-top: 10px;
}
ul#navmenu, ul.sub1, ul.sub2 {
list-style-type: none;
font-size: 9pt;
max-width: 660px;
margin: 0 auto;
}
ul#navmenu li {
width: 125px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
}
ul#navmenu a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 10px;
}
ul#navmenu .sub1 li {
}
ul#navmenu .sub1 a {
margin-top: 5px;
}
ul#navmenu .sub2 a {
margin-left: 3px;
}
ul#navmenu li:hover > a {
background-color: #CFC;
}
ul#navmenu li:hover a:hover {
background-color: #FF0;
}
ul#navmenu ul.sub1 {
display: none;
position: absolute;
top: 26px;
left: 0px;
}
ul#navmenu ul.sub2 {
display: none;
position: absolute;
top: 0px;
left: 126px;
}
ul#navmenu li:hover .sub1 {
display: block;
}
ul#navmenu .sub1 li:hover .sub2 {
display: block;
}
.darrow {
font-size: 11pt;
position: absolute;
top: 5px;
right: 4px;
}
.rarrow {
font-size: 13pt;
position: absolute;
top: 6px;
right: 4px;
}
HTML:
<html>
<head>
<title><?php echo $title; ?></title>
<link rel="stylesheet" type="text/css" href="recursos/css/main.css">
<meta charset="utf-8">
<div class="logo"></div>
<div class="menu">
<ul id="navmenu">
<li><a href="#">Home</a></li>
<li><a href="#">Novedades</a></li>
<li><a href="#">Categorías <span class="darrow">▼</span></a>
<ul class="sub1">
<li><a href="#">Acción</a></li>
<li><a href="#">Aventuras</a></li>
</ul></li>
<li><a href="#">Profile <span class="darrow">▼</span></a>
<ul class="sub1">
<li><a href="#">Menu 4.1</a></li>
<li><a href="#">Menu 4.2 <span class="rarrow">?</span></a>
<ul class="sub2">
<li><a href="#">Menu 4.2.1</a></li>
<li><a href="#">Menu 4.2.2</a></li>
</ul></li>
</ul></li>
</ul>
</div>
</head>
<body>
I tried to put
ul#navmenu {
display: block
}
but it doesn't work and I don't understand what... Because I can center the div...
How I can do it?
See Question&Answers more detail:os
