0

既に持っているナビゲーション バーから「ホバー時のドロップダウン」ナビゲーション ボックスを作成しようとしています。

<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 はどのようになりますか? 頭の中に何かがあるのですが、実際にはうまくいきません。

4

2 に答える 2

1

これは、ドロップダウン機能を取得するための非常に最小限の CSS を含むJSFiddleです。

フェードインやフェードアウトなど、その他の機能については、この Githubを参照してください。

于 2012-10-15T04:52:36.167 に答える
0

純粋に CSS が必要な場合は、古典的な Son of 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;
}
于 2012-10-15T01:20:10.690 に答える