昔人已老 2012-12-02
主要用的知识是css中的hover伪类,当鼠标放停在父导航栏上的li元素时候,我们就修改子菜单下面的ul的display属性,这样就可以实现hover的效果了。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Drop Down Navigation with CSS Only</title> <style> body, div, ul, li { margin: 0; padding: 0; } #header { min-width: 800px; height: 150px; } #nav { width: 100%; background-color: green; float: left; } #nav li { list-style: none; float: left; width: 120px; height: 30px; line-height: 30px; text-align: center; } #nav li a { color: white; text-decoration: none; display: block; } #nav li a:hover { background-color: #066; } #nav li ul { position: absolute; display: none; } #nav li:hover ul { display: block; } #nav li ul li { float: none; display: inline; } #nav li ul li a { width: 118px; position: relative; border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; background: green; color: #fff; } #nav li ul li a:hover { background: #066; color: #000; } </style> <!--[if lte IE 6]> <style> body {behavior: url("csshover3.htc");} </style> <![endif]--> </head> <body id="about"> <div id="header"> <ul id="nav"> <li class="home"><a href="#">Home</a></li> <li class="tutorials"><a href="#">Tutorials</a> <ul> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> </ul> </li> </ul><!-- nav --> </div><!-- header --> </body> </html>
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT