CSS Menu two lines




A simple, cross browser compatible horizontal Two lines CSS menu, no javascript.css menu download

Menu features:

  • list based;
  • only one image used;
  • no javascript required;
  • easy to customize;
  • easy to implement;
  • cross-browser compliant;
  • light-weight 2,55 KB.
Demo:

HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="menu.css" />
<title>CSS Menu Two Lines</title>
</head>
<body>
<div class="css_menu_two_line">
<ul class="two_line_menu">
    <li><a href="#">Menu 1</a>
        <ul>
            <li><a href="#">Submenu 1-1</a></li>
            <li><a href="#">Submenu 1-2</a></li>
            <li><a href="#">Submenu 1-3</a></li>
            <li><a href="#">Submenu 1-4</a></li>
        </ul>
    </li><li><a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Submenu 2-1</a></li>
            <li><a href="#">Submenu 2-2</a></li>
            <li><a href="#">Submenu 2-3</a></li>
        </ul>
    </li><li><a href="#">Menu 3</a>
        <ul>
            <li><a href="#">Submenu 3-1</a></li>
            <li><a href="#">Submenu 3-2</a></li>
            <li><a href="#">Submenu 3-3</a></li>
            <li><a href="#">Submenu 3-4</a></li>
            <li><a href="#">Submenu 3-5</a></li>
        </ul>
    </li><li><a href="#">Menu 4</a>
        <ul>
            <li><a href="#">Submenu 4-1</a></li>
            <li><a href="#">Submenu 4-2</a></li>
            <li><a href="#">Submenu 4-3</a></li>
            <li><a href="#">Submenu 4-4</a></li>
        </ul>
    </li><li><a href="#">Menu 5</a>
        <ul>
            <li><a href="#">Submenu 5-1</a></li>
            <li><a href="#">Submenu 5-2</a></li>
            <li><a href="#">Submenu 5-3</a></li>
        </ul>
</body> 
</html>
CSS code:
/* CSSTerm.com CSS Horizontal menu with images */

.css_menu_two_line {
	width:100%;
	overflow:hidden;
}

.two_line_menu {
    position: relative;
    margin-bottom: 40px;
    background:#77f url('img_bg.gif') repeat-x;
}

.two_line_menu a {
    display: block;
    color: #000;
    text-decoration: none;
    padding:10px;
}

.two_line_menu li:hover a {
    color: #fff;
    background: #aaf;
}

.two_line_menu li { display: inline-block; }

.two_line_menu li ul { display: none; }

.two_line_menu li:hover ul {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    background: #aaf;
    top: 38px;
}

.two_line_menu li ul li:hover a { color: #000; }