通过 css 将主菜单项替换为子菜单项？

Question

我写了一个简单的垂直菜单，例如：

Home  Information  Info

我想知道是否可以在项目处于活动状态时用它自己的子列表替换列表元素。我正在尝试在项目处于活动状态时将 Home 替换为 Sub1 和 Sub2，以便如下修改导航：

Sub1 Sub2 | Information  Info

有没有办法通过 css 实现此目的？

标记

<ul class="nav">
    <li><a href="#">Home</a></li>

        <ul class="subnav">
            <li><a href="#">Home Sub 1</a></li>
            <li><a href="#">Home Sub 2</a></li>
        </ul>

    <li><a href="#">Informations</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS

ul.nav {
  float:right;

}

ul.nav > li {
  border:1px solid #333;
  display:block;
  float: left;
  line-height:38px;
  margin:0;
  padding:0;
  position:relative;
  padding:20px
}


ul.subnav {
    display:none;
}

Fiddle

Answer 1

首先，您需要将 .subnav 元素放入 li 元素中，例如：

<ul class="nav">
    <li class="with-subnav"><a href="#">Home</a>
        <ul class="subnav">
            <li><a href="#">Home Sub 1</a></li>
            <li><a href="#">Home Sub 2</a></li>
        </ul>
    </li>
    <li><a href="#">Informations</a></li>
    <li><a href="#">Contact</a></li>
</ul>

在您的 CSS 代码中：

ul.nav > li.with-subnav:hover > a{
    display:none;
}

ul.nav li:hover ul.subnav{
    display:block;
}

DEMO

更新:

也许您希望元素水平放置：

ul.subnav li{
    float: left;
}

DEMO2

最终解决方案：

最终解决问题的方法是连接类（active 和 with-subnav）。 Check the DEMO here:)

通过 css 将主菜单项替换为子菜单项？

Replacing main menu item by submenu items via css?

html

css

navigation

标记

CSS