CSS文本
CSS背景
CSS颜色
CSS前景色
CSS语法 -- 最基本的
CSS入门例子
使用CSS的好处
什么是CSS?
A variable width drop-down definition list
作者：佚名 教程来源：本站原创 点击数： 更新时间：2007-12-24
Information
A drop down definition list that has variable width top level and sub level links. The sublevel has an opaque png background for non-IE6 browsers and a 'dithered gif' to give some effect of transparency for IE6.
Again it works in IE6, IE7, Opera 8.5, Opera 9, Firefox 2 etc. IE5.x will see the top level links only.
========================================
#menu {list-style-type:none; margin:0 0 100px 0; padding:0;}
#menu li {display:block; float:left; position:relative; z-index:100; margin-right:1px;}
#menu li span {display:block; z-index:100; padding: 5px 10px;font-size:1.1em;}
#menu li a, #menu li a:visited {display:block; padding:0; white-space:nowrap;}
#menu dl {position:absolute; top:0; left:0; margin: 0; padding: 0; background:transparent url(../opacity/opaque.png);}
* html #menu dl {background:transparent url(../opacity/opaque.gif);}
#menu dt {margin:0; font-size: 1.1em; float:left;}
#menu dd {display:none; background: transparent; clear:left; margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;}
#menu dt a, #menu dt a:visited {display:block; color:#000; padding: 5px 10px; text-decoration:none;}
#menu dd a, #menu dd a:visited {color:#000; text-decoration:none; display:block; padding: 5px 10px;}
#menu li a:hover {border:0; text-decoration:underline;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:15px;}
#menu li:hover dt a, #menu li a:hover dt a, #menu dd a:hover {color:#c00;}
精彩视频
最新教程
最新热门