#menu
{
margin:0;
padding:0;
width:100%;;
list-style-type:none;
font:14px Arial;
height :20px;
float:right ;
background:red;
}
#menu li
{
float:left;
width:150px;
padding:0;
margin:0 1px 0 0;
}
#menu li dl
{
width:150px;
margin:0;
padding:0;/*0 0 10px 0;*/
/*background:#cb6; */
}
#menu li dt
{
margin:0;
/*padding:5px;*/
height:40px;
text-align:center;
/*border-bottom:1px solid #b00;*/
background:/*#ed8*/ url('images/blue0.jpg') no-repeat top left;
}
#menu li dt a,#menu li dt a:visited
{
display:block;
color:#333;
text-decoration:none;
padding:10px 0 0 0;
height: 29px;
}
#menu li dt a:hover
{
background:url('images/blue1.jpg') no-repeat;
}
#menu li dd
{
margin:0;
padding:0;
color:#fff;
background:#47a;
height: 30px;
}
#menu li dd.last
{
border-bottom:1px solid #b00;
}
#menu li dd a, #menu li dd a:visited
{
height: 30px;
display: block;
color: #fff;
text-decoration: none;
padding: 4px 5px 4px 20px;
background: #557677 /*url('images/blue0.jpg') no-repeat 10px 10px*/;
}
#menu li dd
{
display:none;
}
#menu li:hover dd,#menu li a:hover dd
{
display:block; }
#menu li:hover,#menu li a:hover
{
border:0;
}
#menu li dd a:hover
{
background:#147;
color:#9cf;
z-index:-10;
}#menu table
{
border-collapse:collapse;
padding:0;
margin:-1px;
font-size:1em;
}
下拉菜单的html代码:
<div id="menu">
            <ul>
        <li>
            <a href="#nogo"><table><tr><td>
                <dl>
                    <dt><a href="#">Artecj</a></dt>
                    <dd><a href="#">web</a></dd>
                    <dd><a href="#">web</a></dd>
                    <dd><a href="#">web</a></dd>
                    <dd class="last"><a href="#">web</a></dd>
                </dl>
            </td></tr></table></a>
        </li>
        <li>
            <a href="#nogo"><table><tr><td>
                <dl>
                    <dt><a href="#">Artecj</a></dt>
                    <dd><a href="#">web</a></dd>
                    <dd><a href="#">web</a></dd>
                    <dd><a href="#">web</a></dd>
                    <dd class="last"><a href="#">web</a></dd>
                </dl>
            </td></tr></table></a>
        </li>
        <li>
            <a href="#nogo"><table><tr><td>
                <dl>
                    <dt><a href="#">Artecj</a></dt>
                    <dd><a href="#">web</a></dd>
                    <dd><a href="#">web</a></dd>
                    <dd><a href="#">web</a></dd>
                    <dd class="last"><a href="#">web</a></dd>
                </dl>
            </td></tr></table></a>
        </li>
    </ul>
         </div>