3

ドロップダウンの形式を変更する必要があります。

私が持っているもの：http：//jsfiddle.net/gnEAe/5/

これが私が作りたいイラストです：http：//imgur.com/PI0j9

私はこのcssで境界線を変更しました：

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

2 に答える 2

3

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/

よろしく

于 2012-07-03T07:40:04.443 に答える
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タブの を白にすることで、ドロップダウンの上端を効果的に非表示にできます。

于 2012-07-17T16:33:41.273 に答える