基本的全兼容纯CSS下拉菜单_菜单导航特效

一个符合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 mrc="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;
mrc: "."
}
#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><A href="/">模板无忧快速导航</A></LI>
        <LI><A href="/other/lastupdate.shtml">浏览最新更新的内容</A></LI>
        <LI><A href="/other/top100.shtml">查看下载排行榜</A></LI>
        <LI><A href="/guestbook/">给mb5u.com留言</A></LI>
        <LI><A href="/sort/index.shtml">源代码分类索引</A></LI>
        <LI><A href="/search.php?keyword=Ajax">Ajax技术资源</A></LI>
        <LI><A href="/jscss/">精品网页殊效代码</A></LI>
      </UL>
      
    </LI>
  </UL>
</DIV>
</BODY>
</HTML>

所属频道：菜单导航特效/更新时间：2012-10-25

[收藏][报错][返回列表]

基本的全兼容纯CSS下拉菜单_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些