ホームページ >ウェブフロントエンド >htmlチュートリアル >セカンダリナビゲーションが表示されないのはなぜですか? _html/css_WEB-ITnose
セカンダリナビゲーションが表示されないのはなぜですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:17:221342ブラウズ
セカンダリ ナビゲーションをカバーすることは不可能です
<!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 クラスを同じに設定し、それを制御する属性を使用しています...解決策は非常に簡単です。第 2 レベルのナビゲーションの li クラスを削除するか、変更します。すべてがとてもシンプルであることに気づくでしょう...
結び目を結ぶことを忘れないでください
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。