一个网页菜单的CSS代码分析

一个绿色网页菜单，效果如下，网上可下载到该资源；

下面研究其css代码；这是一个比较复杂的菜单；可学到很多东西；

/* menu::base */
div#menu {height: 46px;padding-left: 10px;background: url(images/left.png) no-repeat;_background-image: url(images/left.gif);width:auto;
}div#menu ul {margin: 0;padding: 0;list-style: none;float: left;
}
div#menu ul.menu {padding-right: 10px;background: url(images/right.png) no-repeat right 0;_background-image: url(images/right.gif);
}div#menu li {position: relative;margin: 0;padding: 0 0 0 0;display: block;float: left;z-index: 9;width: auto;
}
div#menu ul ul li {z-index: 9;
}
div#menu li div {list-style: none;float: left;position: absolute;z-index: 11;top: 36px;left: 0;visibility: hidden;width: 187px;padding: 0 0 11px 7px;background: url(images/submenu-bottom.png) no-repeat 7px bottom;_background-image: url(images/submenu-bottom.gif);margin: 0px 0 0 -4px;
}
div#menu li:hover>div {visibility: visible;
}div#menu a {position: relative;z-index: 10;height: 41px;display: block;float: left;line-height: 41px;text-decoration: none;margin-top: 1px;white-space: nowrap;width: auto;padding-right: 5px;text-align: center;
}
div#menu span {display: block;cursor: pointer;background-repeat: no-repeat;background-position: 95% 0;text-align: center;
}/* menu::level1 */
div#menu a {padding: 0 30px 0 0;line-height: 40px;height: 46px;margin-right: 5px;_margin-right: 1px;background: none;
}
div#menu span {margin-top: 2px;padding-left: 30px;color: #fff;font: bold 11px Trebuchet MS,Arial,san-serif;background: none;line-height: 40px;
}
div#menu a:hover,
div#menu a.over {background:  url(images/selected-right-sub.png)  no-repeat right -1px;_background-image: url(images/selected-right-sub.gif);
}
div#menu a:hover span,
div#menu a.over span {background: url(images/selected-left-sub.png) no-repeat 0 -3px;_background-image: url(images/selected-left-sub.gif);
}
div#menu li.current a,
div#menu ul.menu>li:hover>a {background: url(images/selected-right-sub.png) no-repeat right -1px;_background-image: url(images/selected-right-sub.gif);
}
div#menu li.current a span,
div#menu ul.menu>li:hover>a span {background: url(images/selected-left-sub.png) no-repeat 0 -3px;_background-image: url(images/selected-left-sub.gif);
}
div#menu ul.menu>li:hover>a span {color: #3d4e29;
}
div#menu li {  }
div#menu li.last { background: none; }div#menu li.current a,
div#menu li.current a span,
div#menu.js-active a:hover,
div#menu.js-active a:hover span,
div#menu.js-active a,
div#menu.js-active span {background:none;
}
div#menu.js-active ul.menu>li:hover>a,
div#menu.js-active ul.menu>li:hover>a span {background:none;
}
div#menu li.current a.over {background: url(images/selected-right-sub.png)  no-repeat right -1px;_background-image: url(images/selected-right-sub.gif);
}
div#menu li.current a.over span {background: url(images/selected-left-sub.png) no-repeat 0 -3px;_background-image: url(images/selected-left-sub.gif);
}
div#menu a.over span {color: #3d4e29;
}/* menu::level2 */
div#menu ul ul li {background: none;padding: 0;
}
div#menu ul ul {padding-top: 10px;
}
div#menu ul ul a {padding: 0;height: auto;float: none;display: block;line-height: 26px;font-size: 11px;color: #d8ebc5;z-index: -1;padding-left: 5px;white-space: normal;width: 160px;margin: 0 5px;text-transform: none;
}div#menu ul ul a span {padding: 0 15px;line-height: 26px;font-size: 11px;
}
div#menu li.current ul a,
div#menu li.current ul a span {background:none;
}
div#menu ul ul a:hover {background: url(images/submenu-selected-bottom.png) no-repeat 5px bottom;
}
div#menu ul ul a:hover span {background: url(images/submenu-selected-top.png) no-repeat 0 0;
}
div#menu ul ul a.parent {background: url(images/submenu-pointer-bottom.gif) no-repeat 5px bottom;
}
div#menu ul ul a.parent span {background: url(images/submenu-pointer-top.png) no-repeat 0 0;
}
div#menu ul ul a.parent:hover {background: url(images/submenu-pointer-selected-bottom.png) no-repeat 5px bottom;
}
div#menu ul ul a.parent:hover span {background: url(images/submenu-selected-top.png) no-repeat 0 0;
}
div#menu ul ul span {margin-top: 0;text-align: left;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {width: 100%;
}/* menu::level3 */
div#menu ul ul div {width: 180px;padding: 15px 0px 8px 0px;margin: -44px 0 0 169px !important;background: url(images/subsubmenu-top.png) no-repeat 0px 0;_background-image: url(images/subsubmenu-top.gif);
}
*+html div#menu ul ul div { height:10px }
*+html div#menu.ie7 ul ul div { height:auto }
div#menu ul ul ul {padding: 0 4px 5px 1px;background: url(images/submenu-bottom.png) no-repeat 0px bottom;_background-image: url(images/submenu-bottom.gif);
}
div#menu ul ul div li {position:relative;top:-5px;
}/* lava lamp */
div#menu li.back {background: url(images/lavalamp-left.png) no-repeat 0 0;_background-image: url(images/lavalamp-left.gif);width: 10px;height: 46px;z-index: 8;position: absolute;padding: 0;margin: 0;
}div#menu li.back .left {padding:0;width:auto;background: url(images/lavalamp-right.png) no-repeat right 0;_background-image: url(images/lavalamp-right.gif);height: 46px;margin: 0 5px 0 10px;_margin-right: 2px;float: none;position: relative;top: 0;left: 0;visibility: visible;
}

定义id为menu的div的样式
定义id为menu的div中的ul的样式
定义id为menu的div中的，使用“menu”为css类的ul的样式
定义id为menu的div中的li的样式
定义id为menu的div中的ul中的ul中的li的样式
定义id为menu的div中的li中的div的样式
定义id为menu的div中的li当鼠标悬停时li下的div的样式
定义id为menu的div中的a的样式
定义id为menu的div中的span的样式
定义id为menu的div中的a的样式
定义id为menu的div中的span的样式
定义id为menu的div中的a当鼠标悬停时的样式, a下的over css类的样式
定义id为menu的div中的a当鼠标悬停时中的span的样式，a下的over css类中的span的样式
定义id为menu的div中的li下的current css类中的a的样式，
定义id为menu的div中的ul下的menu css类下的li，li当鼠标悬停时下的a的样式
定义id为menu的div中的li下的current css类中的a中的span的样式
定义id为menu的div中的ul下的menu css类下的li当鼠标悬停时下的a中的span的样式

定义id为menu的div中的ul下的menu css类下的li当鼠标悬停时下的a中的span的样式
定义id为menu的div中的li的样式
定义id为menu的div中的li下的last css类的样式

定义id为menu的div中的li下的current css类中的a,
定义id为menu的div中的li下的current css类中的a中的span,
定义id为menu的div下的js-active css类中的a当鼠标悬停时，
定义id为menu的div下的js-active css类中的a当鼠标悬停时中的span，
定义id为menu的div下的js-active css类中的a,
定义id为menu的div下的js-active css类中的a中的span的样式；

定义id为menu的div下的js-active css类中的ul下li鼠标悬停时下的a,
定义id为menu的div下的js-active css类中的ul下li鼠标悬停时下的a中的span的样式

定义id为menu的div下的li下的current css类中的a下的over类的样式
定义id为menu的div下的li下的current css类中的a下的over类的中的span的样式
定义id为menu的div中的a下的over类中的span的样式

/* menu::level2 */
定义id为menu的div中的ul中的ul中的li的样式
定义id为menu的div中的ul中的ul的样式
定义id为menu的div中的ul中的ul的a的样式
定义id为menu的div中的ul中的ul的a中的span的样式
定义id为menu的div中的li下的current类中的ul中的a,
定义id为menu的div中的li下的current类中的ul中的a中的span的样式
...
...
定义a中的parent类
...
...
...
...
ul中的ul中的li下的last类

/* menu::level3 */

/* lava lamp */
定义id为menu的div中的li中的back类
定义id为menu的div中的li下的back类中的left类

使用了甚多的css选择器和伪类等；

一个网页菜单的CSS代码分析相关推荐

控制元素显示和隐藏的方式及区别、内容溢出处理(区域滚动)、透明性、字体图标、常见字体、自定义字体设计、网站图标、CSS代码分析
元素的显示与隐藏: 常见控制元素的显示和隐藏的属性有display.visibility.overflow,需要清楚的理解三者之间的区别. display显示: 当值为none时为销毁对象,不保留原位 ...
php简单网页制作代码,用HTML和CSS以及JS制作简单的网页菜单界面的代码
这篇文章主要介绍了使用HTML+CSS+JS制作简单的网页菜单界面,这个ABROAD项目所使用的JavaScript部分代码非常简单,需要的朋友可以参考下写ABROAD项目用到了标签这个东东,其实标 ...
js怎么制作html的主题,用HTML和CSS以及JS制作简单的网页菜单界面的代码
写ABROAD项目用到了标签这个东东,其实标签在WEB上到处可见,图中就依次显示了DCC文章发布器.ABROAD后台添加数据.百度图片搜索.sf发布博客文章时贴标签的样式--标签就像浏览器里原生的ch ...
网页中的css代码是写在哪的,网页里面的空格的代码怎么写
空格字符由&+n+b+s+p+;组成字符,后面的分号记住不能少了.这组空格字符一定输入到HTML代码里,才能实现空格效果. 如果有多个空格我们就复制粘贴输入多次" "即可. ...
html document.location转到另一个网页,常用跳转代码打开网页转到其他网址
打开立马跳转其他收藏记录收集了几种比较经典.比较全的跳转代码和加载代码,做自己个人网站的时候经常用到,下面分享给大家: window.location.href='http://www.webuc ...
WinCE 开始菜单StartMenu_Create()函数代码分析
//================================================================================================== ...
html网页左侧背景,CSS设置html网页背景图片 CSS设置网页背景颜色
CSS设置网页背景图片 CSS设置网页背景颜色技术教程篇本篇DIVCSS5以布局思想介绍使用CSS设置实现网页背景技巧为主,希望对DIV CSS爱好者有帮助.通常对网页设置背景直接对body设置背景 ...
CSS设置html网页背景图片 CSS设置网页背景颜色
http://www.divcss5.com/jiqiao/j768.shtml CSS设置网页背景图片 CSS设置网页背景颜色技术教程篇本篇DIVCSS5以布局思想介绍使用CSS设置实现网页背景技 ...
Python代码分析工具：PyChecker、Pylint
1 概述 PyChecker是Python代码的静态分析工具,它能够帮助查找Python代码的bug,而且能够对代码的复杂度和格式等提出警告. PyChecker可以工作在多种方式之下.首先,PyCh ...

一个网页菜单的CSS代码分析

一个网页菜单的CSS代码分析相关推荐

最新文章

热门文章