...

View Full Version : Resolved css menu color change



j634
02-06-2012, 02:26 AM
I am in the process of developing a site and need to mimic this site for the menu. http://www.xt-commerce.com/ Just hover over the menu and you will see what I mean.

What I need is for the menu border on the bottom to change color when you hover over a link.

example: when on the home page the home button and border are blue.

When you hover on the contact link the button for contact changes to orange, but so does the bottom border. When you click on the contact button the color remains orange.

I don't want to do java if possible. I was able to get it to work by placing each link with a seperate menu . Basically creating a new menu for each link, but it seems a little over the top and redundant.

Anyone have a simpler way to do this? Here is the basic css which came from a dropdown menu.


#menu {
list-style:none;
width:940px;
margin:3px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;

/* Rounded Corners */

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

/* Background color and gradients */

background: #fff;

/* Borders */

border-bottom: 4px solid #065682;

-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}

#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;

/* Background color and gradients */

background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

/* Rounded corners */

-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}

#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #000;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #ffffff;
}

This would be for the home link. If I wanted to make a second link for example it would be for the contact button and I just changed the menu to menu1. That was the only way I could think to make it work, but it is a lot of code.

Thanks for any simpler answers



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum