ナビゲーションバーウィンドウの私はいくつかの左のタブと右の内の1つのドロップダウンメニューバーをデザインしたい

のサイズを変更します。私は、ブートストラップナビゲーションバーを使用していると私はクラスのナビゲーションバーの右を使用していた右に移動します。ウィンドウのサイズを変更するにしながら、それが次の行になります。しかし、私は、同じ行のすべてのメニューバーをしたいです。ナビゲーションバーウィンドウの私はいくつかの左のタブと右の内の1つのドロップダウンメニューバーをデザインしたい

<div class="service-list"> 
      <div class="container-fluid"> 
       <nav class="col-lg-12 col-md-12 col-sm-12 col-xs-12 navbar service-navbar navbar-default"> 
        <div class="navbar-header pl-15"> 
         <a class="navbar-brand nav-service-header" id="Accesss">Quick Access</a> 
        </div> 
        <ul class="nav nav-tabs"> 
         <li class="dropdown pull-right tabdrop"><a href="#" data-toggle="dropdown" class="dropdown-toggle"><i class="icon-align-justify"></i> <b class="caret"></b></a><ul class="dropdown-menu"><li><a data-toggle="tab" href="#tab9">Section 9</a></li></ul></li> 
         <li class="active"><a data-toggle="" href="#tab1">Section 1</a></li> 
         <li><a data-toggle="tab" href="#tab2">Section 2</a></li> 
         <li><a data-toggle="tab" href="#tab3">Section 3</a></li> 
         <li><a data-toggle="tab" href="#tab4">Section 4</a></li> 
         <li><a data-toggle="tab" href="#tab5">Section 5</a></li> 
        </ul> 
        <ul class="nav navbar-nav navbar-right" id="lastTab"> 
         <li class="pull-right tabdrop dropup mt-5"> 
          @Html.EJ().DropDownList("KIds_Program_List").Datasource((IEnumerable<EIS.SchoolArc.DataTransferObjects.ServiceProvider.Service>)Model.ServiceList).DropDownListFields(f => f.Text("Name").Value("Id").ID("Class_Program_List")).ShowCheckbox(false).WatermarkText("More") 
         </li> 
        </ul> 


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

おかげ

出典

2016-06-16 user5109490

あなたのCSSスタイルがあなたのポストに欠けていると思うjsfiddleを作成したり、簡単にdebugging..iためcodenpenください。 –

CSS：

body { 
    margin: 0; 
    padding: 0; 
    background: #ccc; 
} 

.nav ul { 
    list-style: none; 
    background-color: #444; 
    text-align: center; 
    padding: 0; 
    margin: 0; 
} 

.nav li { 
    font-family: 'Oswald', sans-serif; 
    font-size: 1.2em; 
    line-height: 40px; 
    text-align: left; 
} 

.nav a { 
    text-decoration: none; 
    color: #fff; 
    display: block; 
    padding-left: 15px; 
    border-bottom: 1px solid #888; 
    transition: .3s background-color; 
} 

.nav a:hover { 
    background-color: #005f5f; 
} 

.nav a.active { 
    background-color: #aaa; 
    color: #444; 
    cursor: default; 
} 

/* drop Menus */ 
.nav li li { 
    font-size: .8em; 
} 

@media screen and (min-width: 650px) { 
    .nav li { 
    width: 130px; 
    border-bottom: none; 
    height: 50px; 
    line-height: 50px; 
    font-size: 1.4em; 
    display: inline-block; 
    margin-right: -4px; 
    } 

    .nav a { 
    border-bottom: none; 
    } 

    .nav > ul > li { 
    text-align: center; 
    } 

    .nav > ul > li > a { 
    padding-left: 0; 
    } 

    /* Drop Menus */ 
    .nav li ul { 
    position: absolute; 
    display: none; 
    width: inherit; 
    } 

    .nav li:hover ul { 
    display: block; 
    } 

    .nav li ul li { 
    display: block; 
    } 
}

HTML：

<body> 
    <header> 
    <div class="nav"> 
     <ul> 
     <li><a href="#">Link1</a></li> 
     <li><a href="#">drop1</a> 
      <ul> 
      <li><a href="#">Item1</a></li> 
      <li><a href="#">Item2</a></li> 
      <li><a href="#">Item3</a></li> 
      </ul> 
     </li> 
     <li><a class="active" href="#">Home</a></li> 
     <li><a href="#">Drop2</a> 
      <ul> 
      <li><a href="#">Item1</a></li> 
      <li><a href="#">Item2</a></li> 
      <li><a href="#">Item3</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Link2</a></li> 
     </ul> 
    </div> 
    </header> 
</body>

は、私は、これはあなたが探していたものだった願っています。

出典

2016-09-28 01:52:23

ナビゲーションバーウィンドウの私はいくつかの左のタブと右の内の1つのドロップダウンメニューバーをデザインしたい

答えて

関連する問題