Div+Css(+Js)菜单代码及制作工具

<div id="fbtn"> 
<div id="fbtn_mask"></div> 
<div id="fbtn_txt"> 
<div>G1</div> 
<div>good morning</div> 
</div> 
</div>

<div id="fbtn"> 
<div id="fbtn_mask"></div> 
<div id="fbtn_txt"> 
<div>G2</div> 
<div>good evening</div> 
</div> 
</div>

<div id="fbtn"> 
<div id="fbtn_mask"></div> 
<div id="fbtn_txt"> 
<div>M1</div> 
<div>my name is fireyy</div> 
</div> 
</div>

<div id="fbtn"> 
<div id="fbtn_mask"></div> 
<div id="fbtn_txt"> 
<div>G1</div> 
<div>good morning</div> 
</div> 
</div>

<div id="fbtn"> 
<div id="fbtn_mask"></div> 
<div id="fbtn_txt"> 
<div>G2</div> 
<div>good evening</div> 
</div> 
</div>

<div id="fbtn"> 
<div id="fbtn_mask"></div> 
<div id="fbtn_txt"> 
<div>M1</div> 
<div>my name is fireyy</div> 
</div> 
</div>

for(var i=0;i<fbtn.length;i++){ 
fbtn_txt[i].style.posTop=-30; 
fbtn_mask[i].style.posTop=-30; 
fbtn[i].index=i; 
fbtn[i].style.display="block";

fbtn[i].onmouseover=function(){ 
if(!current){ 
current=this; 
domove(this.index); 
} 
else  
if(current!=this){ 
domove(current.index); 
domove(this.index); 
current=this; 
} 
}

fbtn[i].onmouseout=function(){ 
if(event.toElement==this.parentElement&t==this){ 
domove(this.index); 
current=null; 
} 
} 
}

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

.menu { 
font-family: arial, sans-serif;  
width:750px;  
margin:0;  
margin:50px 0; 
} 
/* remove the bullets and set the margin and padding to zero for the unordered list */ 
.menu ul { 
padding:0;  
margin:0; 
list-style-type: none; 
} 
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */ 
.menu ul li { 
float:left;  
position:relative; 
} 
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */ 
.menu ul li a, .menu ul li a:visited { 
display:block;  
text-align:center;  
text-decoration:none;  
width:104px;  
height:30px;  
color:#000;  
border:1px solid #fff; 
border-width:1px 1px 0 0; 
background:#c9c9a7;  
line-height:30px;  
font-size:11px; 
} 
/* make the dropdown ul invisible */ 
.menu ul li ul { 
display: none; 
}

/* specific to non IE browsers */ 
/* set the background and foreground color of the main menu li on hover */ 
.menu ul li:hover a { 
color:#fff;  
background:#b3ab79; 
} 
/* make the sub menu ul visible and position it beneath the main menu list item */ 
.menu ul li:hover ul { 
display:block;  
position:absolute;  
top:31px;  
left:0;  
width:105px; 
} 
/* style the background and foreground color of the submenu links */ 
.menu ul li:hover ul li a { 
display:block;  
background:#faeec7;  
color:#000; 
} 
/* style the background and forground colors of the links on hover */ 
.menu ul li:hover ul li a:hover { 
background:#dfc184;  
color:#000; 
}

</style> 
<!--[if lte IE 6]>

/* Get rid of any default table style */ 
table { 
border-collapse:collapse; 
margin:0;  
padding:0; 
} 
/* ignore the link used by 'other browsers' */ 
.menu ul li a.hide, .menu ul li a:visited.hide { 
display:none; 
} 
/* set the background and foreground color of the main menu link on hover */ 
.menu ul li a:hover { 
color:#fff;  
background:#b3ab79; 
} 
/* make the sub menu ul visible and position it beneath the main menu list item */ 
.menu ul li a:hover ul { 
display:block;  
position:absolute;  
top:32px;  
left:0;  
width:105px; 
} 
/* style the background and foreground color of the submenu links */ 
.menu ul li a:hover ul li a { 
background:#faeec7;  
color:#000; 
} 
/* style the background and forground colors of the links on hover */ 
.menu ul li a:hover ul li a:hover { 
background:#dfc184;  
color:#000; 
}

</style>

<![endif]-->

<ul> 
<li><a class="hide" href="#">DEMOS</a>

<ul> 
    <li><a href="#" title="The zero dollar ads page">zero dollars</a></li> 
    <li><a href="#" title="Wrapping text around images">wrapping text</a></li> 
    <li><a href="#" title="Styling forms">styled form</a></li> 
    <li><a href="#" title="Removing active/focus borders">active focus</a></li> 
    <li><a href="#" title="Multi-position drop shadow">shadow boxing</a></li> 
    <li><a href="#" title="Image Map for detailed information">image map</a></li> 
    <li><a href="#" title="fun with background images">fun backgrounds</a></li> 
    <li><a href="#" title="fade-out scrolling">fade scrolling</a></li> 
    <li><a href="#" title="em size images compared">em sized images</a></li> 
    </ul>

</li>

<li><a class="hide" href="#">MENUS</a>

<ul> 
    <li><a href="#" title="a coded list of spies">spies menu</a></li> 
    <li><a href="#" title="a horizontal vertical menu">vertical menu</a></li> 
    <li><a href="#" title="an enlarging unordered list">enlarging list</a></li> 
    <li><a href="#" title="an unordered list with link images">link images</a></li> 
    <li><a href="#" title="non-rectangular links">non-rectangular</a></li> 
    <li><a href="#" title="jigsaw links">jigsaw links</a></li> 
    <li><a href="#" title="circular links">circular links</a></li> 
    </ul>

</li>

<li><a class="hide" href="#">LAYOUTS</a>

<ul> 
    <li><a href="#" title="Cross browser fixed layout">Fixed 1</a></li> 
    <li><a href="#" title="Cross browser fixed layout">Fixed 2</a></li> 
    <li><a href="#" title="Cross browser fixed layout">Fixed 3</a></li> 
    <li><a href="#" title="Cross browser fixed layout">Fixed 4</a></li> 
    <li><a href="#" title="A simple minimum width layout">minimum width</a></li> 
    </ul>

</li>

<li><a class="hide" href="#">BOXES</a>

<ul> 
    <li><a href="#" title="a coded list of spies">spies menu</a></li> 
    <li><a href="#" title="a horizontal vertical menu">vertical menu</a></li> 
    <li><a href="#" title="an enlarging unordered list">enlarging list</a></li> 
    <li><a href="#" title="an unordered list with link images">link images</a></li> 
    <li><a href="#" title="non-rectangular links">non-rectangular</a></li> 
    <li><a href="#" title="jigsaw links">jigsaw links</a></li> 
    <li><a href="#" title="circular links">circular links</a></li> 
    </ul>

</li>

<li><a class="hide" href="#">MOZILLA</a>

<ul> 
    <li><a href="#" title="A drop down menu">drop down menu</a></li> 
    <li><a href="#" title="A cascading menu">cascading menu</a></li> 
    <li><a href="#" title="Using content:">content:</a></li> 
    <li><a href="#" title=":hover applied to a div">mozzie box</a></li> 
    <li><a href="#" title="I can build a rainbow">rainbow box</a></li> 
    <li><a href="#" title="Snooker cue">snooker cue</a></li> 
    <li><a href="#" title="Target Practise">target practise</a></li> 
    <li><a href="#" title="Two tone headings">two tone headings</a></li> 
    <li><a href="#" title="Shadow text">shadow text</a></li> 
    </ul>

</li>

<li><a class="hide" href="#">EXPLORER</a>

<ul> 
    <li><a href="#" title="Example one">example one</a></li> 
    <li><a href="#" title="Weft fonts">weft fonts</a></li> 
    <li><a href="#" title="Vertical align">vertical align</a></li> 
    </ul>

</li>

<li><a class="hide" href="#">OPACITY</a>

<ul> 
    <li><a href="#" title="colour wheel">opaque colours</a></li> 
    <li><a href="#" title="a menu using opacity">opaque menu</a></li> 
    <li><a href="#" title="partial opacity">partial opacity</a></li> 
    <li><a href="#" title="partial opacity II">partial opacity II</a></li> 
    </ul>

</li> 
</ul>

<div class="clear"> </div>

</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

/* specific to non IE browsers */ 
.menu ul li:hover a {color:#fff; background:#36f;} 
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;} 
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;} 
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;} 
.menu ul li:hover ul li ul {display: none;} 
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;} 
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;} 
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;} 
.menu ul li:hover ul li:hover ul.left {left:-105px;}

</style> 
<!--[if lte IE 6]> 
<style type="text/css"> 
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;} 
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff; background:#36f;} 
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;} 
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;} 
.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;} 
.menu ul li a:hover ul li a ul {visibility:hidden;} 
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;} 
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;} 
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}

</style> 
<![endif]-->

<ul> 
<li><a class="hide" href="#">DEMOS</a>

<ul> 
    <li><a href="#" title="The zero dollar ads page">zero dollars</a></li> 
    <li><a href="#" title="Wrapping text around images">wrapping text</a></li> 
    <li><a href="#" title="Styling forms">styled form</a></li> 
    <li><a href="#" title="Removing active/focus borders">active focus</a></li>

<li><a class="hide" href="#" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>

<ul> 
            <li><a href="#" title="Styling forms">styled form</a></li> 
            <li><a href="#" title="Removing active/focus borders">active focus</a></li> 
            <li><a href="#" title="Hover/click with no active/focus borders">hover/click</a></li> 
        </ul>

</li>

<li><a href="#" title="Multi-position drop shadow">shadow boxing</a></li> 
    <li><a href="#" title="Image Map for detailed information">image map</a></li> 
    <li><a href="#" title="fun with background images">fun backgrounds</a></li> 
    <li><a href="#" title="fade-out scrolling">fade scrolling</a></li> 
    <li><a href="#" title="em size images compared">em sized images</a></li> 
    </ul>

</li>

<li><a class="hide" href="#">MENUS</a>

<ul> 
    <li><a href="#" title="a coded list of spies">spies menu</a></li> 
    <li><a href="#" title="a horizontal vertical menu">vertical menu</a></li> 
    <li><a href="#" title="an enlarging unordered list">enlarging list</a></li> 
    <li><a href="#" title="an unordered list with link images">link images</a></li> 
    <li><a href="#" title="non-rectangular links">non-rectangular</a></li> 
    <li><a href="#" title="jigsaw links">jigsaw links</a></li> 
    <li><a href="#" title="circular links">circular links</a></li> 
    </ul>

</li>

<li><a class="hide" href="#">LAYOUTS</a>

<ul> 
    <li><a href="#" title="Cross browser fixed layout">Fixed 1</a></li> 
    <li><a href="#" title="Cross browser fixed layout">Fixed 2</a></li> 
    <li><a href="#" title="Cross browser fixed layout">Fixed 3</a></li> 
    <li><a href="#" title="Cross browser fixed layout">Fixed 4</a></li> 
    <li><a href="#" title="A simple minimum width layout">minimum width</a></li> 
    </ul>

</li>

<li><a class="hide" href="#">BOXES</a>

<ul> 
    <li><a href="#" title="a coded list of spies">spies menu</a></li> 
    <li><a href="#" title="a horizontal vertical menu">vertical menu</a></li> 
    <li><a href="#" title="an enlarging unordered list">enlarging list</a></li> 
    <li><a href="#" title="an unordered list with link images">link images</a></li> 
    <li><a href="#" title="non-rectangular links">non-rectangular</a></li> 
    <li><a href="#" title="jigsaw links">jigsaw links</a></li> 
    <li><a href="#" title="circular links">circular links</a></li> 
    </ul>

</li>

<li><a class="hide" href="#">MOZILLA</a>

<ul> 
    <li><a href="#" title="A drop down menu">drop down menu</a></li> 
    <li><a href="#" title="A cascading menu">cascading menu</a></li> 
    <li><a href="#" title="Using content:">content:</a></li> 
    <li><a href="#" title=":hover applied to a div">mozzie box</a></li> 
    <li><a href="#" title="I can build a rainbow">rainbow box</a></li> 
    <li><a href="#" title="Snooker cue">snooker cue</a></li> 
    <li><a href="#" title="Target Practise">target practise</a></li> 
    <li><a href="#" title="Two tone headings">two tone headings</a></li> 
    <li><a href="#" title="Shadow text">shadow text</a></li> 
    </ul>

</li>

<li><a class="hide" href="#">EXPLORER</a>

<ul> 
    <li><a href="#" title="Example one">example one</a></li> 
    <li><a href="#" title="Weft fonts">weft fonts</a></li> 
    <li><a href="#" title="Vertical align">vertical align</a></li> 
    </ul>

</li>

<li><a class="hide" href="#">OPACITY</a>

<ul> 
    <li><a href="#" title="colour wheel">opaque colours</a></li> 
    <li><a href="#" title="a menu using opacity">opaque menu</a></li> 
    <li><a href="#" title="partial opacity">partial opacity</a></li> 
    <li><a href="#" title="partial opacity II">partial opacity II</a></li> 
    <li><a class="hide" href="#" title="Hover/click with no active/focus borders">< HOVER/CLICK</a>

<ul class="left"> 
            <li><a href="#" title="Styling forms">styled form</a></li> 
            <li><a href="#" title="Removing active/focus borders">active focus</a></li> 
            <li><a href="#" title="Hover/click with no active/focus borders">hover/click</a></li> 
        </ul>

</li> 
    </ul>

</li> 
</ul>

</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

/* specific to non IE browsers */ 
.menu ul li:hover a {color:#fff; background:#36f;} 
.menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;} 
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;} 
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;} 
.menu ul li:hover ul li ul {display: none;} 
.menu ul li:hover ul li a {display:block; background:#eee; color:#000;} 
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;} 
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}

</style> 
<!--[if lte IE 6]> 
<style type="text/css"> 
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;} 
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff; background:#36f;} 
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;} 
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;} 
.menu ul li a:hover ul li a {display:block; background:#eee; color:#000;} 
.menu ul li a:hover ul li a ul {visibility:hidden;} 
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;} 
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}

</style> 
<![endif]-->

<div class="menu"> 
 <ul> 
 <li><a class="hide" href="#">DEMOS</a>

<ul> 
  <li><a href="#" title="The zero dollar ads page">zero dollars</a></li> 
  <li><a href="#" title="Wrapping text around images">wrapping text</a></li> 
  <li><a href="#" title="Styling forms">styled form</a></li> 
  <li><a href="#" title="Removing active/focus borders">active focus</a></li> 
  <li><a class="hide" href="#" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>

<ul> 
   <li><a href="#" title="Styling forms">styled form</a></li> 
   <li><a href="#" title="Removing active/focus borders">active focus</a></li> 
   <li><a href="#" title="Hover/click with no active/focus borders">hover/click</a></li> 
   </ul>

</li> 
  <li><a href="#" title="Multi-position drop shadow">shadow boxing</a></li> 
  <li><a href="#" title="Image Map for detailed information">image map</a></li> 
  <li><a href="#" title="fun with background images">fun backgrounds</a></li> 
  <li><a href="#" title="fade-out scrolling">fade scrolling</a></li> 
  <li><a href="#" title="em size images compared">em sized images</a></li> 
  </ul>

</li>

<li><a class="hide" href="#">MENUS</a>

<ul> 
  <li><a href="#" title="a coded list of spies">spies menu</a></li> 
  <li><a href="#" title="a horizontal vertical menu">vertical menu</a></li> 
  <li><a href="#" title="an enlarging unordered list">enlarging list</a></li> 
  <li><a href="#" title="an unordered list with link images">link images</a></li> 
  <li><a href="#" title="non-rectangular links">non-rectangular</a></li> 
  <li><a href="#" title="jigsaw links">jigsaw links</a></li> 
  <li><a href="#" title="circular links">circular links</a></li> 
  </ul>

</li>

<li><a class="hide" href="#">LAYOUTS</a>

<ul> 
  <li><a href="#" title="Cross browser fixed layout">Fixed 1</a></li> 
  <li><a href="#" title="Cross browser fixed layout">Fixed 2</a></li> 
  <li><a href="#" title="Cross browser fixed layout">Fixed 3</a></li> 
  <li><a href="#" title="Cross browser fixed layout">Fixed 4</a></li> 
  <li><a href="#" title="A simple minimum width layout">minimum width</a></li> 
  </ul>

</li>

<li><a class="hide" href="#">BOXES</a>

<ul> 
  <li><a href="#" title="a coded list of spies">spies menu</a></li> 
  <li><a href="#" title="a horizontal vertical menu">vertical menu</a></li> 
  <li><a href="#" title="an enlarging unordered list">enlarging list</a></li> 
  <li><a href="#" title="an unordered list with link images">link images</a></li> 
  <li><a href="#" title="non-rectangular links">non-rectangular</a></li> 
  <li><a href="#" title="jigsaw links">jigsaw links</a></li> 
  <li><a href="#" title="circular links">circular links</a></li> 
  </ul>

</li>

<li><a class="hide" href="#">MOZILLA</a>

<ul> 
  <li><a href="#" title="A drop down menu">drop down menu</a></li> 
  <li><a href="#" title="A cascading menu">cascading menu</a></li> 
  <li><a href="#" title="Using content:">content:</a></li> 
  <li><a href="#" title=":hover applied to a div">mozzie box</a></li> 
  <li><a href="#" title="I can build a rainbow">rainbow box</a></li> 
  <li><a href="#" title="Snooker cue">snooker cue</a></li> 
  <li><a href="#" title="Target Practise">target practise</a></li> 
  <li><a href="#" title="Two tone headings">two tone headings</a></li> 
  <li><a href="#" title="Shadow text">shadow text</a></li> 
  </ul>

</li>

<li><a class="hide" href="#">EXPLORER</a>

<ul> 
  <li><a href="#" title="Example one">example one</a></li> 
  <li><a href="#" title="Weft fonts">weft fonts</a></li> 
  <li><a href="#" title="Vertical align">vertical align</a></li> 
 </ul>

</li>

<li><a class="hide" href="#">OPACITY</a>

<ul> 
 <li><a href="#" title="colour wheel">opaque colours</a></li> 
 <li><a href="#" title="a menu using opacity">opaque menu</a></li> 
 <li><a href="#" title="partial opacity">partial opacity</a></li> 
 <li><a href="#" title="partial opacity II">partial opacity II</a></li> 
 </ul>

</li> 
 </ul>

</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

/* specific to non IE browsers */ 
.menu ul li:hover a {color:#fff; background:#b3ab79;} 
.menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;} 
.menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;} 
.menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;} 
.menu ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;} 
.menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;} 
.menu ul li:hover ul li ul {display: none;} 
.menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;} 
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;} 
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;} 
.menu ul li:hover ul.right li {float:right;} 
.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;} 
.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;} 
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}

</style>