Making nav bar changed when rolledover?

how do you make the nav bar so when you roll your mouse over it, it changes to something different? An examlpe is on this forum. when you roll over "Home" button it changes from blue to orange.

I believe you need to edit your CSS

AlphaPkz wrote:I believe you need to edit your CSS

do you know what i need to put?

bump

bump...

bump..........

While I do not approve of simply giving you the code as I've seen nothing to indicate you'd either understand or have attempted to find it yourself, this forum is about helping others so I will simply give you a couple of examples.

Without knowing the forum version you are using I am forced to be vague but for a css roll-over menu you would use html such as the following:

Code:


<div id="main-nav">
   <ul>
      <li><a href="#" class="home"><span>Home</span></a></li>
      <li><a href="#" class="about"><span>About us</span></a></li>
      <li><a href="#" class="faq"><span>F.A.Q.</span></a></li>
      <li><a href="#" class="contact"><span>Contact</span></a></li>
   </ul>
</div>


And then style it with the following CSS placed in the head section of your html:

Code:


<style type="text/css">
#main-nav{
   width:400px;
   height:50px;
   margin:0 auto;
   background:#acacac url(img/menu-bg.jpg) no-repeat;             
}


#main-nav ul{
   border: 0;
   margin: 0;
   padding: 0;
   list-style-type: none;
   text-align: center;
   clear: left;
}

#main-nav ul li{
   display: block;
   float: left;
   text-align: center;
   padding: 0;
   margin: 0;
}

#main-nav ul li a span{
   display:none;
}


#main-nav ul li a{
   width:100px;
   height:50px;
   margin:0px;
   padding:0px;
   display: block;
      
}

/* -- Hovers -- */

#main-nav ul li a.home:hover{
   background: url(img/menu-bg.jpg) 0px -50px;
}

#main-nav ul li a.about:hover{
   background: url(img/menu-bg.jpg) -100px -50px;
}
#main-nav ul li a.faq:hover{
   background: url(img/menu-bg.jpg) -200px -50px;
}         
#main-nav ul li a.contact:hover{
   background: url(img/menu-bg.jpg) -300px -50px;
}      
</style>


While if you wish and have the patients to use jQuery, someone has a very good tutorial on your desired result here.

harvengure wrote:While I do not approve of simply giving you the code as I've seen nothing to indicate you'd either understand or have attempted to find it yourself, this forum is about helping others so I will simply give you a couple of examples.

Without knowing the forum version you are using I am forced to be vague but for a css roll-over menu you would use html such as the following:

Code:


<div id="main-nav">
   <ul>
      <li><a href="#" class="home"><span>Home</span></a></li>
      <li><a href="#" class="about"><span>About us</span></a></li>
      <li><a href="#" class="faq"><span>F.A.Q.</span></a></li>
      <li><a href="#" class="contact"><span>Contact</span></a></li>
   </ul>
</div>


And then style it with the following CSS placed in the head section of your html:

Code:


<style type="text/css">
#main-nav{
   width:400px;
   height:50px;
   margin:0 auto;
   background:#acacac url(img/menu-bg.jpg) no-repeat;             
}


#main-nav ul{
   border: 0;
   margin: 0;
   padding: 0;
   list-style-type: none;
   text-align: center;
   clear: left;
}

#main-nav ul li{
   display: block;
   float: left;
   text-align: center;
   padding: 0;
   margin: 0;
}

#main-nav ul li a span{
   display:none;
}


#main-nav ul li a{
   width:100px;
   height:50px;
   margin:0px;
   padding:0px;
   display: block;
      
}

/* -- Hovers -- */

#main-nav ul li a.home:hover{
   background: url(img/menu-bg.jpg) 0px -50px;
}

#main-nav ul li a.about:hover{
   background: url(img/menu-bg.jpg) -100px -50px;
}
#main-nav ul li a.faq:hover{
   background: url(img/menu-bg.jpg) -200px -50px;
}         
#main-nav ul li a.contact:hover{
   background: url(img/menu-bg.jpg) -300px -50px;
}      
</style>


While if you wish and have the patients to use jQuery, someone has a very good tutorial on your desired result here.

i have researched it and i found one code but when i insert it, nothing happens

Did the code I gave you work?

Yes it did thanks
I forgot to mark this solved
Solved