Question

我有一个带有此代码的导航栏。

* {
   margin:0px;
   padding:0px;
}
#bs-example-navbar-collapse-1 ul {
   list-style:none; 
}
#bs-example-navbar-collapse-1 ul li { 
   width:150px;
   line-height:50px;
   text-align: center ;
   float:left;
   color:grey;
   font-size:14px;
   position:relative;
}
#bs-example-navbar-collapse-1 ul ul {
   display:none; 
}
#bs-example-navbar-collapse-1 ul li:hover > ul { 
   display:block;
}
#bs-example-navbar-collapse-1 ul ul ul {
   margin-left:150px;
   top:0px;
   position:absolute;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="page-top" class="index">
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top">Naar boven</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a class="page-scroll" href="#page-top">Home</a></li>
                    <!-- FROM HERE APPLE STARTS  -->
                    <li> Apple
                        <ul>
                            <li><a href="">Apple iphone 7 plus</a></li>
                            <li><a href="">Apple iphone 7</a></li>
                            <li><a href="">Apple iphone 6s plus</a></li>
                            <li><a href="">Apple iphone 6s</a></li>
                            <li><a href="">Apple iphone 6 plus</a></li>
                            <li><a href="">Apple iphone 6</a></li>
                            <li><a href="">Apple iphone SE</a></li>
                            <li><a href="">Apple iphone 5S</a></li>
                            <li><a href="">Apple iphone 5C</a></li>
                            <li><a href="">Apple iphone 5</a></li>
                            <li><a href="">Apple iphone 4S</a></li>
                            <li><a href="">Apple iphone 4</a></li>
                            <li><a href="">Apple iphone 3GS</a></li>
                            <li><a href="">Apple iphone 3G</a></li>
                        </ul>
                    </li>
                    <!-- FROM HERE samsung STARTS  -->
                    <li><a class="page-scroll" href="">samsung</a></li>
                    <!-- FROM HERE huawei STARTS  -->
                    <li><a class="page-scroll" href=".">huawei</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

但我希望它像这样一个

http://www.gsmreparatiecentrum.nl/

当您将鼠标悬停在上述网站的苹果上时，您会得到3个下拉列表。我的问题是“如何获得该下拉菜单？”

Answer 1

* {
  margin:0px;
  padding:0px;
}
#bs-example-navbar-collapse-1 ul {
  list-style:none; 
}
#bs-example-navbar-collapse-1 ul li { 
  width:150px;
  line-height:50px;
  text-align: center ;
  float:left;
  color:grey;
  font-size:14px;
  position:relative;
}
#bs-example-navbar-collapse-1 ul ul {
  display:none; 
}
#bs-example-navbar-collapse-1 ul li:hover > ul { 
  display: block;
  width: 600px;
  float: left;
}

#bs-example-navbar-collapse-1 ul ul ul {
  margin-left:150px;
  top:0px;
  position:absolute;
}
#bs-example-navbar-collapse-1 ul li ul li {
  width: auto;
  line-height: 50px;
  text-align: left;
  float: none;
  color: grey;
  font-size: 14px;
  position: relative;
}
#bs-example-navbar-collapse-1 ul li:hover > ul div {
  width: 33%;
  float: left;
}
h2 {
  text-align: left;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="page-top" class="index">
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria- expanded="false">
	                <span class="sr-only">Toggle navigation</span>
	                <span class="icon-bar"></span>
	                <span class="icon-bar"></span>
	                <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top">Naar boven</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a class="page-scroll" href="#page-top">Home</a></li>
                    <!-- FROM HERE APPLE STARTS  -->
                    <li> Apple
                        <ul>
                            <div>
                                <h2>title</h2>
                                <li><a href="">Apple iphone 7 plus</a></li>
                                <li><a href="">Apple iphone 7</a></li>
                                <li><a href="">Apple iphone 6s plus</a></li>
                                <li><a href="">Apple iphone 6s</a></li>
                                <li><a href="">Apple iphone 6 plus</a></li>
                                <li><a href="">Apple iphone 6</a></li>
                            </div>
                            <div>
                                <h2>title</h2>
                                <li><a href="">Apple iphone SE</a></li>
                                <li><a href="">Apple iphone 5S</a></li>
                                <li><a href="">Apple iphone 5C</a></li>
                                <li><a href="">Apple iphone 5</a></li>
                                <li><a href="">Apple iphone 4S</a></li>
                            </div>
                            <div>
                                <h2>title</h2>
                                <li><a href="">Apple iphone 4</a></li>
                                <li><a href="">Apple iphone 3GS</a></li>
                                <li><a href="">Apple iphone 3G</a></li>
                            </div>
                        </ul>
                    </li>
                    <!-- FROM HERE samsung STARTS  -->
                    <li><a class="page-scroll" href="">samsung</a></li>
                    <!-- FROM HERE huawei STARTS  -->
                    <li><a class="page-scroll" href=".">huawei</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

如何给我的导航栏2边？

1 个答案: