基本的全兼容纯CSS下拉菜单

2024-09-05 12:19:56

字体：大中小

来源：转载

供稿：网友

一个符合W3C标准的全兼容CSS下拉菜单，CSS代码可以进一步优化。
　　灰色风格，根据需要你可以继续添加菜单项，本例子的菜单项只有一个，为的是方便阅读代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><HTML><HEAD><TITLE>CSS纵向下拉菜单</TITLE><META http-equiv=Content-Type content="text/html; charset=utf-8"><style>HTML BODY H3{       FONT-WEIGHT: normal;       MARGIN: 0px;       PADDINGP: 0px}UL {       PADDING-RIGHT: 0px;       PADDING-LEFT: 0px;       FONT-WEIGHT: normal;       PADDING-BOTTOM: 0px;       MARGIN: 0px;       PADDING-TOP: 0px}BODY {       FONT: 12px/2 Verdana, Arial, Helvetica, Simsun, "Microsoft YaHei";       TEXT-ALIGN: center}UL {       LIST-STYLE-TYPE: none}#dymenu {       MARGIN: 0px auto;       WIDTH: 500px;       TEXT-ALIGN: left}#dymenu .root {       BACKGROUND: #000;}#dymenu .root:unknown {CLEAR: both;DISPLAY: block;VISIBILITY: hidden;HEIGHT: 0px;content: "."}#dymenu .root LI {       FLOAT: left;       POSITION: relative}#dymenu .root A {       CURSOR: pointer;       COLOR: #fff;       TEXT-DECORATION: none}#dymenu .root TABLE {       BORDER-COLLAPSE: collapse;       border-spacing: 0}#dymenu .root H3 {       PADDING: 0px 10px 0px 10px;       FONT-SIZE: 12px;       BACKGROUND: #000;       MARGIN: 0px;       CURSOR: default;       COLOR: #fff;       LINE-HEIGHT: 25px;       HEIGHT: 25px        WIDTH: 120PX;}#dymenu .root UL {       DISPLAY: none}#dymenu .root A:hover {       BACKGROUND: #eee;       COLOR: #000}#dymenu .root A:hover H3 {       BACKGROUND: #eee;       COLOR: #000}#dymenu .root LI:hover {       BACKGROUND: #eee;       COLOR: #000}#dymenu .root A:hover UL {       DISPLAY: block;       BACKGROUND: #eee;       LEFT: 0px;       WIDTH: 160px;       POSITION: absolute}#dymenu .root LI:hover UL {       DISPLAY: block;       BACKGROUND: #eee;       LEFT: 0px;       WIDTH: 160px;       POSITION: absolute}#dymenu .root UL LI {       BORDER-TOP: #fff 1px solid;       FLOAT: none;       POSITION: relative}#dymenu .root UL A {       DISPLAY: block;       BACKGROUND: #eee;       VERTICAL-ALIGN: middle;       WIDTH: 100%;       COLOR: #000;       TEXT-INDENT: 10px}#dymenu .root UL A:hover {       BACKGROUND: #ddd;       COLOR: #333}#dymenu .root A:hover A UL {       DISPLAY: none;       BACKGROUND: none transparent scroll repeat 0% 0%;       POSITION: static}#dymenu .root LI:hover LI UL {       DISPLAY: none;       BACKGROUND: none transparent scroll repeat 0% 0%;       POSITION: static}#dymenu .root A:hover A:hover UL {       MARGIN-TOP: 0px;       DISPLAY: block;       BACKGROUND: #eee;       LEFT: 100px;       POSITION: absolute;       TOP: 0px}#dymenu .root LI:hover LI:hover UL {       MARGIN-TOP: 0px;       DISPLAY: block;       BACKGROUND: #eee;       LEFT: 100px;       POSITION: absolute;       TOP: 0px}#dymenu .root UL UL LI {       BORDER-LEFT: #fff 1px solid}</style></HEAD><BODY><DIV id=dymenu>  <UL class=root>    <LI>            <H3>下拉菜单</H3>      <UL>        <LI>快速导航</LI>        <LI>最新更新的内容</LI>        <LI>下载排行榜</LI>        <LI>我要留言</LI>        <LI>源代码分类索引</LI>        <LI>Ajax技术资源</LI>        <LI>精品网页特效</LI>      </UL>          </LI>  </UL></DIV></BODY></HTML>

上一篇：纯CSS菜单，鼠标经过变换背景很漂亮

下一篇：B2B网站上常用的TAB选项卡