0

サブメニュー付きの水平メニューを作成しました。jsfiddleでは、サブメニューが100％で正しく機能していないのか、ローカルでは機能していないのかわかりません。作業リンクは次のとおりです：http：//jsfiddle.net/IronFeast/g8MDP/

そしてここにコードがあります：

<ul id="navbar">
<li><a href="index.php">Home</a></li>
<li><a href="#">Gallery</a>
<ul class="submenu">
   <li><a href="photogallery1.php">Photogallery 1</a></li>
   <li><a href="photogallery2.php">Photogallery 2</a></li>
   <li><a href="photogallery3.php">Photogallery 3</a></li>
</ul>         
</li>
<li><a href="events.php">Events</a></li>
<li><a href="#">Blog</a>
<ul class="submenu">
   <li><a href="personal.php">Personal</a></li>
   <li><a href="dev.php">Dev</a></li>
</ul> 
</li>
<li><a href="#">About</a>
<ul class="submenu">
   <li><a href="page1.php">Page 1</a></li>
   <li><a href="page2.php">Page 2</a></li>
</ul>
</li>

CSS：

#navbar {
 background-color: #4E78B4;
 position: absolute;
 text-align: center;
 margin: 0;
 padding-bottom: 7px;
 padding-top: 7px;
 float: left;
 left: 10px;
 width: 940px;    
 font-size: 14px;
 z-index: 100;
}

#navbar li {
 list-style: none;
 float: left; 
 color: #E9EBDE;
 padding-left: 24px;
 padding-right: 4px;
 z-index: 100;
}

#navbar li a {
 display: inline;
 padding-top: 7px;
 padding-bottom: 7px;
 padding-right: 8px;        
 padding-left: 8px;
 text-transform: uppercase;
 text-decoration: none; 
 font-weight: bold; 
 color: #ffffff;
 z-index: 100;
 text-align: center;
}

#navbar ul li a {
 display: block;
 padding-top: 6px;
 padding-bottom: 3px;
 padding-right: 8px;
 padding-left: 8px;
 text-decoration: none;
 z-index: 100;
}

#navbar li a:hover {
 color: #000000;
 background-color: #ffffff;
 padding-right: 8px;        
 padding-left: 8px;
 z-index: 100;
}

#navbar li ul{
 display: none;  
 background-color: #41B6DC;
 z-index: 100;
}

#navbar li:hover ul, #navbar li.hover ul {
 position: absolute;
 display: block;
 left: 0;
 width: 940px;
 margin: 0;
 padding: 0;            
 z-index: 100;
 margin-top: 7px;
}

#navbar li:hover li, #navbar li.hover li {
 float: left; 
 z-index: 100;
}

#navbar li:hover li a, #navbar li.hover li a {
 color: #000; 
 z-index: 100;
}

#navbar li li a:hover {
 color: #4E78B4; 
 z-index: 100;
}

「ギャラリー」の上にマウスを置くとサブメニューが開きますが、「フォトギャラリー1」をクリックするとそのページに移動しますが、残念ながらそのページにいるとメニューが閉じます。

「ギャラリー」が強調表示され、サブメニューが開いたままになり、「フォトギャラリー1」ボタンも強調表示されます。

どんな助けでも素晴らしいでしょう。前もって感謝します

4

2 に答える 2

1

私はこのチュートリアルを見つけましたhttp://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu多分それはあなたを助けることができますが、私はあなたがhtmlとcssを調整する必要があると思います：S

お役に立てば幸いです

于 2012-10-19T11:29:40.013 に答える
1

photogallery1.php、photogallery2.phpなどのクラス属性をhover値として追加する必要があります。

<ul id="navbar">
    <li><a href="index.php">Home</a></li>
    <li class="<?php echo $_COOKIE["hover"]; ?>"><a href="#">Gallery</a>
    <ul class="submenu">
       <li><a href="photogallery1.php" class="<?php echo $_COOKIE["selected"]; ?>">Photogallery 1</a></li>
       <li><a href="photogallery2.php">Photogallery 2</a></li>
       <li><a href="photogallery3.php">Photogallery 3</a></li>
    </ul>         
    ...
    ...
</ul>

また、CSSを追加します。

.selected {
    background-color: #ffffff;
}

メニューの状態を保存するには、Cookieを使用することをお勧めします。

于 2012-10-19T11:36:59.750 に答える