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

首先，您需要将$scope元素放在.subnav元素中，例如：

li

在你的CSS代码中：

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

DEMO

<强>更新：

也许你想要水平元素：

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

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

DEMO2

最终解决方案：

最终解决问题的解决方案是连接两个类（ul.subnav li{ float: left; }和active）。 Check the DEMO here：）

通过css用子菜单项替换主菜单项？

标记

CSS

1 个答案: