<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>二级菜单</title> <style type="text/css"> /* 整体设置*/ #menu { margin:0; padding:0; width:610px; list-style-type:none; font:14px Arial; } #menu li { float:left; padding:0; margin:0 1px 0 0; width:150px; } /* 设置菜单项*/ #menu li dl { width:150px;/*ie6*/ margin: 0; padding: 0 0 10px 0; background: #cb6 url(images/bottom.gif) no-repeat bottom left; } #menu li dt a,#menu li dd a{ display:block;} /* 设置菜单项的dt */ #menu li dt { margin:0; padding: 5px; text-align:center; border-bottom:1px solid #b00; background: } #menu li dt.orange { background:#fa5 url(images/top.gif) no-repeat top left;} #menu li dt.yellow { background:#ee5 url(images/top.gif) no-repeat top left;} #menu li dt.green { background:#5e5 url(images/top.gif) no-repeat top left;} #menu li dt.blue { background:#5cf url(images/top.gif) no-repeat top left;} #menu li dt a ,#menu li dt a:visited { display:block; color:#333; text-decoration:none; } /* 设置菜单项的dd */ #menu li dd { margin:0; padding:0; color: #fff; background: #47a; } #menu li dd.last { border-bottom:1px solid #b00; } #menu li dd a, #menu li dd a:visited { display:block; color:#fff; text-decoration:none; padding:4px 5px 4px 20px; background: #47a url(images/arrow.gif) no-repeat 10px 10px; height:1em; } /*关闭子菜单*/ #menu li dd { display:none;} /* 设置鼠标响应 */ #menu li:hover dd , #menu li a:hover dd { display:block;} #menu li:hover, #menu li a:hover { border:0;}/*ie6*/ #menu li dd a:hover { background: #147; color:#9cf; } /*针对ie6的设置*/ #menu table { border-collapse:collapse; padding:0; margin:-1px; font-size:1em; } </style> </head> <body> <ul id="menu"> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl> <dt class="orange"><a href="#">Artech Studio</a></dt> <dd><a href="#">Web Dev</a></dd> <dd><a href="#">Web Design</a></dd> <dd><a href="#">Books</a></dd> <dd class="last"><a href="#">Contact Us</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl> <dt class="yellow"><a href="#">Artech Store</a></dt> <dd><a href="#">Books</a></dd> <dd><a href="#">DVDs</a></dd> <dd><a href="#">Movies</a></dd> <dd class="last"><a href="#">Service</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl> <dt class="green"><a href="#">Artech Achi</a></dt> <dd><a href="#">Landscape</a></dd> <dd><a href="#">Plan</a></dd> <dd><a href="#">Design</a></dd> <dd class="last"><a href="#">Maps</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl> <dt class="blue"><a href="#">Artech Science</a></dt> <dd><a href="#">Physics</a></dd> <dd><a href="#">Maths</a></dd> <dd><a href="#">Chemistry</a></dd> <dd class="last"><a href="#">Courses</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </body> </html>
效果图:
相关推荐
网页制作前端用纯CSS制作二级导航,用最简单的CSS样式实现二级导航下拉列表,html和css样式简洁清晰,一看就会,拿来就能直接用。
二级导航菜单特效 有需要请留言 html+css
CSS3水平二级导航菜单,纯CSS3制作,红色风格,鼠标经过显示二级菜单。
CSS3二级下拉导航菜单,鼠标经过一级菜单下拉显示二级菜单。
纵向导航菜单及二级弹出菜单的CSS代码。直接看html上面的style标签。
横向二级导航的基于css菜单,可以把最后的float改成none,形成二级横向的菜单。
之前我们分享过非常多的jQuery/CSS3下拉菜单插件,有些非常实用,比如这...今天我们要介绍的是另外一款下拉菜单导航,它是纯CSS3实现,其特点是简单易用,并且支持多种下拉弹出动画,非常不错,大家可以下载源码试试。
自己写的网站导航HTML5源码,精美导航源码,动态背景,CSS3响应式二级导航菜单,自适应分辨率。
给你10个WEB网页菜单*CSS3菜单效果 源...CSS3精美小图标菜单导航 CSS3飘带状3D菜单 菜单带小图标 CSS3响应式面包屑菜单 jQuery动画二级下拉菜单 纯CSS3立体动画菜单 菜单项按下有内阴影 基于Bootstrap的CSS3下拉菜单
CSS3响应式二级导航菜单,自适应分辨率,兼容PC端和移动端,调整浏览器窗口大小查看效果。
这是一个HTML5+CSS3实现的响应式二级导航菜单,资源来源于网络,侵删
html+css侧边抽屉式导航栏
这种二级菜单网上非常流行,你可以用ps色相、饱和度将颜色改成其他颜色,非常简单,打造你个性化的网页导航菜单。
响应式网站二级导航菜单是一款基于jquery.cbFlyout.js和jquery1.10.2.min.js制作的网站导航菜单,响应式设计,自适应屏幕分辨率大小,兼容PC端和手机...导航会折叠起来,只显示一个按钮,点击按钮显示垂直二级菜单。
本文实例讲述了纯CSS实现超简单的二级下拉导航菜单代码。分享给大家供大家参考。具体如下: 这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8、火狐等都支持,而且它还是学习CSS...
<TITLE> 二级下拉特效 <META content="text/html; charset=utf-8" http-equiv=Content-Type> <LINK rel=stylesheet href="css/css.css"> <META name=GENERATOR content="MSHTML 8.00.6001.19222"></HEAD> ...
1、本demo实现的效果是:以及导航栏; 当鼠标移动到一级导航栏的标题上,相应二级菜单显示; 2、用到的技术:html5,css3,javaScript 3、如果这个demo对你有一点帮助,我的分享也是值得的;
本资源是一本Web前端开发之二级菜单加轮播图的网页布局与交互设计教程,旨在通过HTML/CSS/JS这三种基础的网页开发语言,来实现一个具有二级菜单导航和图片轮播效果的网页,涵盖了网页的结构、样式、行为等内容,以及...
描述: css3实现的导航菜单代码 ... 当鼠标悬停在一级导航上,二级导航呈现螺旋状效果下拉展示 使用方法: 1、引入lanrenzhijia.css样式 2、将index.html中的代码部分拷贝到你需要的地方即可