点击后打开子菜单的水平菜单

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

希望它可以帮助你