Menu CSS link style overwrites page level links style..

**9greej10** · Mar 31, 2006 02:00

Hi There

My CSS list menu is coming on nicely, but I have one small issue in that the style for my menu options is using being applied all over the whole page i.e I have this as my link style for my menu and because its generalised, its being use throughout the page:

ul#navigation li a
{
display: block;
text-decoration: none;
padding: .25em;
}
a:link, a:visited { color: #609; }
a:hover, a:active { color: #93c; }
a:hover { background-color: #fff; }

obviously the 'ahref' styles are being applied to the whole page instead of just the list menu. Is there some way I can ensure the link styles are only applied to the list menu. If yes how do I reference it within the menu etc. I need all other links within the page to be black with a brown rollover as its a content managed website and I don't want users choosing different link styles. I hope this makes sense?

Many thanks in advance for your help

**all4nerds** · Mar 31, 2006 02:11

Hello

ul#navigation li a:link, ul#navigation li a:visited { color: #609; }
ul#navigation li a:hover, ul#navigation li a:active { color: #93c; }
ul#navigation li a:hover { background-color: #fff; }

**9greej10** · Mar 31, 2006 04:57

OK I see, would I then use the following code to style ALL other links on the page?

a:link{ color: #609; }
a:hover { color: #609; }
a:active { color: #93c; }
a:visited { color: #609; }

Many thanks again

**all4nerds** · Mar 31, 2006 05:01

Hello

yes / no
a:link{ color: #609; }
/*a:hover { color: #609; } no change on hover not needed */
a:active { color: #93c; }
/*a:visited { color: #609; } no change visited not needed */

**9greej10** · Mar 31, 2006 06:56

great!

thanks again for your help

**9greej10** · Apr 1, 2006 13:52

One last question on this, How do I change the style of the pop up menu i.e the color and alignment. This is what my menu looks like and I need to the change the style of the sub links (pop up menu) i.e links 5 & 6? How do I create the new style (within teh CSS sheet) and then reference it from links 5 & 6 as below?

<div class="menu">
<div id="menulist">
<ul id="menulist">
<li id="menulist"><a href="#">menu 1 >></a></li>
<li><a href="#">menu 2 >></a></li>
<li><a href="#">menu 3 >></a></li>
<li> <a href="#">menu 4 >></a>
<ul>
<li><a href="#">menu 5</a></li>
<li><a href="#">menu 6</a></li>
</ul>
</li>
<li><a href="#">menu 7 >></a></li>

</ul>
</div>
</div>

Many thanks in advance for your help

**all4nerds** · Apr 1, 2006 14:14

Hello

you can have only one id="menulist" not 3

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	#menulist li a{color:#ff0000;}
	#menulist li ul li a{color:#009900;}
	#menulist li a:hover{color:#0000ff; } 
	#menulist li ul li a:hover{color:#ffff00;}
	</style>
</head>
<body>
<div class="menu"> 
<div id="menulistx"> 
<ul id="menulist">
<li id="menulistxx"><a href="#">menu 1 ></a></li>
<li><a href="#">menu 2 >></a></li>
<li><a href="#">menu 3 >></a></li>
<li><a href="#">menu 4 >></a> 
<ul>
<li><a href="#">menu 5</a></li>
<li><a href="#">menu 6</a></li>
</ul>
</li>
<li><a href="#">menu 7 >></a></li>

</ul>
</div>
</div>

</body>
</html>

**9greej10** · Apr 2, 2006 12:32

OK, that works now! I can change the colour etc...thanks!

I'm not sure whether you know the answer to this query as well, but I would like to place a 1px border around each of the links (each row in pop up mnu). I know to add a border, I would do the following:

border-bottom: 1px solid #24170c;
border-top: 1px solid #24170c;
border-left: 1px solid #24170c;
border-right: 1px solid #24170c;

However when the menu appears the bottom border seems to double up and seems to become 2px high. I think the rows float next to each other (vertically), which is the reason why it looks as though the bottom border is 2px in height. Is there any way I can make the border 1px all around? Maybe I could overlap the bottom border with the link below it, so that it would look like the border gap was 1px high- although I'm not sure if this is possible or even if its feasible? -any thoughts on how I might solve this issue?

many thanks again for all your help, it is much appreciated!

**all4nerds** · Apr 2, 2006 12:35

Hello

border:1px solid #24170c;border-bottom:none;

on last element
.x{border-bottom: 1px solid #24170c;}

**9greej10** · Apr 2, 2006 14:55

great! where do I place the following code:

on last element
.x{border-bottom: 1px solid #24170c;}

within my CSS as it doesn't seem to be working at the moment. Do I need to change the value .x to something related to my document?

many thanks

**all4nerds** · Apr 2, 2006 15:07

Hello

give the class the proper power to cascade the border none
#menulist .x{border-bottom: 1px solid #24170c;}

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	#menulist li a{color:#ff0000;border:1px solid #24170c;border-bottom:none;text-decoration:none;display:block;width:100px;}
	#menulist li ul li a{color:#009900;}
	#menulist li a:hover{color:#0000ff; } 
	#menulist li ul li a:hover{color:#ffff00;}
	
	#menulist .x{border-bottom: 1px solid #24170c;}
	</style>
</head>
<body>
<div class="menu"> 
<div id="menulistx"> 
<ul id="menulist">
<li id="menulistxx"><a href="#">menu 1 ></a></li>
<li><a href="#">menu 2 >></a></li>
<li><a href="#">menu 3 >></a></li>
<li><a href="#">menu 4 >></a> 
<ul>
<li><a href="#">menu 5</a></li>
<li><a href="#">menu 6</a></li>
</ul>
</li>
<li><a href="#" class="x">menu 7 >></a></li>

</ul>
</div>
</div>

</body>
</html>

User Tag List

Thread: Menu CSS link style overwrites page level links style..

Thread Tools

Display

Menu CSS link style overwrites page level links style..

changing the style of the sub pop up menus

Bookmarks

Bookmarks

Posting Permissions