Question

我想使用bootstrap创建一个子导航栏，如下图所示。例如，主导航栏上的“广告”标签可以有两个名为“工作原理”和“我们的合作伙伴”的子页面。当鼠标悬停在“广告”标签上时，我希望在主导航栏下方的子栏中显示“如何工作”和“我们的合作伙伴”链接。我怎样才能做到这一点？在网上尝试了这么多的例子，但仍然无法让它运作

Answer 1

试试这个：

我使用了bootstrap V3.3.6

示例：https://jsfiddle.net/pfss9b28/

<强> HTML：

<div id="navbar">    
    <nav class="navbar navbar-default navbar-static-top" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">About</a></li>

                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Advertising <b class="caret"></b></a> 

                    <ul class="dropdown-menu">
                        <li><a href="#">How It Works</a></li>
                        <li><a href="#">Our Partners</a></li>

                    </ul>
                </li>
                <li><a href="#">Press</a></li>
                <li><a href="#">Contact</a></li>
                 <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Test other child <b class="caret"></b></a> 

                    <ul class="dropdown-menu">
                        <li><a href="#">child 1</a></li>
                        <li><a href="#">child 2</a></li>
                        <li><a href="#">child 3</a></li> 
                        <li><a href="#">child 4</a></li>
                        <li><a href="#">child 5</a></li>                            
                    </ul>
                </li>
           </ul>
        </div>
    </nav>
</div>

<强> CSS：

.navbar-default{
  background:#333;
  color:#fff;
} 

.navbar-default .navbar-nav > li > a{
    color:#fff !important;
}
.navbar-default .navbar-nav li a:hover{text-decoration:underline}
.navbar-default .navbar-nav > li.dropdown > a{position:relative;}
.navbar-default .navbar-nav > li.dropdown:hover > a:after{
    background: #333;
    content: " ";
    display: block;
    height: 15px;
    left: 20px;
    position: absolute;
    top: 100%;
    margin-top:-10px;
    transform: rotate(45deg);
    width: 15px;
    z-index:10001;
}
.navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > .active > a:hover,.navbar-default .navbar-nav > li > a:hover{background:#333;color:#fff;text-decoration:underline;}
.nav > li{
    position:inherit;
} 
.dropdown-menu{
    left: 0;
    min-width: 100% !important;
    position: absolute !important;
    right: 0;
    background:#E1E0DE;
    padding:13px 0px;
}

.dropdown-menu > li{
    display:inline-block;
}
.dropdown-menu > li > a:hover, .dropdown-menu > .active > a:hover {
  text-decoration: underline;
  background:#E1E0DE;
}  
ul.nav li:hover > ul.dropdown-menu {
    display: block;
}

悬停在主导航下方的子导航栏

1 个答案: