Question

我正在尝试从我已有的导航栏创建“悬停下拉列表”导航框。

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="<?php echo $this->url('home') ?>"><?php echo $this->translate('Skeleton Application') ?></a>
            <div class="nav-collapse">
                <ul class="nav">
                    <li><a href="<?php echo $this->url('home') ?>"><?php echo $this->translate('Home') ?></a>
                    </li>
                    <li><a href="<?php echo $this->url('zfcuser') ?>"><?php echo $this->translate('My Account') ?></a>
                        <ul>
                            <li><a
                                href="<?php echo $this->url('zfcuser/change-password') ?>"><?php echo $this->translate('Change Password') ?></a>

                            <li><a href="<?php echo $this->url('zfcuser/change-email') ?>"><?php echo $this->translate('Change Email') ?></a>

                        </ul></li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
</div>

它的CSS会是什么样子？我脑子里有些东西，但在实践中却没有用。

Answer 1

这是一个JSFiddle，其中包含非常少的CSS，可以为您提供下拉功能。

您可以看到this Github了解更多功能，例如淡入和淡出。

Answer 2

如果你想要纯粹的CSS，你可以使用经典的Suckerfish之子：http://htmldog.com/articles/suckerfish/

.nav-collapse, .nav-collapse ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.nav-collapse a {
  display: block;
  width: 10em;
}

.nav-collapse li {
  float: left;
  width: 10em;
}

.nav-colapse li ul {
   position: absolute;
   width: 10em;
   left: -999em;
}

.nav-collapse li:hover ul {
   left: auto;
}

下拉导航框

2 个答案: