纯CSS下拉导航代码

分享一款纯CSS完成的下拉导航代码，蓝色经典色调，非常大气，适合政府和企业类网站作为顶部的导航菜单，浏览器兼容性完成OK，有需要的朋友可以拿去。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD id=Head1><TITLE>纯CSS下拉菜单</TITLE><META http-equiv=Content-Type content="text/html; charset=utf-8"><style>* {    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px}UL {    LIST-STYLE-TYPE: none}LI {    LIST-STYLE-TYPE: none}DL {    LIST-STYLE-TYPE: none}DD {    LIST-STYLE-TYPE: none}DT {    LIST-STYLE-TYPE: none}A {    COLOR: #414141; TEXT-DECORATION: none}IMG {    DISPLAY: inline-block; FONT-SIZE: 12px; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none}A:hover {    COLOR: #c51007}#dangqian A {    COLOR: #c51007}.clear {    CLEAR: both}.warper {    MARGIN: 0px auto; WIDTH: 1000px}

.menu {    MARGIN-TOP: 3px; FONT-SIZE: 12px; BACKGROUND: url(/jscss/demoimg/201107/menu_02.gif) repeat-x; LINE-HEIGHT: 28px; HEIGHT: 28px}.menu_01 {    FLOAT: left}.menu_02 {    FLOAT: right}.menu A {    FONT-WEIGHT: bold; COLOR: #fff}.menu A:hover {    COLOR: #b8def6}.menu DL {    FLOAT: left}.menu DD {    FLOAT: left; WIDTH: 132px; TEXT-ALIGN: center}.menu DT {    PADDING-LEFT: 1px; BACKGROUND: url(/jscss/demoimg/201107/menu_04.gif) no-repeat left top; FLOAT: left; WIDTH: 122px; POSITION: relative; HEIGHT: 28px; TEXT-ALIGN: center}.menuli_div {    BACKGROUND: #0068aa; LEFT: 1px; PADDING-BOTTOM: 8px; WIDTH: 122px; POSITION: absolute; TOP: 28px}.menuli_div LI {    BACKGROUND: url(/jscss/demoimg/201107/menu_05.gif) no-repeat center bottom; PADDING-BOTTOM: 1px; LINE-HEIGHT: 24px; HEIGHT: 24px}.menu DT UL LI A {    FONT-WEIGHT: normal}.menuli .menuli_div {    DISPLAY: none}.menuli_hover .menuli_div {    DISPLAY: block}

</style><BODY onselectstart="return false"><DIV class=warper><DIV class=menu><DL><DD><A href="#" target=_self>首页</A></DD><DT class=menuli onMouseOver="this.className='menuli_hover'"   onmouseout="this.className='menuli'"><A href="#"   target=_self>关于家乡网</A><UL class=menuli_div><LI><A href="#">About</A></LI><LI><A href="#">家乡网</A></LI><LI><A href="#">中国网</A></LI><LI><A href="#">大武汉</A></LI></UL></DT><DT class=menuli onMouseOver="this.className='menuli_hover'"   onmouseout="this.className='menuli'"><A href="#"   target=_self>资讯动态</A><UL class=menuli_div><LI><A href="#">省内</A></LI><LI><A href="#">省外</A></LI></UL></DT><DT class=menuli onMouseOver="this.className='menuli_hover'"   onmouseout="this.className='menuli'"><A href="#" target=_self>组织机构</A><UL class=menuli_div><LI><A href="#">省委</A></LI><LI><A href="#">政府</A></LI><LI><A href="#">政协</A></LI></UL></DT><DT class=menuli onMouseOver="this.className='menuli_hover'"   onmouseout="this.className='menuli'"><A href="#" target=_self>主营业务</A><UL class=menuli_div><LI><A href="#">淘宝</A></LI><LI><A href="#">手机</A></LI><LI><A href="#">相机</A></LI><LI><A href="#">电脑</A></LI></UL></DT><DT class=menuli onMouseOver="this.className='menuli_hover'"   onmouseout="this.className='menuli'"><A href="#"   target=_self>品牌战略</A><UL class=menuli_div><LI><A href="#">一杯水</A></LI><LI><A href="#">城市生活</A></LI><LI><A href="#">家乡网</A></LI></UL></DT><DT class=menuli onMouseOver="this.className='menuli_hover'"   onmouseout="this.className='menuli'"><A href="#"   target=_self>人才招聘</A><UL class=menuli_div><LI><A href="#">我的家</A></LI><LI><A href="#">家乡网</A></LI></UL></DT><DT class=menuli onMouseOver="this.className='menuli_hover'"   onmouseout="this.className='menuli'"><A href="#" target=_self>联系我们</A><UL class=menuli_div><LI><A href="#">联系我</A></LI><LI><A href="#">联系她</A></LI><LI><A href="#">我的家</A></LI></UL></DT></DL></DIV></BODY></HTML>

posted on 2011-07-19 13:13 前端设计阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/webshow/archive/2011/07/19/2110458.html

纯CSS下拉导航代码相关推荐

自制纯css下拉导航
自己动手用纯css写了一个下拉导航,下面把代码呈上.主要用到了伪类,相对定位,绝对定位的知识. <doctype html> <html> <head> <m ...
html列表太多转为下滑菜单,利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单...
利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单以往文章里面讲了使用CSS的position属性定位结合display制作下拉弹出菜单,名为<纯CSS制作下拉导航菜单> ...
兼容FF,IE的纯CSS下拉菜单
代码简介:作者的CSS水平不错啊,值得我们学习,少了JS,就是好看多. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
html京东下拉菜单设置,div css下拉导航菜单（图+演示）
div css下拉导航菜单(图+演示),div css下拉导航菜单,css导航菜单下拉 CSS导航菜单(CSS下拉菜单演示图) 查看演示-CSS下拉菜单样式:下拉导航菜单/ 以下有DIV CSS下拉菜 ...
灰色简约三级CSS下拉菜单代码
代码简介: 又一款CSS Menu,银灰色下拉菜单,老外网站扒下来的,兼容性还不错.它最多可以支持三级,如果你的菜单项目很多,你可以自己扩展,一般都是成对出现的标签,分清楚就可以了. 代码内容: &l ...
纯css 下拉选择,纯CSS实现的下拉菜单
实现效果实现代码 html home wordpress themes plugins tutorials web design resources links tutorials html/css ...
用 :focus-within 实现纯 CSS 下拉框组件
:focus-within 伪类:当本节点或其子节点获得焦点时被激活. 借用 MDN 的例子 https://jsfiddle.net/d4w8h2ge/ 当点击表单中的文本框时需高亮整个表单元素.但 ...
js读取div从html中导入,在html中div+css布局的简单应用...-js+div+css下拉导航菜单完整代...-CSS文件的条件导入 - Gene Li_169IT.COM...
方案一: 在HTML文档中使用条件导入,如在HEAD中插入如下代码: 1: 4: .csharpcode, .csharpcode pre{font-size: small;color: black; ...
纯css 下滑线导航条特效
html:部分 <nav class="navigation"><div class="wrapper"> <ul class=& ...
HTML下拉菜单改变颜色,CSS下拉菜单中字体颜色问题
纯CSS下拉菜单演示 *{margin:0;padding:0;} ul{list-style-type:none;} a{text-decoration:none; color:#666; font ...

纯CSS下拉导航代码

纯CSS下拉导航代码相关推荐

最新文章

热门文章