Heim > Web-Frontend > HTML-Tutorial > 二级导航为嘛显示不了?_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 12:17:22
Original
1340 Leute haben es durchsucht

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

<!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>
Nach dem Login kopieren



/*-----------------------------------// 全局样式 //-----------------------------------*/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;}
Nach dem Login kopieren


回复讨论(解决方案)

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

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

记得结贴

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage