close
http://www.cssterm.com/css-menus/horizontal-css-menu/css-menu-two-line
HTML
<!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>
/* 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; }
全站熱搜
留言列表