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 回答