纯CSS写的下拉菜单详解编程语言

 

效果图，如上图所示 

 !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 

 title /title 

 style type="text/css" 

#menu 

margin-left:auto; 

margin-right:auto; 

width:1000px; 

ul { 

margin: 0px; 

padding: 0px; 

height:30px; 

ul li { 

float: left; 

display: inline; 

font: 0.9em Arial, Helvetica, sans-serif; 

height: 30px; 

width: 100px; 

list-style: none; 

ul li a { 

color: #F4F4F4; 

text-decoration: none; 

text-align:center; 

line-height: 29px; 

width: 91px; 

margin: 0px; 

padding: 0px 0px 0px 8px; 

display: block; 

border-right: solid 1px #ccc; 

border-bottom:solid 1px #ccc; 

background: #808080; 

ul li ul li { height:25px; } 

ul li ul li a { 

background: #666; 

line-height:24px; 

ul li a:hover { background: #666; } 

ul li ul { visibility: hidden; } 

ul li:hover ul { visibility: visible; } 

ul li ul li a:hover { background: #333; } 

 /style 

 /head 

 body 

 div id="menu" 

 li a href="#" 菜单一 /a /li 

 li a href="#" 菜单二 /a 

 li a href="#" 子菜单一 /a /li 

 li a href="#" 子菜单二 /a /li 

 li a href="#" 子菜单三 /a /li 

 /ul 

 /li 

 li a href="#" 菜单三 /a /li 

 li a href="#" 菜单四 /a 

 li a href="#" 子菜单一 /a /li 

 li a href="#" 子菜单二 /a /li 

 li a href="#" 子菜单三 /a /li 

 /ul 

 /li 

 li a href="#" 菜单五 /a /li 

 /ul 

 /div 

 /body 

 /html 

原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/11124.html