下拉菜单与横向菜单

 

代码如下：

<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 &nbsp;-&gt;</a>
    <ul id="a3">
    <li><a href="../index.html">Item 3a</a></li>
    <li><a href="#nogo" class="bold">Item 3b &nbsp;-&gt;</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>