CSS - hover question

I was wondering how can I keep my main parent c开发者_开发问答ategory highlighted as when hovered on when viewing the main parents sub categories using CSS?

A quick example or tutorial will help thanks.

Your CSS would look something kind of like this:

.highlighted, a:hover {
   /* styles for when the category is hovered or highlighted */
}

Then when viewing the subcategories you need to add the "highlighted" CSS class to the element that represents the parent category. How exactly you do this depends on how your website works, but it could be done with javascript or with server-side code.

EDIT 1: Yes, this can be done with just CSS, but it probably requires a lot of manual labor. If your website is just a bunch of static HTML files you could go in and edit each of them to highlight the parent class. For example, on the page entitled "Sedans" (a subcategory of cars) you could change

<div class="category">Cars</div>

to

<div class="category highlighted">Cars</div>

There should be nothing surprising or special about that to you.

You can use the code from CSS play 1 or CSS play 2 for this.

Each of examples meets your needs. Main idea is to use pseudo-class for the base class:

#menu li a:hover {border:0; text-decoration:underline;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:15px;}
#menu li:hover dt a, #menu li a:hover dt a, #menu dd a:hover {color:#c00;}

http://jsfiddle.net/axCPq/

CSS:

.main-parent:hover a.parent { color: green; }
.child-ul a:hover { color: green; }

HTML:

  <ul class="main-parent">
      <li><a class="parent" href="#">Link Parent</a>
         <ul class="child-ul">
            <li><a href="#">Link Child</a></li>
            <li><a href="#">Link Child</a></li>
            <li><a href="#">Link Child</a></li>
            <li><a href="#">Link Child</a></li>
            <li><a href="#">Link Child</a></li>
            <li><a href="#">Link Child</a></li>
         </ul>
      </li>
  </ul>