Hi all, I am trying to create a simple horizontal menu with ul and li elements, and the css active property only works on IE7 but it does not work on any other browser.

Could anybody give a hand on this?

Thanks in advance.

Cesar.

css Code

  #navigation{
          text-align: right;
          /*margin-top: 70px;*/
      }

 #navigation ul{
          float:right;
          margin:0;
          padding:0;
       }

 #navigation li{
            float: right;
            display: block;
            text-align: center;
            list-style-type: none;
        }
 #navigation li a{
            color:#A08019;
            background-image: url('../Images/Menu1.png');
            background-repeat:repeat-x;
            background-position: center center;
            text-decoration:none;   
            font-weight:bold;
            display: block;
            height:25px;
            vertical-align:middle;
            padding-right:10px;
            padding-left:10px;
 }

 #navigation li a:hover
     {
           color: #B39A48;           
            background-image: url( '../Images/Menu2.png' );
            background-repeat: repeat-x;
            background-position: center center;
            text-decoration: none;
            font-weight: bolder;
            display: block;
            height: 25px;
            vertical-align: middle;
            padding-right: 10px;
            padding-left: 10px;
        }

  #navigation li a:active
        {
            color: white; 
            background-image: url( '../Images/Menu2.png' );
            background-repeat: repeat-x;
            background-position: center center;
            text-decoration: none;
            font-weight: bolder;
            display: block;
            height: 25px;
            vertical-align: middle;
            padding-right: 10px;
            padding-left: 10px;
        }

HTML Code

    <div id="navigation">

        <ul>

            <li><a href="#">Contacto</a></li>

            <li><a href="#">Ubicacion</a></li>

            <li><a href="#">Reservas</a></li>

            <li><a href="#">Menus</a></li>

            <li><a href="#">Local</a></li>

        </ul>

    </div>

2 answers

KC Rajput 178
1
point
This was chosen as the best answer

HI, if you are using a static site than you can use this css.

 #navigation{
          text-align: right;
          /*margin-top: 70px;*/
      }

 #navigation ul{
          float:right;
          margin:0;
          padding:0;
       }

 #navigation li{
            float: right;
            display: block;
            text-align: center;
            list-style-type: none;
        }
 #navigation li a{
            color:#A08019;
            background-image: url('../Images/Menu1.png');
            background-repeat:repeat-x;
            background-position: center center;
            text-decoration:none;   
            font-weight:bold;
            display: block;
            height:25px;
            vertical-align:middle;
            padding-right:10px;
            padding-left:10px;
 }

 #navigation li a:hover
     {
           color: #B39A48;           
            background-image: url( '../Images/Menu2.png' );
            background-repeat: repeat-x;
            background-position: center center;
            text-decoration: none;
            font-weight: bolder;
            display: block;
            height: 25px;
            vertical-align: middle;
            padding-right: 10px;
            padding-left: 10px;
        }

  #active
        {
            color: #000; 
            background-image: url( '../Images/Menu2.png' );
            background-repeat: repeat-x;
            background-position: center center;
            text-decoration: none;
            font-weight: bolder;
            display: block;
            height: 25px;
            vertical-align: middle;
            padding-right: 10px;
            padding-left: 10px;
        }

and your html will be like this

<div id="navigation">
    <ul>
        <li id="active">Contacto</li>

        <li><a href="#">Ubicacion</a></li>
        <li><a href="#">Reservas</a></li>
        <li><a href="#">Menus</a></li>

        <li><a href="#">Local</a></li>
    </ul>
</div>

you can add active id for each page as you have 5 page in your site. and remove the link from this active button.if you want to active local button than use like this

<div id="navigation">

        <ul>

            <li><a href="#">Contacto</a></li>

            <li><a href="#">Ubicacion</a></li>

            <li><a href="#">Reservas</a></li>

            <li><a href="#">Menus</a></li>

            <li id="active">Local</li>

        </ul>

    </div>

try this.

Answered over 6 years ago by KC Rajput
1
point

your code is working, you just have to wait for a while before the background get's cached by your browser. If you want them to show instantly, you can

  1. Preload your image
  2. Your CSS sprites

You can check css sprites here

for preloading images you can use JavaScript or css techniques you can use, there are a ton of resources on this on the web, just search for preloading images

Answered over 6 years ago by cssrockstah
  • I can see the hover working but I cant see the active working. ErCesar over 6 years ago
  • actually it works, you just have to wait for the image to load, try this, click on the link, but don't release it yet.. hold it for awhile like 5 to 10 seconds, and you see it will load the background of active and your text will be white. Basically you're code works, you only need to preload images or use css sprites cssrockstah over 6 years ago