基本的全兼容純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訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些