CSS Rollover Menu

[magicthegatherist]

So, my code has gotten sort of cluttered I think. It seems that some of it may be redundant, but that's not the problem.

I'm trying to set the width of some rollover horizontal buttons to a certain pixel amount (125px)...Problem is, I don't know where I'm supposed to put the width tag, or if I'm supposed to do something else even...

Heres the code I have:

Code: Select all

#NavBar{
   position:relative;
   top:150px;
   font-family:Arial, Helvetica, sans-serif;
   font:Arial;
   font-size:10pt;
}
#NavBar ul{
   margin:0px;
   padding:3px;
   display: inline;
}
#NavBar ul li{
   margin:0px;
   list-style:none;
   display:inline;
}
#NavBar ul li a{
   background-color:#333333;
   color:#FFFFFF;
   padding:4px 25px 4px 4px;
   text-decoration:none;
   border-width:2px;
   border:solid;
   border-color:#000000;
}
#NavBar ul li a:hover{
   background-color:#CCCCCC;
   color:#000000;
}


[/code]

[rangana]

Be it in #NavBar ul li a

[magicthegatherist]

Nope, its not working in there... I add

Code: Select all

width:200px;


and nothing happens.

Is there another property I'm missing?

[rangana]

Yes, it's not working in FF ,
Give me a second and i'll give this a shot

[rangana]

Adding it in #NavBar ul li a would work if you'll set your navigation's display to block
Something like this would work:

Code: Select all

#NavBar ul li a{
   background-color:#333333;
   color:#FFFFFF;
   padding:4px 25px 4px 4px;
   text-decoration:none;
   border-width:2px;
   border:solid;
   border-color:#000000;
display:block;
width:200px;
}


But with the code given above, your menus will be placed vertically instead of your ideal design to place it horizontally.

If you really want it to display horizontally, then playing on your padding to

#NavBar ul li a{
background-color:#333333;
color:#FFFFFF;
padding:4px 63px 4px 63px;
text-decoration:none;
border-width:2px;
border:solid;
border-color:#000000;
}
would aide.