首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

二级领航为嘛显示不了

2013-01-11 
二级导航为嘛显示不了?无法二级导航无法覆盖到之上!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transit

二级导航为嘛显示不了?
   无法二级导航无法覆盖到之上二级领航为嘛显示不了

<!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" width="292" height="102"/></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" />
</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 或者 更改你会发现原来 一切都那么简单......
[解决办法]
记得结贴

热点排行