多肚脐配置？

Question

我是css的新手，我正在做一个简单的项目，我已经在我的网站上放置了2个导航栏。第一个导航条是默认的。当我点击第一个导航栏中的一个按钮时，第二个按钮就会在上面传递。由于css文件配置不佳，我重写了下面的一个。有些链接不起作用(登录链接)。我怎么把他们分开。我用了两个例子来做这个。

这是css文件。

第一个纳瓦尔巴

.navbar-default {
  background-color: #022436;
  border-color: #2b4156;
}
.navbar-default .navbar-brand {
  color: #fdfdff;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
  color: #029fe5;
}
.navbar-default .navbar-text {
  color: #fdfdff;
}
.navbar-default .navbar-nav > li > a {
  color: #fdfdff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  color: #029fe5;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
  background-color: #022436;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
  color: #fdfdff;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
  color: #029fe5;
  background-color: #2b4156;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {
  background-color: #022436;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  color: #029fe5;
  background-color: #2b4156;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
  color: #029fe5;
  background-color: #2b4156;
}
.navbar-default .navbar-toggle {
  border-color: #2b4156;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background-color: #2b4156;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #fdfdff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #fdfdff;
}
.navbar-default .navbar-link {
  color: #fdfdff;
}
.navbar-default .navbar-link:hover {
  color: #029fe5;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #fdfdff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #029fe5;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #029fe5;
    background-color: #2b4156;
  }
}

这是用于登录css代码的代码

#login-dp{
    min-width: 250px;
    padding: 14px 14px 0;
    overflow:hidden;
    background-color:rgba(255,255,255,.8);
}
#login-dp .help-block{
    font-size:12px    
}
#login-dp .bottom{
    background-color:rgba(255,255,255,.8);
    border-top:1px solid #ddd;
    clear:both;
    padding:14px;
}
#login-dp .social-buttons{
    margin:12px 0    
}
#login-dp .social-buttons a{
    width: 49%;
}
#login-dp .form-group {
    margin-bottom: 10px;
}
.btn-fb{
    color: #fff;
    background-color:#3b5998;
}
.btn-fb:hover{
    color: #fff;
    background-color:#496ebc; 
}
.btn-tw{
    color: #fff;
    background-color:#55acee;
}
.btn-tw:hover{
    color: #fff;
    background-color:#59b5fa;
}
@media(max-width:768px){
    #login-dp{
        background-color: inherit;
        color: #fff;
    }
    #login-dp .bottom{
        background-color: inherit;
        border-top:0 none;
    }
}

这是第二个肚脐(当一个按钮被扣上时，掉在第一个肚脐上)

.navbar-brand { position: relative; z-index: 2; }

.navbar-nav.navbar-left .btn { position: relative; z-index: 2; padding: 4px 20px; margin: 10px auto; transition: transform 0.3s; }

.navbar .navbar-collapse { position: relative; overflow: hidden !important; }
.navbar .navbar-collapse .navbar-left > li:last-child { padding-left: 100px; }

.navbar .nav-collapse { position: absolute; z-index: 1; top: 0; left: 0px; right: 0; bottom: 0; margin: 0; padding-right: 120px; padding-left: 80px; width: 50%; }
.navbar.navbar-default .nav-collapse { background-color: #f8f8f8; }
.navbar.navbar-inverse .nav-collapse { background-color: #222; }
.navbar .nav-collapse .navbar-form { border-width: 0; box-shadow: none; }
.nav-collapse>li { float: left; }

.btn.btn-circle { border-radius: 50px; }
.btn.btn-outline { background-color: transparent; }

.navbar-nav.navbar-left .btn:not(.collapsed) {
    background-color: rgb(111, 84, 153);
    border-color: rgb(111, 84, 153);
    color: rgb(255, 255, 255);
}

.navbar.navbar-default .nav-collapse,
.navbar.navbar-inverse .nav-collapse {
    height: auto !important;
    transition: transform 0.3s;
    transform: translate(0px,-50px);
}

.navbar.navbar-default .nav-collapse.in,
.navbar.navbar-inverse .nav-collapse.in {
    transform: translate(0px,0px);
}


@media screen and (max-width: 767px) {
    .navbar .navbar-collapse .navbar-left > li:last-child { padding-left: 15px; padding-right: 15px; } 

    .navbar .nav-collapse { margin: 7.5px auto; padding: 0; }
    .navbar .nav-collapse .navbar-form { margin: 0; }
    .nav-collapse>li { float: none; }

    .navbar.navbar-default .nav-collapse,
    .navbar.navbar-inverse .nav-collapse {
        transform: translate(-100%,0px);
    }
    .navbar.navbar-default .nav-collapse.in,
    .navbar.navbar-inverse .nav-collapse.in {
        transform: translate(0px,0px);
    }

    .navbar.navbar-default .nav-collapse.slide-down,
    .navbar.navbar-inverse .nav-collapse.slide-down {
        transform: translate(0px,-100%);
    }
    .navbar.navbar-default .nav-collapse.in.slide-down,
    .navbar.navbar-inverse .nav-collapse.in.slide-down {
        transform: translate(0px,0px);
    }
}

如果有人能解释我如何用名字或数字来区分他们，那将是非常感谢的。

这是导航条，两者都包含在标头标记中。

      <div class="navbar-header">

            <a class="navbar-brand" href="#/">Web Name</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="#/"><span class="glyphicon glyphicon-home"> Home</span></a></li>
                <li><a href="#/about"><span class="glyphicon glyphicon-star"> About us</span></a></li>
                <li><a href="#/contact"><span class="glyphicon glyphicon-phone-alt"> Contact us</span></a></li>
                <li><a class="btn btn-default btn-outline btn-circle collapsed" data-toggle="collapse" href="#nav-collapse1" aria-expanded="false" aria-controls="nav-collapse1">Categories</a></li>
            </ul>
            <ul class="collapse nav navbar-nav nav-collapse" id="nav-collapse1"> <!--The 2nd Navbar-->
                <li><a href="#">Action 1</a></li>
                <li><a href="#">Action 2</a></li>
                <li><a href="#">Action 3</a></li>
                <li><a href="#">Action 4</a></li>
            </ul>
            <!--</div>-->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#/signup"><span class="glyphicon glyphicon-user"> Sign up</span></a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-log-in"></span> Log-in <b class="caret" style="color:white"></b></a>
                    <ul id="login-dp" class="dropdown-menu">
                        <li>
                            <div class="row">
                                <div class="col-md-12">
                                    Login via,

                                    <div class="social-buttons">
                                        <a href="#" class="btn btn-fb"><i class="fa fa-facebook"> Facebook</i></a>
                                        <a href="#" class="btn btn-tw"><i class="fa fa-twitter"> Twitter</i></a>
                                    </div>

                                    or

                                    <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
                                        <div class="form-group">
                                            <label class="sr-only" for="inputEmail">E-mail</label>
                                            <input type="email" class="form-control" id="inputEmail" placeholder="E-mail address" required />
                                        </div>
                                        <div class="form-group">
                                            <label class="sr-only" for="inputPassword">Password</label>
                                            <input type="password" class="form-control" id="inputPassword" placeholder="Password" required />
                                            <div class="help-block text-right"><a href="#">Forgot password?</a></div>
                                        </div>
                                        <div class="form-group">
                                            <button type="submit" class="btn btn-primary btn-block"> Sign in </button>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" /> Keep me logged-in
                                            </label>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>

            </ul>
        </div>
    </div>
</nav>

​

Answer 1

不太确定你指的是第二个肚脐还是肚脐内的下拉菜单。你构建肚脐的方式，我假设你想要一个肚脐和一个下垂的肚脐。

这是一个工作版本，http://plnkr.co/edit/EDogb0HQhRzqOlaLng7J希望，这就是你想要达到的目标。

您的代码中缺少了一些东西。我已经为移动崩溃添加了按钮菜单。

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

您想要插入第二个在第一个创建下拉列表。

<ul class="nav navbar-nav navbar-left">
    <li>
        <a href="#/">
            <span class="glyphicon glyphicon-home"> Home</span>
        </a>
    </li>
    <li>
        <a href="#/about">
            <span class="glyphicon glyphicon-star"> About us</span>
        </a>
    </li>
    <li>
        <a href="#/contact">
            <span class="glyphicon glyphicon-phone-alt"> Contact us</span>
        </a>
    </li>
    <li class="dropdown">
        <a class="btn btn-default btn-outline btn-circle dropdown-toggle" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">Categories</a>
        <ul class="dropdown-menu" id="nav-collapse2">
          <!--The 2nd Navbar-->
        <li>
            <a href="#">Action 1</a>
        </li>
        <li>
            <a href="#">Action 2</a>
        </li>
        <li>
            <a href="#">Action 3</a>
        </li>
        <li>
            <a href="#">Action 4</a>
        </li>
    </ul>
    </li>
</ul>