Html和CSS第二级下拉

时间：2015-11-09 13:50:32

标签： html css menu

所以我对几个问题进行了粗略的审视，但试图使用相同的想法并且无法使其发挥作用？希望你们中的一个人能够在这里帮助我吗？

我基本上尝试使用提供的模板创建二级下拉菜单，该模板没有内置，当我使用下面的代码时，菜单显示然后你有下面的子弹头链接看起来热闹。我试图通过模板使其风格正确，但我不确定如何实现这一目标？以下是我已经尝试过的代码。

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;
    }

但不太确定？任何帮助都会很棒，谢谢！

2 个答案:

答案 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但它应该可以帮助您开始构建当前项目。祝好运！

相关问题
最新问题