html - 下拉导航框

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

这是一个具有极少 CSS的JSFiddle ，可为您提供下拉功能。

你可以在这个 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;
}