基本的全兼容纯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>
      <!--[if IE]><A 
  href="#">
  <TABLE>
    <TBODY>
    <TR>
      <TD><![endif]-->
      <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/">我要留言</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>
      <!--[if IE]></TD></TR></TBODY></TABLE></A><![endif]-->
    </LI>
  </UL>
</DIV>
</BODY>
</HTML>
上一个：CSS实现多彩的六边形蜂窝菜单
下一个：左侧的JS后台折叠菜单，支持Cookie保存
更多图片编程知识: