CSS Drop-down Menu
Use CSS to create an effect that displays a drop-down menu when the mouse is moved up.
<html> <meta charset="utf-8"> <head> <style> nav { margin: 100px auto; text-align: center; } nav ul ul { display: none; } nav ul li:hover > ul { display: block; } nav ul { background: #efefef; background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); box-shadow: 0px 0px 9px rgba(0,0,0,0.15); padding: 0 20px; border-radius: 10px; list-style: none; position: relative; display: inline-table; } nav ul:after { content: ""; clear: both; display: block; } nav ul li { float: left; } nav ul li:hover { background: #4b545f; background: linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); } nav ul li:hover a { color: #fff; } nav ul li a { display: block; padding: 25px 40px; color: #757575; text-decoration: none; } nav ul ul { background: #5f6975; border-radius: 0px; padding: 0; position: absolute; top: 100%; } nav ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative; } nav ul ul li a { padding: 15px 40px; color: #fff; } nav ul ul li a:hover { background: #4b545f; } nav ul ul ul { position: absolute; left: 100%; top:0; } </style> </head> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Web Design</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul> </li> </ul> </li> <li><a href="#">Articles</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">User Experience</a></li> </ul> </li> <li><a href="#">Inspiration</a></li> </ul> </nav> </html>
Example 2:
<html> <head> <meta charset="utf-8"> <style> ul,ol,li {list-style:none;padding:0px;margin:0px;} #menu * {line-height:30px;z-index:10;} #menu a { text-decoration:none; display:block; } #menu ul { text-align:left; background:#333; } #menu .arrow /* 菜单项的右侧小箭头 */ { float:right; padding-right:5px; } #menu li:hover>ul {display:block;} #menu>ul{height:30px;} /* 即使没有菜单项也能保持顶级菜单栏的高度。 */ /* 一级菜单 */ #menu>ul>li { text-align:center; display:inline-block; width:80px; } #menu>ul>li>a {color:#fff;} #menu>ul>li:hover {background:#666;} /* 下拉的菜单栏 */ #menu>ul>li ul { display:none; width:150px; position:absolute; background:#c1cd94; box-shadow:2px 2px 2px #000; -webkit-box-shadow:2px 2px 2px #000; -moz-box-shadow:2px 2px 2px #123; } /* 下拉菜单的菜单项 */ #menu>ul>li>ul li {padding-left:5px; position:relative;} #menu>ul>li>ul li>a {color:#000;} #menu>ul>li>ul li:hover {background:#d3dbb3;} /* 三级及以下的菜单项的定位 */ #menu>ul>li>ul>li ul {left:150px; top:0px;} </style> </head> <body> <div id="menu"> <ul> <li><a href="">菜单一</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单2</a> <ul><li><a href="">子菜单7</a></li></ul> </li> <li><a href="">子菜单3</a></li> </ul> </li> <li><a href="">菜单二</a> <ul> <li><a href="">子菜单4</a></li> <li><a href="">子菜单5</a></li> <li><a href="">子菜单6</a></li> </ul> </li> </ul> </div> </body> </html>