纯css框架_纯CSS触碰式下拉菜单

更新时间：2016-04-07 来源：css3教程手机版 字体：大中小

【www.bbyears.com--css3教程】

提示：您可以先修改部分代码再运行

纯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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>纯CSS触碰式下拉菜单</title> 
<style type="text/css"> 
/* 整体设置*/ 
.navigation { 
 margin:0; 
 padding:0; 
 width:610px; 
 list-style-type:none; 
 font:12px Arial; 
 } 
.navigation li { 
 float:left; 
 padding:0; 
 margin:0 10px 0 0; 
 _margin:0 2px 0 0; 
 width:150px; 
 } 
/* 设置选单区块*/ 
.navigation li dl { 
 width:150px;/*ie6*/ 
 margin:0; 
 padding:0; 
 background-color:#fff; 
 border:solid 2px #666; 
 } 
.navigation li dt a , .navigation li dd a{ display:block;} 
/* 设置主选单dt */ 
.navigation li dt { 
 margin:0; 
 padding: 5px; 
 text-align:center; 
 background-color:#fff; 
 font-size: 12px; 
 font-weight: bold; 
 height:15px; 
 overflow:hidden; 
 } 
.navigation li dt a ,.navigation li dt a:visited { 
 display:block; 
 color:#333; 
 text-decoration:none; 
 } 
/* 设置子选单dd */ 
.navigation li dd { 
 margin:0; 
 padding:0; 
 color: #333; 
 background-color:#efefef; 
 border-bottom:dotted 1px #666; 
 } 
.navigation li dd.last { 
 border-bottom:0; 
 } 
.navigation li dd a, .navigation li dd a:visited { 
 display:block; 
 color:#333; 
 text-decoration:none; 
 padding:4px 5px 4px 20px; 
 } 
/*隐藏子选单*/ 
.navigation li dd { display:none;} 
/* 滑鼠滑入显示子选单 */ 
.navigation li:hover dd, .navigation li a:hover dd { display:block;} 
/*ie6 hack*/ 
.navigation li:hover,.navigation li a:hover { border:0;} 
.navigation table { border-collapse:collapse; 
 padding:0; 
 text-align:left; 
 } 
</style> 
</head> 
<body> 
<ul class="navigation"> 
 
  
 <dl> 
 破洛洛教学网 
 网页设计 
 PS教程 
 平面设计 
 <dd class="last">破洛洛 
 </dl> 
  
 
 
  
 <dl> 
 <a href="http://www.bbyears.com/clist-159-1.html" target="_blank" class="keylink">Photoshop</a> 
 疑难杂症 
 <dd class="last">实用范例 
 </dl> 
 
  
 
  
 <dl> 
 css 
 实用案例 
 <dd class="last">辅助工具 
 </dl>

转载请注明:破洛洛 更多代码：中国WEB第一站 http://www.111cn.net 
</body> 
</html>

提示：您可以先修改部分代码再运行

本文来源：http://www.bbyears.com/css/22983.html

链接：http://www.bbyears.com/css/22983.html
纯css框架_纯CSS触碰式下拉菜单(转载时请注明本文出处及链接)

猜你感兴趣

【元旦贺卡图片素材】元旦贺卡-2010 元旦新年快乐flash贺卡 2016-04-07
元旦快乐dj|元旦快乐动画flash电子祝福贺卡 2016-04-07
ajax提交form表单|ajax +php 二级联动菜单代码 2016-04-07
元旦贺卡图片素材_元旦贺卡-happy new years 元旦节快乐朋友 2016-04-07
[2010office密钥]2010 元旦快乐贺卡下载 2016-04-07
[12个小时吗]12个小时弹出一次退弹效果代码 2016-04-07
【json】js 可增加删除图片上传框js代码 2016-04-07
机房空调|香港机房与国际接轨吸引内地企业火热选购 2016-04-07
【快乐的元旦节300字】2010庆祝元旦节快乐flash动画祝福贺卡 2016-04-07
百度谷歌关键词排名查询_百度、谷歌关键词排名在线查询 2016-04-07

本类排行

本类最新

更多>>

纯css框架_纯CSS触碰式下拉菜单

猜你感兴趣

热门标签

本类排行

本类最新