jquery、div+css导航条
来源：互联网 发布：微信有java版的吗 编辑：程序博客网 时间：2024/04/30 13:17
<style type="text/css"> #content{width:980px;margin:0 auto;} #nva { background-image:url('ImgProfessional/nav.png'); height:37px; text-align:center; line-height:37px; } ul,li { list-style-type:none; } #jsddm { margin:0px; padding:0px; z-index:100px; position:relative; } #jsddm li { float:left; text-align:center; font:14px,Tahoma,Arial; line-height:40px; } #jsddm li a { width:121px; display:block; text-decoration:none; font-size:14px; font-weight:bold; height:37px; white-space:nowrap; color:Red; } #jsddm li a:hover { text-decoration:underline; } #jsddm li ul { margin:0; padding:0; position:absolute; visibility:hidden; } #jsddm li ul li { float:none; display:inline; } #jsddm li ul li a { background-color:#391f0e; width:121px; color:red; font-weight:normal; font-size:12px; height:30px; line-height:30px; text-align:center; } #jsddm li ul li a:hover { background-color:#60361c; font-weight:normal; font-size:12px; height:30px; text-decoration:none; } </style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#jsddm li").mousemove(function () { $(this).find("ul").css("visibility", "visible"); }); $("#jsddm li").mouseout(function () { $(this).find("ul").css("visibility", "hidden"); }); }); </script><div id="content"> <div id="nva"> <!--菜单start--> <ul id="jsddm"> <li><a href="Overseasfocus.aspx" id="nav1"><span>首 页</span></a></li> <li><a href="NewsUpdate.aspx" id="nav2"><span>政策咨询</span></a> <ul> <li><a href="NewsUpdate.aspx">最新咨询</a></li> <li><a href="HomeBuyerHelper.aspx">置业帮助</a></li> <li><a href="CityTour.aspx">城市旅游</a></li> <li><a href="MigrationEducation.aspx">移民留学</a></li> <li><a href="QuestionAndAnswer.aspx">海房问答</a></li> </ul> </li> <li><a href="Canada.aspx" id="nav3"><span>北美房产</span></a> <ul> <li><a href="Canada.aspx">加拿大</a></li> <li><a href="America.aspx">美国</a></li> </ul> </li> <li><a href="Singapore.aspx" id="nav4"><span>亚洲房产</span></a> <ul> <li><a href="Singapore.aspx">新加坡</a></li> <li><a href="Malaysia.aspx">马来西亚</a></li> <li><a href="HongKong.aspx">香港</a></li> <li><a href="Japan.aspx">日本</a></li> </ul> </li> <li><a href="Australia.aspx" id="nav5"><span>澳洲房产</span></a> <ul> <li><a href="Australia.aspx">澳大利亚</a></li> </ul> </li> <li><a href="England.aspx" id="nav6"><span>欧洲房产</span></a> <ul> <li><a href="England.aspx">英国</a></li></ul> </li> <li><a href="Other.aspx" id="nva7">其他房产</a> <ul> </ul> </li> <li><a href="MigrationEducation.aspx" id="nva8">移民留学</a> <ul> <%if (Request.Cookies["UserType"] != null) { if (Request.Cookies["UserType"].Value == "1") {%><li><a href="WebManager.aspx">广告管理</a></li><li><a href="InfotainmentGather.aspx"> 资讯采集</a></li><li><a href="CountryHMGather.aspx">房产采集</a></li><li><a href="CountryHMList.aspx"> 房产信息审核</a></li><li><a href="NewsList.aspx">资讯信息审核</a></li><li><a href="LinksList.aspx"> 合作伙伴管理</a></li><li><a href="PartnersList.aspx">友情链接管理</a></li><%} } %> </ul> </li> </ul> <!--菜单end--> </div> </div>
