Centering the hover effect

[Shado]

Hi guys

I was wondering if any of you would be able to direct me in to the right direction as I have searched the internet for a solution but none seem to work - either that are I'm not implementing it correctly.

What I'm looking to do is to centre the drop down section of the navbar across the page (blue line). Now I have messed around with left {} in .navbar li span which works well except when my nav has more than 3 tabs.

At the end of the day I'd be happy if the drop down list didn't go past the (off the screen). I hope that makes sense.


The CSS code

#navbarcontainer{
position:relative;
height:65px;
color:#FFFFFF;
background:#143D55;
width:100%;
font-family:Arial, Helvetica, sans-serif;
left: -10px;
padding: 0 20px 0 0px;
}

.navbar{
position:relative;
height:33px;
width:100%;
font-weight:bold;
background:#fff url(#) repeat-x bottom left;
padding:0 0 0 20px;
}/* dropdown navbar - level 1 */

.navbar ul li a{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
display:block;
color:#EAF3F8;
text-decoration:none;
padding:0 0 0 20px;
height:33px;
} /*-- topnav tab links --*/

.navbar ul li a strong{
padding:8px 20px 0 0;
height:20px;
float:left;
font-weight:bold;
} /*-- topnav tabs --*/

.navbar ul li a:hover{
color:#fff;
background:transparent url(#) repeat-x bottom left; 
}/*-- topnav breadcrumb --*/

.navbar ul li a:hover strong{
display:block;
} /*-- topnav tabs --*/

.navbar li{
position:relative;
float: left;
list-style:none;
display:inline;
width:auto; 
} /*-- topnav tabs --*/

.navbar li ul a:hover{
color:#99CC00;
background:transparent repeat-x bottom left;
} /*-- subnav bar --*/

.navbar li a{
float: left;
margin: 0; padding: 0;
} /*-- subnav links --*/

.navbar li span{
float: left;
padding: 5px 0;
position: absolute;
left: 0px; 
top:33px;
display: none;
width: 900px;
background: #143D55;
color: #fff;
height:20px;
} /*-- subnav hidden bar --*/

.navbar li:hover span { 
display: block;
position:absolute;
} /*--Show subnav on hover--*/

The HTML code

<div id="navbarcontainer">
<div class="navbar">
<ul>
<li><a href="#"><strong>Home</strong></a></li>
<li><a href="#"><strong>#*$!</strong></a>
<ul onMouseOver="show(this)"><span><a href="#">#*$!</a><a href="#">#*$!</a><a href="#">#*$!</a><a href="#">#*$!</a></span></ul></li>

<li><a href="#"><strong>#*$!</strong></a>
<ul onMouseOver="show(this)"><span><a href="#">#*$!</a><a href="#">#*$!</a><a href="#">#*$!</a><a href="#">#*$!</a></span></ul></li>

<li><a href="#"><strong>#*$!</strong></a>
<ul onMouseOver="show(this)"><span><a href="#">#*$!</a><a href="#">#*$!</a><a href="#">#*$!</a><a href="#">#*$!</a></span></ul></li>
</ul>
</div>
</div>

Much appreciated ;)

[Major_Payne]

You really only need one div wrapper. If you set a width and height to it that will contain the horizontal nav menu, then you can center it with the CSS property: margin: 0 auto;

Trying to position content that is absolute positioned or positioned relative something else that may be is very hard to center.

[Shado]

I'm with you MP but to get the desired effect I need the nav to be at 100%. Ive been working on this nav for months and finally I get to use in a project.

The bases of the nav was modelled around this navbar [news24.com ] but I wanted it to look nicer (not so flat), that I have achieved but I also wanted it to work better. If you take a look at that nav you will see the first few tabs look good but as you hover over the last 3 you can see the design falling to pieces.

Either I need to find a way to centre the dropdown or I need to find a way to push the right side of the dropdown to the left when the right side hits the end of the screen.

[Shado]

Still haven't found a fix for this one and it's a bit of a problem when testing on smaller res screens.