點擊後打開子菜單的水平菜單

Question

我用子菜單創建了一個水平菜單。在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」按鈕將突出顯示。

任何幫助都會很棒。謝謝你在前進

Answer 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來保存菜單狀態。

Answer 2

我發現這個教程http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu也許它可以幫助你，但我想你會需要ajust的HTML和CSS：S

希望它可以幫助你