css - 如何更改 Bootstrap 下拉列表的形式？

Question

我需要更改下拉列表的形式。

我有什么：http: //jsfiddle.net/gnEAe/5/

这是我想做的说明：http: //imgur.com/PI0j9

我用这个css改变了边界：

 .nav
 .dropdown-menu {
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}

Answer 1

对 JSFiddle 有一点麻烦，并想出了这个。由于睡眠不足，这并不令人惊奇，但这是一个开始。希望这对您有所帮助。

CSS：

.container {
  border-bottom: 1px solid #FFF;
}
ul.nav li.dropdown:hover ul.dropdown-menu {  
  display:block;    
  margin: 0px 0px 0px 10px;
  border-bottom: 1px solid #000;  
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-top: none;
  border-top-left-radius:0px;
}
.navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
  border:none;   
}
.navbar .nav > li > a {
  margin: 0px 10px;
  border-top: 1px solid #FFF;  
  border-left: 1px solid #FFF;
  border-right: 1px solid #FFF;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  color: #000;
  text-shadow:none;
}
.navbar .nav > li > a:hover, .navbar .nav > li > a:active{
  border-top: 1px solid #000;  
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-top-right-radius: 5px;  
  border-top-left-radius: 5px;
  color: #000;
  text-shadow:none;
}
a.menu:after, .dropdown-toggle:after {
    content: none;
}

HTML：

<div class="navbar ">
     <div class="container">
        <ul class="nav pull-left">

          <li><a href="index.html"><b>Home</b></a></li>

          <li class="dropdown">
            <a href="#" class="dropdown-togle" data-toggle="dropdown">
            <b>Download</b>
            <b class="caret"></b></a>
          <ul class="dropdown-menu">
          <li><a href="#">Link</a></li>
            <li><a href="#">Link2</a></li>
            </ul>
            </li>
          <li><a href="faq.html"><b>F.A.Q.</b></a></li>
          <li><a href="#" onclick="openWin()"><b>Support</b></a>
          </li>     
        </ul>
    </div>     

这里也是一个用于实时预览的 JSFiddle 版本。

http://jsfiddle.net/KckU3/1/

问候

Answer 2

这是一个似乎可以为您提供所需样式的设置：

.nav-tabs a { 
    color: #000; 
}
.nav-tabs a:hover {
    color: #444;
}
.nav-tabs {
    border-bottom: none;
}
.nav-tabs .dropdown-menu {
    margin: -1px 0 0;
    z-index: 999;
    -webkit-border-top-right-radius: 4px;
       -moz-border-radius-topright: 4px;
            border-top-right-radius: 4px;
}
.nav-tabs > li > a {
    position: relative;
    z-index: 1000;
}
.nav-tabs > li > a:hover {
    border-color: transparent;
    background: transparent;
}
.nav-tabs > li.dropdown.open > a {
    border-color: #000 #000 #fff;
    background: #fff;
}
.dropdown-menu {
    border-color: #000;
}
.nav li.dropdown.open .caret, .nav li.dropdown.open.active .caret, .nav li.dropdown.open a:hover .caret {
    border-top-color: #000;
    border-bottom-color: #000;
}

http://jsfiddle.net/JR9sd/

获得正确的菜单轮廓的关键是调整z-index选项卡和下拉菜单的选项卡，使选项卡位于其下拉菜单的顶部。通过border-bottom-color将活动选项卡设为白色，您可以有效地隐藏下拉菜单的顶部边框。