Using CSS: Hover to make a menu, one thing to note is that when designing a menu, you first design a level menu (using Position:relative;), use the same style, level two menu div{display:none; Redesign the two-level menu Div after the UL position (using Position:absolute;).
| The code is as follows |
Copy Code |
| <! DOCTYPE html>
<meta charset= "utf-8″>
<title> level three menu production </title>
<style>
* {padding:0;margin:0;}
Body {background: #eee; font-size:14px;}
A {padding:10px 15px;text-decoration:none;color: #fff; background: #008aff;}
. menu {height:30px;line-height:30px;}
. menu Li {float:left;list-style:none;padding:0 15px;}
. menu Li a:hover {color:red; background: #6dd1da;}
. Sub_menu {Position:relative}
. sub_menu li {float:none;padding:0}
. Sub_menu Li a {display:block;height:10px;line-height:10px;text-align:center;border-bottom:1px solid #eee;}
. Sub_menu {Display:none}
. Menu Li:hover. Sub_menu{display:block}
. sub_menu2 {Display:none}
. sub_menu21 {position:absolute;top:0px;left:71px}
. sub_menu22 {position:absolute;top:31px;left:71px}
. Sub_menu23 {position:absolute;top:62px;left:71px}
. sub_menu24 {position:absolute;top:93px;left:71px}
. Menu Li:hover. Sub_menu li:hover. sub_menu2 {display:block;}
</style>
<body>
<div class= "contain" >
<ul class= "Menu" >
<li><a href= "javascript:;" > Menu One </a>
<div>
<ul class= "Sub_menu" >
<li><a href= "javascript:;" >111111</a>
<div class= "sub_menu2″>
<ul class= "sub_menu21″>
<li><a href= "javascript:;" >111111</a></li>
<li><a href= "javascript:;" >222</a></li>
<li><a href= "javascript:;" >333</a></li>
<li><a href= "javascript:;" >444</a></li>
</ul>
</div>
</li>
<li><a href= "javascript:;" >222</a>
<div class= "sub_menu2″>
<ul class= "sub_menu22″>
<li><a href= "javascript:;" >111111</a></li>
<li><a href= "javascript:;" >222</a></li>
<li><a href= "javascript:;" >333</a></li>
<li><a href= "javascript:;" >444</a></li>
</ul>
</div>
</li>
<li><a href= "javascript:;" >333</a>
<div class= "sub_menu2″>
<ul class= "sub_menu23″>
<li><a href= "javascript:;" >111111</a></li>
<li><a href= "javascript:;" >222</a></li>
<li><a href= "javascript:;" >333</a></li>
<li><a href= "javascript:;" >444</a></li>
</ul>
</div>
</li>
<li><a href= "javascript:;" >444</a>
<div class= "sub_menu2″>
<ul class= "sub_menu24″>
<li><a href= "javascript:;" >111111</a></li>
<li><a href= "javascript:;" >222</a></li>
<li><a href= "javascript:;" >333</a></li>
<li><a href= "javascript:;" >444</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li><a href= "javascript:;" > Menu Two </a>
</li>
<li><a href= "javascript:;" > Menu Three </a>
</li>
<li><a href= "javascript:;" > Menu Four </a>
</li>
</ul>
</div>
</body>
|
