# Css rollover navigation bar in Firefox

**URL:** <https://forum.kirupa.com/t/css-rollover-navigation-bar-in-firefox/284036>\
**Category:** Uncategorized\
**Created:** [March 13, 2009, 11:41pm UTC](https://forum.kirupa.com/t/css-rollover-navigation-bar-in-firefox/284036 "2009-03-13T23:41:05Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![jjmaster\_j](https://avatars.discourse-cdn.com/v4/letter/j/db5fbb/32.png) [@jjmaster\_j](https://forum.kirupa.com/u/jjmaster_j)\
**Post date:** [March 13, 2009, 11:41pm UTC](https://forum.kirupa.com/t/css-rollover-navigation-bar-in-firefox/284036/1 "2009-03-13T23:41:05Z")

</div>

I have this CSS code below and the active link (#navbar a:active in my css) works in IE but not in Firefox. In other words, when I click on the button, another button is loaded and stayed as it is supposed to. In Firefox, it did not stay. Thanks

My html:  
…  
\<link href=“style.css” rel=“stylesheet” type=“text/css”\>  
\</head\>

\<body\>  
\<ul id=“navbar”\>  
\<li\>\<a href="#"\>Home\</a\>\</li\>  
\<li\>\<a href="#"\>Menu Item 2\</a\>\</li\>  
\<li\>\<a href="#"\>Menu Item 3\</a\>\</li\>  
\<li\>\<a href="#"\>Menu Item 4\</a\>\</li\>  
\</ul\>  
\</body\>

My css:  
#navbar {  
font-family:Arial, Helvetica, sans-serif;  
font-size:.8em;  
font-weight:bold;  
height:45px;  
}  
#navbar li {  
list-style:none;  
display:inline;  
}  
#navbar a {  
width:110px;  
color:#fff;  
text-decoration:none;  
background:url(“images/button-up.jpg”) no-repeat;  
float:left;  
padding:12px 10px 13px;  
margin:0 -10px;  
}  
#navbar a:hover {  
background-position:0 -45px;  
color:#1e5ebd;  
background:url(“images/button-down.jpg”) no-repeat;  
}  
// THIS DOES NOT WORK SOMEHOW WITH FIREFOX!!!  
#navbar a:active {  
background-position:0 -90px;  
color:#FEF8AF;  
background:url(“images/button-down.jpg”) no-repeat;

}