CSS Menus - CSS templates for websites

  • HTML: "UL LI" elements
  • Pure CSS. No Javascript.
  • The menu item that matches the current page URL need to be set as class="current"
  • Supported by all major browsers
    IE 6.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Netscape 7.0+

CSS Menu Templates



Souce Code

HTML Code         CSS         background image

Souce Code

HTML Code         CSS         bg.gif    bg2.gif

Souce Code

HTML Code         CSS

Souce Code

HTML Code         CSS         background image

Souce Code

HTML Code         CSS
<ul class="menu1">
    <li><a href="#1">CSS</a></li>
    <li><a href="#2" class="current">CSS Menus</a></li>
    <li><a href="#3">Menu</a></li>
    <li><a href="#4">Single Level</a></li>
    <li class="lastItem"><a href="#5">CSS Menu</a></li>
</ul>
<div class="menu2">
    <a href="#1">CSS</a>
    <a href="#2" class="current">CSS Menus</a>
    <a href="#3">Menu</a>
    <a href="#4">Single Level</a>
    <a href="#5">CSS Menu</a>
    <a class="dummy"> </a>
</div>
<div class="menu3">
    <a href="#1">CSS</a>
    <a href="#2" class="current">CSS Menus</a>
    <a href="#3">Menu</a>
    <a href="#4">Single Level</a>
    <a href="#5">CSS Menu</a>
</div>
<div class="menu3sub"> </div>
<div class="menu4">
    <a href="#1"><span>CSS</span></a>
    <a href="#2" class="current"><span>CSS Menus</span></a>
    <a href="#3"><span>Menu</span></a>
    <a href="#4"><span>Single Level</span></a>
    <a href="#5"><span>CSS Menu</span></a>
</div>
<div class="menu4sub"> </div>
<div class="menu5">
    <a href="#1">CSS</a>
    <a href="#2" class="current">CSS Menus</a>
    <a href="#3">Menu</a>
    <a href="#4">Single Level</a>
    <a href="#5">CSS Menu</a>
</div>

QUESTION & ANSWER
More ...

 

Your Name
Question Title
+ =  
Troubleshooting question? please read Troubleshooting Request before asking.