Highlighted Menu in CSS

Here is a quick and easy way to make menus with highlighted sub-links. Minimal code for maximum effect.

CSS Code

#css-target-menu { background: #000;

padding: 5px; width: 300px; }

#css-target-menu ul { font: 11px “Trebuchet MS”, Verdana, Arial;

list-style: none;margin: 0;

padding: 0;width: 300px; }

#css-target-menu li {background: #000;

padding: 2px; }#css-target-menu li:hover

{ background: #333; }#css-target-menu li ul

{ width: 224px; }#css-target-menu li ul li a

{ color: #999; }#css-target-menu li a

{ color: #cae001; text-decoration: none; 

outline: none; display: block; }#css-target-menu li#css-tutorials, #css-target-menu

li#html-tutorials {background: #000;

margin: 0;padding: 2px 6px; display: none; }

#css-target-menuli#css-tutorials:target,

#css-target-menuli#html-tutorials:target {

display: block; }

HTML Code

<div id="css-target-menu"><ul>
 <li><a href="#css-tutorials">CSS Tutorials</a>
</li><li id="css-tutorials">
<ul>
<li><a href=”#”>Advanced Concepts</a></li>

<li><a href=”#”>Box Model Theory</a></li>
<li><a href=”#”>Cross-Browser Development</a></li>

</ul>
</li>

<li><a href=”#html-tutorials”>(X)HTML Tutorials</a></li>
<li id=”html-tutorials”>

<ul>
<li><a href=”#”>Color Theory</a></li>

<li><a href=”#”>Document Structure</a></li>
<li><a href=”#”>Layouts</a></li>

</ul>
</li>

</ul>
</div>

As you can see the li ul will be activated when it’s target is active.
So any link to #sub-menu would activate li#sub-menu.
Simple CSS for an impressive menu display.