导航菜单 CSS+DIV

 

 

导航菜单

 

可放在一个列内进行使用(样式还是如下)：

 

 <td><div id="nav"><li class="menu2" οnmοuseοver="this.className='menu1'" οnmοuseοut="this.className='menu2'">
                        <a href="#" οnclick=" ">
                            <img src="images/daohang_09.jpg" name="Image7" width="119" height="43" border="0"
                                id="Image7" οnmοuseοver="MM_swapImage('Image7','','images/daohang2_09.jpg',1)"
                                οnmοuseοut="MM_swapImgRestore()" /></a><div class="list">
                                <center><a href="Question.aspx">有问必答</a><br /></center>
                                 <center><a href="Faq.aspx">思考游戏</a><br /></center>
                                 <center><a href="ChoiceGame.aspx">选择游戏</a><br /></center>                                
                            </div></li></div></td>

 

 

 

----------------------------------------------------------------------------

完整的：

 

<style>
 ul,li{ margin:0px; padding:0px;}
 #nav
{
 margin:0px;
 width: 980px;
 height: 30px;
 padding: 0px 5px;
 background:#FF9933 url(../images/topmenu.gif) no-repeat;
}
 #nav a:link, a:visited
{
 color: #fff;
 text-decoration: none;
}
 #nav a:hover
{
 color: #000;
 text-decoration: none;
}
 #nav li
{
 text-align:center;
 font-weight: bold;
 float: left;
 display: inline;
 padding:0px 4px;
 line-height:30px;
 margin-right:10px;
 position:relative;  /*容器相对定位，里面的.list绝对定位就不会跑偏了。*/
}
 #nav div.list
{
 display:none;
 font-size: 13px;
 line-height: 20px;
 text-align: left;
 padding: 4px;
 width: 69px;
 font-weight: normal;
 background-color:#FF9933;
 position:absolute;
 top:30px; left:0px;
 }
 #nav li.menu1 div.list{ display:block;}
</style>
<div id="nav">
<li class="menu2" οnmοuseοver="this.className='menu1'" οnmοuseοut="this.className='menu2'">
                            <a href="#">在线办事</a>
                            <div class="list">
                                <a href="#">网上咨询</a><br />
                                <a href="#">资料下载</a><br />
                                <a href="#">网上受理</a><br />
                                <a href="#">网上投诉</a><br />
                            </div>
</li>
<li><a href="#">在线办事</a></li>
<li><a href="#">在线办事</a></li>
<li><a href="#">在线办事</a></li>
<li><a href="#">在线办事</a></li>
<li><a href="#">在线办事</a></li>
</div>
<div id="content">测试测试测试</div>