Heim >Web-Frontend >HTML-Tutorial >二级导航为嘛显示不了？_html/css_WEB-ITnose
二级导航为嘛显示不了？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:17:221342Durchsuche
无法二级导航无法覆盖到之上
<!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 或者 更改你会发现原来 一切都那么简单......
记得结贴
Stellungnahme：
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
Vorheriger Artikel：求教CSS文字居中问题_html/css_WEB-ITnoseNächster Artikel：关于DIV浮动到最上面和最下面_html/css_WEB-ITnose