CSS Menu two lines
A simple, cross browser compatible horizontal Two lines CSS menu, no javascript.
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; }
Previous page: CSS Menu using one image
Next page: Vertical CSS Menu