CSS文本
CSS背景
CSS颜色
CSS前景色
CSS语法 -- 最基本的
CSS入门例子
使用CSS的好处
什么是CSS?
A Definition List drop-down menu four
作者：佚名 教程来源：本站原创 点击数： 更新时间：2007-12-24
Information
Ok, maybe one last version of a drop down definition list that has the dropdown wider than the top level which allows the links to be on one line. This also retains the hover state on the top level links.
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:40px 0 200px 15px; padding:0;}
#menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:1px; z-index:100;}
#menu li a, #menu li a:visited {text-decoration:none;}
#menu dl {position:absolute; top:0; left:0; width: 150px; margin: 0; padding: 0; background: transparent url(transparency.gif);}
#menu dt {background: #b2ab9b; margin:0;font-size: 1.1em; border-bottom:1px solid #fff; width:150px; float:left;}
#menu dd {display:none; background: transparent; border-bottom:1px solid #cce; clear:left; margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;}
#menu dt a, #menu dt a:visited {display:block; color:#ff8; padding: 5px 5px 5px 20px; width:125px;}
#menu dd a, #menu dd a:visited {background:#b2ab9b; color:#ff8; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:276px;}
#menu li a:hover {border:0;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {width:301px; border-bottom:15px solid #e2dfa8;}
#menu li:hover dt a, #menu li a:hover dt a, #menu dd a:hover {background: #e2dfa8; color:#534;}
精彩视频
最新教程
最新热门