Home >Web Front-end >HTML Tutorial >Why can't the secondary navigation be displayed? _html/css_WEB-ITnose
Why can't the secondary navigation be displayed? _html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 12:17:221367browse
Unable to cover the secondary navigation
<!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;} Reply to the discussion (solution )
You just hide your navigation without assigning the value of the secondary navigation to the primary navigation.
Well, I didn’t want to answer. But... the poster, you set the class of ul and li in the second-level navigation to be the same and use an attribute to control it... The solution is very simple. Remove the class of li in the second-level navigation or change your You will find that everything is so simple...
Remember to tie the knot
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Ask for advice on CSS text centering_html/css_WEB-ITnoseNext article：Ask for advice on CSS text centering_html/css_WEB-ITnose