所以我对几个问题进行了粗略的审视,但试图使用相同的想法并且无法使其发挥作用?希望你们中的一个人能够在这里帮助我吗?
我基本上尝试使用提供的模板创建二级下拉菜单,该模板没有内置,当我使用下面的代码时,菜单显示然后你有下面的子弹头链接看起来热闹。我试图通过模板使其风格正确,但我不确定如何实现这一目标?以下是我已经尝试过的代码。
HTML NORMAL CODE
<body class="homepage">
<header id="header">
<nav class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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" href="index.html"><i class="fa fa-bolt"></i> SnappySites</a></a> </div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about-us.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="contact-us.html">Contact</a></li>
</ul>
</div>
</div>
<!--/.container-->
</nav>
<!--/nav-->
</header>
<!--/header-->
我想要实现的HTML代码
<body class="homepage">
<header id="header">
<nav class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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" href="index.html"><i class="fa fa-bolt"></i> SnappySites</a></a> </div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about-us.html">About</a></li>
<li><a href="services.html">Services</a>
<ul>
<li><a>Second level link 1</a></li>
<li><a>Second level link 2</a></li>
</ul>
</li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="contact-us.html">Contact</a></li>
</ul>
</div>
</div>
<!--/.container-->
</nav>
<!--/nav-->
</header>
<!--/header-->
CSS代码
/*************************
*******Header******
**************************/
.navbar>.container .navbar-brand {
margin-left: 0;
}
.navbar-brand {
padding: 0;
margin: 0;
}
.navbar {
border-radius: 0;
margin-bottom: 0;
background: #151515;
padding: 15px 0;
padding-bottom: 0;
}
.navbar-nav {
margin-top: 12px;
}
.navbar-nav>li {
margin-left: 35px;
padding-bottom: 28px;
}
.navbar-inverse .navbar-nav > li > a {
padding: 5px 12px;
margin: 0;
border-radius: 3px;
color: #fff;
line-height: 24px;
display: inline-block;
}
.navbar-inverse .navbar-nav > li > a:hover {
background-color: #3498db;
color: #fff;
}
.navbar-inverse {
border: none;
}
.navbar-inverse .navbar-brand {
font-size: 30px;
line-height: 50px;
font-weight: 600;
color: #fff;
}
.navbar-inverse .navbar-brand .fa {
color: #3498db;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
background-color: #333;
color: #fff;
}
我知道需要在CSS脚本中有这样的代码......
.navbar-nav>ul {
margin-left: 35px;
padding-bottom: 28px;
}
但不太确定?任何帮助都会很棒,谢谢!
答案 0 :(得分:0)
假设您的导航是固定宽度,您可以使用下面的代码和/或我使用您提供的代码创建的附件fiddle。我希望它有所帮助!
这是HTML位
<header id="header">
<nav class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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" href="index.html"><i class="fa fa-bolt"></i> SnappySites</a></a> </div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about-us.html">About</a></li>
<li><a href="services.html">Services</a>
<ul>
<li><a>Second level link 1</a></li>
<li><a>Second level link 2</a></li>
</ul>
</li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="contact-us.html">Contact</a></li>
</ul>
</div>
</div>
<!--/.container-->
</nav>
<!--/nav-->
</header>
和CSS
.navbar>.container .navbar-brand {
margin-left: 0;
}
.navbar-brand {
padding: 0;
margin: 0;
}
.navbar {
border-radius: 0;
margin-bottom: 0;
padding: 15px 0;
padding-bottom: 0;
}
.navbar-nav {
margin-top: 12px;
}
.navbar-nav>li {
margin-left: 35px;
padding-bottom: 28px;
list-style: none; /*Added*/
display: inline; /*Added*/
}
.navbar-nav li ul /*Added*/
{
display: none;
position: relative;
list-style: none: /* removes the bullets */
}
.navbar-nav li:hover ul /*Added*/
{
display: block;
position: absolute;
margin-left: 200px
}
.navbar-inverse .navbar-nav > li > a {
padding: 5px 12px;
margin: 0;
border-radius: 3px;
line-height: 24px;
display: inline-block;
}
.navbar-inverse .navbar-nav > li > a:hover {
background-color: #3498db;
color: #fff;
}
.navbar-inverse {
border: none;
}
.navbar-inverse .navbar-brand {
font-size: 30px;
line-height: 50px;
font-weight: 600;
color: #fff;
}
.navbar-inverse .navbar-brand .fa {
color: #3498db;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
background-color: #333;
color: #fff;
}
答案 1 :(得分:0)
尝试将父<li>
CSS位置属性设置为'relative'。
ul {
list-style: none;
padding: 0;
margin: 0;
background: #1bc2a2;
}
ul li {
display: block;
position: relative;
float: left;
background: #1bc2a2;
}
li ul { display: none; }
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover { background: #2c3e50; }
从那里开始?这只是我遇到的示例代码,可以找到更多信息here但它应该可以帮助您开始构建当前项目。祝好运!