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

我发现这个教程http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu也许它可以帮助你，但我认为你需要调整html和css：S

希望它可以帮到你

Answer 2

您必须将hover的photogallery1.php，photogallery2.php等等类属性添加为值。

<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来保存菜单状态。

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

2 个答案: