Question

我想要下拉菜单，如此site menas第一个下拉菜单在margin-top 100px中可见，并且转换到顶部。我使用下面的代码，但不适合我。抱歉我的英语不好。

<nav class="navbar navbar-default transparent row" role="navigation">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>

                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse navbar-ex1-collapse">
                            <ul class="nav navbar-nav">
                                <li><a href="">menu1</a></li>
                                <li class="divider-vertical"></li>
                                <li class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown"> menu2</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">menu1</a></li>
                                        <li><a href="#">menu2</a></li>
                                        <li><a href="#">menu3</a></li>
                                    </ul>
                                </li>
                            </ul>

                        </div><!-- /.navbar-collapse -->
                    </nav>

.navbar-nav li .dropdown-menu{
    width: 160px;
    border-top: 4px solid #90cc00;
    border-radius: 0;
    font-weight: bold;
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    margin-top: 90px;
}

.navbar-nav li:hover .dropdown-menu{
    margin-top: 0px;
}

Answer 1

要达到预期效果，请使用以下选项

HTML：

<nav class="navbar navbar-default transparent row" role="navigation">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>

                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse navbar-ex1-collapse">
                            <ul class="nav navbar-nav">
                                <li><a href="">menu1</a></li>
                                <li class="divider-vertical"></li>
                                <li class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown"> menu2</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">menu1</a></li>
                                        <li><a href="#">menu2</a></li>
                                        <li><a href="#">menu3</a></li>
                                    </ul>
                                </li>
                            </ul>

                        </div><!-- /.navbar-collapse -->
                    </nav>

CSS：

.navbar-nav li .dropdown-menu{
    width: 160px;

    margin-top: 90px;
    visibility:hidden;
}

.navbar-nav li:hover .dropdown-menu{
    margin-top: 0px;
    visibility:visible;
      border-top: 4px solid #90cc00;
    border-radius: 0;
    font-weight: bold;
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    }

JS： $（ '下拉列表 '）addClass（' 开放'）;

Codepen - http://codepen.io/nagasai/pen/XKYKgG

CSS转换引导程序导航栏下拉菜单

1 个答案: