CSS Rollover Menu

magicthegatherist · **Joined:** Tue Mar 04, 2008 6:33 am **Posts:** 7

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:

#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 · **Posted:** Tue Mar 11, 2008 9:24 am

Be it in #NavBar ul li a

magicthegatherist · **Joined:** Tue Mar 04, 2008 6:33 am **Posts:** 7

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

Code:

width:200px;

and nothing happens.

Is there another property I'm missing?

rangana · **Posted:** Tue Mar 11, 2008 9:58 am

Yes, it's not working in FF

,
Give me a second and i'll give this a shot

rangana · **Posted:** Tue Mar 11, 2008 10:20 am

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:

#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.

CSS Rollover Menu

Who is online