下拉菜单与横向菜单

代码如下：

<style type="text/css">

#info {position:relative; height:24em;}
#info h2 {margin-bottom:7em;}
#holder {position:absolute; top:50px; left:320px; width:100px; line-height:18px; height:20px; border:1px solid #f96; overflow:hidden; text-align:center; z-index:100; background:#eee;}
#holder:hover {height:130px; cursor:pointer; background:#eee;}
#holder a:visited, #holder a {display:block; width:100%; line-height:18px; color:#000; text-decoration:none;}
#holder a:hover {color:#c00;background:#ddd;}

</style>

<div id="holder">
MAIN MENU<br />

<hr />
<a href="#">Item one</a>
<a href="#">Item two</a>
<a href="#">Item three</a>
<a href="#">Item four</a>
<a href="#">Item five</a>

</div>



代码如下：

<style type="text/css">

#pmenu {font-family:verdana, arial, sans-serif; width:100px; position:relative; margin:5em auto;}
#pmenu a {width:90px; height:20px; padding-left:2px; border:1px solid #000; background:#c9ba65; line-height:18px; font-size:90%;}
#pmenu ul {padding:0; margin:0;}
#pmenu ul li {list-style-type: none;}
#pmenu ul li a:visited {display:block; text-decoration:none; color:#000;}
#pmenu ul li a {display:block; text-decoration:none; color:#000;}
#pmenu ul li a:hover {background:#e2dfa8;}
#pmenu li ul {display: none;}
#pmenu li:hover > ul#a3 {display:block; position:absolute; margin-top:-22px; left:93px; text-align:left;}
#pmenu li:hover > ul#a3b {display:block; position:absolute; margin-top:-22px; left:93px; text-align:left;}
#pmenu .bold {font-weight:bold;}

</style>

<div id="pmenu">
<ul>
<li><a href="../index.html">Item 1</a></li>
<li><a href="#nogo">Item 2</a></li>

<li><a href="#nogo" class="bold">Item 3  -></a>
<ul id="a3">
<li><a href="../index.html">Item 3a</a></li>
<li><a href="#nogo" class="bold">Item 3b  -></a>
<ul id="a3b">
<li><a href="../index.html">Item 3bi</a></li>

<li><a href="#nogo">Item 3bii</a></li>
<li><a href="#nogo">Item 3biii</a></li>
</ul>
</li>
<li><a href="#nogo">Item 3c</a></li>
</ul>
</li>

<li><a href="#nogo">Item 4</a></li>
<li><a href="#nogo">Item 5</a></li>
<li><a href="#nogo">Item 6</a></li>
</ul>
</div>