Centralize Horizontal Menu Bar

This is my code:
<style type="text/css">
ul#navbar {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#navbar li {
float: left;
border: 1px solid black;
text-align: center;
}
ul#navbar a {
background-color: #CCC;
color: #000;
text-decoration: none;
display: block;
width: 120px;
padding: 4px;
}
ul#navbar a:hover {
background-color: #CFF;
text-decoration: underline;
}
ul#navbar ul {
display: none;
list-style-type: none;
}
ul#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
ul#navbar li:hover li {
float: none;
}
</style>

 

One possible solution:

ul#navbar {
  ... ;
  display: table;
  margin: 0 auto;
  }

Code (markup):

An element displayed as table will shrink wrap its content. Auto margin will then center it horizontally.

cheers,

gary

 

Thank you.

 

don't float anything, set text-align:center on the outermost UL, set the anchors to display:inline-block and the LI to display:inline; You go that route you'll also want to pull the BORDER off the LI and put it on the anchor since border on a inline is unpredictable.

I also suggest NOT using display:none to hide the dropdowns, screen readers may ignore them and it makes already painfully difficult keyboard navigation even harder. Try using overflow:hidden on the LI, or left:-999em and :hover left:0 on the dropdown. Either of those techniques is "safer" from an accessibility standpoint.

Though personally, I've pulled the plug on dropdown menus altogether; they're accessibility trash and a pain in the ass on smaller displays when you start making the layout responsive.

 

Thank you.