Highlighted Menu in CSS

June 17, 2008 · Print This Article

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.


Your choice for site templates and wordpress themes

Comments

Got something to say?

You must be logged in to post a comment.