Question

我的垂直导航有点问题：

<div class="menu-container">
  <ul>
    <li><a href="/menu1">Menu1</a>
<ul class="sub-menu">
  <li><a href="/menu1/submenu1">Submenu1</a></li>
  <li><a href="/menu1/submenu2">Submenu2</a></li>
  <li><a href="/menu1/submenu3">Submenu3</a></li>
</ul>
</li>
...
</div>

我的CSS：

.menu-container a{
    text-decoration:none;
    color:black;
}
.menu-container a:hover{
    font-weight:bold;
}
.menu-container li:hover > .sub-menu{
    display:block;
}
.sub-menu{
    display:none;
    list-style-type:none;
    padding:6px;
}
ul.sub-menu a{
    text-decoration:none;
}
.menu-container  > ul.sub-menu a{
    display:block;
    background:#ddd;
}
.menu-container  > .sub-menu:active{
    display:block;
    background:#ddd;
}

如果我将鼠标悬停在菜单上，则显示子菜单。现在，另外我想，如果，例如子菜单1处于活动状态，整个子菜单保持开放状态。我可以用CSS实现吗？

电贺， Yab86

Answer 1

以下是使用PHP的示例。您需要在<html>之前创建一个页面变量，如下所示：

<?php $page = 'menu1'; ?> <html> 

将PHP代码置于共享公共主父菜单的每个子菜单页面的顶部。因此，在您的示例中，submenu1, submenu2, and submenu3将具有相同的变量。在此示例中，menu1。这样做，允许您将current的CSS类添加到子菜单ul。

这里有PHP的HTML：

<?php $page = "menu1"?>
<html>
    <head></head>
    <body>
<div class="menu-container">
  <ul>
    <li><a href="/menu1">Menu1</a>
<ul class="sub-menu <?php if($page == 'menu1')echo 'current'; ?>">
  <li><a href="/menu1/submenu1">Submenu1</a></li>
  <li><a href="/menu1/submenu2">Submenu2</a></li>
  <li><a href="/menu1/submenu3">Submenu3</a></li>
</ul>
</li>
      <li><a href="/menu1">Menu2</a>
<ul class="sub-menu <?php if($page == 'menu2')echo 'current'; ?>">
  <li><a href="/menu1/submenu4">Submenu4</a></li>
  <li><a href="/menu1/submenu5">Submenu5</a></li>
  <li><a href="/menu1/submenu6">Submenu6</a></li>
</ul>
</li>
    </ul>
        </div>
</body>
</html>

这里的CSS会让它保持开放状态：

.menu-container li:hover > .sub-menu,
.menu-container .current {
    display:block;
}

当HTML输出到浏览器时，如果您在任何子菜单1,2,3页面上，这实际上就是这样：

<div class="menu-container">
  <ul>
    <li><a href="/menu1">Menu1</a>
<ul class="sub-menu current">
  <li><a href="/menu1/submenu1">Submenu1</a></li>
  <li><a href="/menu1/submenu2">Submenu2</a></li>
  <li><a href="/menu1/submenu3">Submenu3</a></li>
</ul>
</li>
      <li><a href="/menu1">Menu2</a>
<ul class="sub-menu">
  <li><a href="/menu1/submenu4">Submenu4</a></li>
  <li><a href="/menu1/submenu5">Submenu5</a></li>
  <li><a href="/menu1/submenu6">Submenu6</a></li>
</ul>
</li>
    </ul>
</div>

希望这可以帮助你。

css活动子菜单应显示整个子菜单

1 个答案: