General Community > HTML/CSS

CSS - different color/style links on the same page

(1/2) > >>

dschwab9:
Not really SMF related, but Can someone help me out with a CSS issue here?

I'm building a 2 level menu system in which I need the sub-menu to be a differenc color, size and weight. (it's at http://dev.kingwoodresort.com/site/index.php )

This is the CSS I'm trying to use:


--- Code: ---.menu1
{
  font-family: "Times New Roman", serif;
  color: #000000;
  background-color: transparent;
  margin-left: 5px;
}

.menu1:link
{
  font-weight: bold;
  color: #475C21;
  background-color: transparent;
  text-decoration: none;
  margin-left: 5px;
}

.menu1:visited
{
  font-weight: bold;
  color: #475C21;
  background-color: transparent;
  text-decoration: none;
  margin-left: 5px;
}

.menu1:hover
{
  font-weight: bold;
  color: #cc3333;
  background-color: transparent;
  text-decoration: none;
  margin-left: 5px;
}

.menu2
{
  font-size: 12px;
  color: #000000;
  background-color: transparent;
  text-decoration: none;
  margin-left: 15px;
}

.menu2:link
{
  font-size: 12px;
  color: #cc3333;
  background-color: transparent;
  text-decoration: none;
  margin-left: 10px;

}

.menu2:visited
{
  font-size: 12px;
  color: #cc3333;
  background-color: transparent;
  text-decoration: none;
  margin-left: 15px;

}

.menu2:hover
{
  font-size: 12px;
  color: #cc3333;
  background-color: transparent;
  text-decoration: none;
  margin-left: 15px;

}

--- End code ---

Then my menu is using:


--- Code: ---<div class="menu1"> MENU LEVEL 1 </div>
<div class="menu2"> MENU LEVEL 2 </div>
--- End code ---

The 1st level works fine, but I'm having problems with the second one.  It shows up smaller and with the 15px left margin, but it doesn't change color or weight?

What am I doing wrong?

Tim:
try
a.class{
a.class:hover{

dschwab9:

--- Quote from: Tim on September 23, 2003, 03:02:58 AM ---try
a.class{
a.class:hover{

--- End quote ---

That didn't have any effect - still does the same thing  :(

Seph|roth:
maybe

a:link.class { }
a:visited.class { }
a:hover.class { }

tho i don't think that's the problem really...

Michele:
Add font-size: whatever to menu1, or remove the font-size from menu2. It's an inheritance issue that I can't quite explain, but that should fix it. :)


 

Navigation

[0] Message Index

[#] Next page