> 웹 프론트엔드 > HTML 튜토리얼 > 二级导航为嘛显示不了?_html/css_WEB-ITnose

二级导航为嘛显示不了?_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:17:22
원래의
1341명이 탐색했습니다.

   无法二级导航无法覆盖到之上

<!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" /><meta name="keywords" content="WOW Hotel" /> <meta name="description" content="WOW Hotel" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <title>WOW Hotel  --  Home</title> <script type="text/javascript">function showmenu(elmnt){	document.getElementById(elmnt).style.display = "block";}function hidemenu(elmnt){	document.getElementById(elmnt).style.display = "none";}</script></head><body><!--顶端样式--><div id="top">   <!--头部样式-->       <div id="header">             <div id="logo"><img  src="images/BfAVS0Lk.png"    style="max-width:90%"  style="max-width:90%"/ alt="二级导航为嘛显示不了?_html/css_WEB-ITnose" ></div>			 <div id="logon_text"></div>  </div>    <!--导航样式-->   <div id="nav">          		  <div id="nav_bg">            <div class="nav_top">			   <ul> 			      <li><a href="index.html">Home</a></li>                   <li onmouseover="showmenu('tutorials2')" onmouseout="hidemenu('tutorials2')"><a href="#">Packages</a>				            <ul class="menu" id="tutorials2" style="display:none;">							<li class="menu"><a href="#">1</a></li>							<li class="menu"><a href="#">2</a></li>							<li class="menu"><a href="#">3</a></li>							<li class="menu"><a href="#">4</a></li>							</ul>				 </li>                   <li onmouseover="showmenu('menus2')" onmouseout="hidemenu('menus2')"><a href="#">Rooms</a>				      	 <ul class="menu" id="menus2" style="display:none;">							<li class="menu"><a href="#">1</a></li>							<li class="menu"><a href="#">2</a></li>							<li class="menu"><a href="#">3</a></li>							<li class="menu"><a href="#">4</a></li>						 </ul>				  </li>			      <li onmouseover="showmenu('menus3')" onmouseout="hidemenu('menus3')"><a href="#">Entertainment</a>				       	<ul class="menu" id="menus3" style="display:none;">							<li class="menu"><a href="#">1</a></li>							<li class="menu"><a href="#">2</a></li>							<li class="menu"><a href="#">3</a></li>							<li class="menu"><a href="#">4</a></li>						 </ul> 				  </li>                   <li onmouseover="showmenu('menus4')" onmouseout="hidemenu('menus4')"><a href="#">Server</a>				       	 <ul class="menu" id="menus4" style="display:none;">							<li class="menu"><a href="#">1</a></li>							<li class="menu"><a href="#">2</a></li>							<li class="menu"><a href="#">3</a></li>							<li class="menu"><a href="#">4</a></li>						 </ul> 				  </li>                   <li onmouseover="showmenu('menus5')" onmouseout="hidemenu('menus5')"><a href="#">BBS</a>				      	<ul class="menu" id="menus5" style="display:none;">							<li class="menu"><a href="#">1</a></li>							<li class="menu"><a href="#">2</a></li>							<li class="menu"><a href="#">3</a></li>							<li class="menu"><a href="#">4</a></li>						 </ul> 				  </li>                   <li onmouseover="showmenu('menus6')" onmouseout="hidemenu('menus6')"><a href="#">Contact</a>				      	  <ul class="menu" id="menus6" style="display:none;">							<li class="menu"><a href="#">1</a></li>							<li class="menu"><a href="#">2</a></li>							<li class="menu"><a href="#">3</a></li>							<li class="menu"><a href="#">4</a></li>						 </ul> 				  </li>                </ul> 			   </div>			 </div>   <div id="banner">     <img  src="images/banner.jpg" / alt="二级导航为嘛显示不了?_html/css_WEB-ITnose" >	</div>   </div></div><!--main--><div id="main"><div id="i_left">    <div>	<h3 class="blk_t">Navigation</h3> 	  <ul> 	    			  <li><a href="sp.html">Spend a weekend</a></li>					  <li><a href="sp.html">Anywhere sale</a></li>					  <li><a href="sp.html">Breakfast package</a></li>					  <li><a href="sp.html">Romance package</a></li>	   	   	   </ul>	  	  	  </div></div><div id="center"></div><div id="i_right"></div></div><!--footer--><div id="footer"></div></body></html>
로그인 후 복사



/*-----------------------------------// 全局样式 //-----------------------------------*/body{ margin:0px; padding:0px; background-image:url(../images/top_bg.jpg); background-repeat: repeat-x;  font:12px/180% Arial,"宋体",Helvetica, sans-serif,Verdana;}/*--- top ---*/#top{ width:100%; height:471px; margin:0px auto;  }/*-----------------------------------// 头部样式 //-----------------------------------*/#header{ width:940px; height:100px; margin:0px auto; overflow: hidden; }#logo{ float:left;}#logon_text{}/*-----------------------------------// 导航样式 //-----------------------------------*/#nav{ margin:0px auto; }#nav_bg{ margin:0px auto; width:940px; height:42px; background:url(../images/nav_right.gif) no-repeat;}.nav_top ul{ margin:0px; padding:0px; list-style-type:none; }.nav_top ul li{ float:left;line-height: 42px; width:120px; text-decoration:none; text-align:center;}.nav_top li a,.nav_top li a:visited{display: block; text-decoration: none;color:#fff; font-weight: bold; font-size:13px;}.nav_top ul li a:hover{background:url(../images/menu_hover.gif) no-repeat;}.menu {background:url(../images/menu_hover.gif) no-repeat; position:absolute;}.menu li{list-style:none; }#banner{ clear:both;margin:0px auto; margin-top:4px; width:940px;}/*--- 主体页面 ---*/#main{ width:980px; height:481px; margin:0px auto; margin-top:3px;  border:1px solid #070707;}/*-----------------------------------// 首页 //-----------------------------------*//*----// 左侧 //----*/#i_left{ float:left; width:210px;}/*----// 居中 //----*/#center{ float:left; width:498px;}/*----// 右侧 //----*/#i_right{float:left; width:210px;}/*footer*/#footer{ width:940px; height:49px; margin:0px auto; border:1px solid #070707;}
로그인 후 복사


回复讨论(解决方案)

你只是让你的导航隐藏,而没有把二级导航的值赋给一级导航。

好吧 我本不想回答的。但是..... 楼主 你把  2级导航的 ul 跟 li 设置的class 是一样的 用一个属性去控制....... 解决的办法很简单 去掉 2级导航的 li的class 或者 更改你会发现原来 一切都那么简单......

记得结贴

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿