纵向CSS+DIV下拉菜单

 好像是不支持ff.

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" [ <!ELEMENT a (#PCDATA | table)*  >  ]>
< html  xmlns ="http://www.w3.org/1999/xhtml"  xml:lang ="en"   >
< head >
< meta  http-equiv ="Content-Type"  content ="application/xhtml+xml; charset=UTF-8"   />
< title > 纯CSS下拉菜单，兼容IE和FF </ title >

< style  type ="text/css" >
body {color:#fff;}
#wrapper {color:#000;}
.red {color:#c00;}
#info {margin-top:20px;}
#info h1 {font-size:3em; text-align:center; font-family: georgia, "times new roman", serif;}

#head {height:145px; border:0;}

#positioner {clear:both; position:relative; left:1px; z-index:100;}
#ads {position:relative; z-index:10;}
.menu {font-size:12px;position:relative;z-index:100;}
#noniemenu {position:absolute;}

#noniemenu .holder ul {padding:0; margin:0;}
#noniemenu .holder ul li {list-style-type: none;}
#noniemenu .holder li {}
#noniemenu .holder li ul {display: none;} 
#noniemenu .holder li:hover > ul#a3 {display:block; position:absolute; left:105px; margin-top:-20px; border:1px solid #000;}
#noniemenu .holder .bold {font-weight:bold;}

#noniemenu .holder {
  color:#fff; 
  width:104px; 
  height:18px; 
  display:block; 
  overflow:hidden;
  float:left;
  border:1px solid #000;
  margin-right:1px;
  font-size:10px;
  }
#noniemenu .holder:hover {
  height:auto; 
  }
#noniemenu a.outer, #noniemenu a.outer:visited {
   color:#fff; 
   width:104px; 
   line-height:18px;
   display:block; 
   background:#e09222; 
   text-align:center; 
   text-decoration:none; 
   font-family: verdana, arial, sans-serif;
   }
#noniemenu a.outer:hover {
  background:#697210; 
  overflow:visible;
  }
#noniemenu div.open {display:none;}
#noniemenu a.inner, #noniemenu a.inner:visited {
  display:block; 
  width:104px; 
  height:18px;
  line-height:18px;
  border-bottom:1px solid #000; 
  text-decoration:none; 
  color:#000; 
  background:#eee;
  text-align:center;
  }
#noniemenu a.second {font-weight:bold;}
#noniemenu a.inner:hover {
  background:#add;
  }
</ style >

<!-- [if lte IE 6]>
<style type="text/css">
body {margin-top:-8px;}
#head {height:147px;}
#noniemenu {display:none;}
.menu {display:block; position:absolute;}
.menu a.outer, .menu a.outer:visited {
   color:#fff; 
   width:104px; 
   height:18px; 
   display:block; 
   background:#e09222; 
   border:1px solid #000; 
   margin-right:1px; 
   text-align:center; 
   float:left; 
   text-decoration:none; 
   font-family: verdana, arial, sans-serif; 
   font-size:10px; 
   line-height:18px; 
   overflow:hidden;

   }
.menu a.outer:hover {
  background:#697210; 
  overflow:visible;
  }
.menu a.outer:hover table.first {
  display:block; 
  background:#eee; 
  border-collapse:collapse;
  }
.menu a.inner, .menu a.inner:visited {
  display:block; 
  width:102px; 
  height:18px; 
  border-bottom:1px solid #000; 
  text-decoration:none; 
  color:#000;
  font-family: verdana, arial, sans-serif; 
  font-size:10px; 
  text-align:center;
  }
.menu a.inner:hover {
  background:#add;
  }

.menu a.outer table.first a.second {
  height:18px; 
  line-height:18px; 
  overflow:hidden; 
  font-weight:bold;
  }
.menu a.outer table.first a.second:hover {
  position:relative; 
  overflow:visible;
  }
.menu a.outer table.first a.second:hover table {
  position:absolute; 
  top:-2px; 
  left:102px; 
  border-collapse:collapse; 
  background:#eee; 
  border:1px solid #000; 
  font-weight:normal
}
</style>
<![endif] -->


<!-- [if lte IE 6]>
<style>
#ads {display:none;}
#adsie {clear:both; text-align:center; width:750px; margin-top:10px;}
</style>
<![endif] -->


</ head >

< body >
< div  id ="wrapper" />

< div  id ="head" />

< div  id ="positioner" />

< div  class ="menu" >
< a  class ="outer"  href ="" > XHTML/CSS
< table  class ="first" >< tr >< td >
< a  class ="inner"  href ="" > 标准 </ a >
< a  class ="inner"  href ="" > 技术文章 </ a >
< a  class ="inner"  href ="" > 常见问题 </ a >
< a  class ="inner"  href ="" > 布局教程专题 </ a >

< a  class ="inner second"  href =""  title ="Hover/click with no active/focus borders" > AJAX >
< table >< tr >< td >
< a  class ="inner"  href =""  title ="Styling forms" > AJAX教程 </ a >
</ td ></ tr ></ table >
</ a >
< a  class ="inner"  href ="" > CSS菜单 </ a >
< a  class ="inner"  href ="" > 滚动条相关 </ a >  
< a  class ="inner"  href ="" > 圆角矩形专题 </ a >
< a  class ="inner"  href ="" > CSS特效欣赏专题 </ a >
</ td ></ tr ></ table >
</ a >

< a  class ="outer"  href ="" > XHTML/CSS
< table  class ="first" >< tr >< td >
                < a  class ="inner"  href ="" > PHP </ a >
                 < a  class ="inner"  href ="" > ASP </ a >
                 < a  class ="inner"  href ="" > ASP.NET </ a >
                 < a  class ="inner"  href ="" > JSP </ a >
                 < a  class ="inner"  href ="" > SQL </ a >    
                 < a  class ="inner"  href ="" > Flash </ a >   
                 < a  class ="inner"  href ="" > Dreamweaver </ a >
</ td ></ tr ></ table >
</ a >

< a  class ="outer"  href ="" > LAYOUTS
</ a >
</ div ></ body ></ html >

转载于:https://www.cnblogs.com/xiaojiangjiang/archive/2007/06/06/html.html