.navmenu * { margin: 0; padding: 0; } .navmenu { border: #000 1px solid; height: 25px; } .navmenu li { /*水平菜单*/ float: left; list-style: none; position: relative; } .navmenu a { display: block; font-size: 12px; height: 24px; width: 100px; line-height: 24px; background-color: #CDEB8B; color: #0000ff; text-decoration: none; text-align: center; border-left: #36393D 1px inset; border-right: #36393D 1px inset; border-bottom: #36393D 1px inset; } /*单独设置一级菜单样式*/ .navmenu > ul > li > a { font-size: 11px; font-weight: bold; } .navmenu a:hover { background: #369; color: #fff; } /*新增的二级菜单部分*/ .navmenu ul ul { visibility: hidden; /*开始时是隐藏的*/ position: absolute; left: 0px; top: 24px; } .navmenu ul li:hover ul, .navmenu ul a:hover ul { visibility: visible; } .navmenu ul ul li { clear: both; /*垂直显示*/ text-align: left; } /*选中菜单项*/ .navmenu .selected { padding-left:15px; background-position-x:0px; background-image: url(./res/selected.gif); background-repeat: no-repeat; text-decoration:underline; }
定义CSS后的效果如下:
到此菜单控件已完成。已测试过可以在IE7,IE8,Chrome,Firefox中正常显示,在IE6显示可能会有问题,可以参考纯CSS多级菜单 进行修改,
本文的CSS显示部分参考了此文的介绍。
附上完整代码,如需要可自行下载修改 下载文件 (编辑:应用网_丽江站长网)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|