Question

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

以下是我想要制作的内容：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设置为白色，可以有效地隐藏下拉列表的顶部边框。

如何更改Bootstrap下拉表单？

2 个答案: