Maison >interface Web >tutoriel HTML >二级导航为嘛显示不了？_html/css_WEB-ITnose
二级导航为嘛显示不了？_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 12:17:221346parcourir
无法二级导航无法覆盖到之上
<!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 或者 更改你会发现原来 一切都那么简单......
记得结贴
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：求教CSS文字居中问题_html/css_WEB-ITnoseArticle suivant：关于DIV浮动到最上面和最下面_html/css_WEB-ITnose