摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmln
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>企業(yè)網(wǎng)站下拉式導(dǎo)航欄示例</title><link rel="stylesheet" type="text/css" href="style/comm.css"/><link rel="stylesheet" type="text/css" href="style/layout.css"/><script type="text/javascript" src="script/jquery-1.4.2.min.js"></script><script type="text/javascript">$(function(){
$("#nav>ul>li").hover(function(){
$(this).children("ul").show();
},function(){
$(this).children("ul").hide();
});
});</script></head><body><div id="wrap">
<div id="nav">
<ul>
<li><a href="#">網(wǎng)站首頁</a>
<ul>
<li><a href="#" alt="訪問公司博客">公司博客</a></li>
<li><a href="#">公司論壇</a></li>
</ul>
</li>
<li><a href="#">關(guān)于我們</a>
<ul>
<li><a href="#">公司新聞</a></li>
<li><a href="#">我們的宗旨</a></li>
<li><a href="#" >服務(wù)內(nèi)容</a></li>
</ul>
</li>
<li><a href="#">網(wǎng)站新聞</a>
<ul>
<li><a href="#">行業(yè)動態(tài)</a></li>
<li><a href="#">公司新聞</a></li>
</ul>
</li>
<li><a href="#">作品展示</a>
<ul>
<li><a href="#">網(wǎng)站作品</a></li>
<li><a href="#">flash作品</a></li>
<li><a href="#">AI作品</a></li>
<li><a href="#">插畫設(shè)計</a></li>
</ul>
</li>
<li><a href="#">項目報價</a>
<ul>
<li><a href="#">網(wǎng)站作品報價</a></li>
<li><a href="#">flash作品報價</a></li>
<li><a href="#">AI作品報價</a></li>
<li><a href="#">插畫設(shè)計報價</a></li>
</ul>
</li>
<li><a href="#">聯(lián)系方式</a>
<ul>
<li><a href="#">站內(nèi)留言</a></li>
<li><a href="#">聯(lián)網(wǎng)方式</a></li>
<li><a href="#">電話號碼</a></li>
<li><a href="#">公司地址</a></li>
</ul>
</li>
</ul>
</div></div></body></html>@charset "utf-8";
/* CSS Document */
/*
用戶重置常規(guī)樣式
*/
*{margin:0;
padding:0}
body{
font-size:62.5%;
}
a{ text-decoration:none;}
ul,ol{ list-style-type:none;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
@charset "utf-8";
/* CSS Document */
#wrap{
width:1000px;
margin:0 auto;
}
#nav{
font-family:"微軟雅黑";
font-size:1.5em;
height:30px;
background:rgb(195,218,249);
}
#nav ul{width:100%;background:rgb(195,218,249);}
#nav ul li{float:left; position:relative;}
#nav ul li a{display:block;width:120px;height:30px;line-height:30px; text-align:center; background:rgb(195,218,249);color:#000;}
#nav ul li a:hover{background:rgb(255,229,179);color:#000;}
#nav ul li ul{ position:absolute;top:30px;left:0px; display:none;border:1px solid #ccc;margin-bottom:-3px;width:120px;}
#nav ul li ul li{float:none; border-bottom:1px solid #ccc;}
#nav ul li ul li a{background:rgb(246,246,246);color:#000;display:block;}
#nav ul li ul li a:hover{background:rgb(255,229,179);color:#000;}
批改老師：天蓬老師批改時間：2019-06-13 17:04:42
老師總結(jié)：這個例子, 寫得一般,但基本功能 還是有的, 下次, 記得上傳個圖, 這樣更直觀些