Html和CSS二级下拉列表_Html_Css_Menu

Html和CSS二级下拉列表

html css menu

Html和CSS二级下拉列表,html,css,menu,Html,Css,Menu,所以，我粗略地看了几个问题，但试图使用相同的想法，但无法使其工作？希望你们中的一个能在这里帮助我我基本上是想用一个提供的模板创建一个二级下拉菜单，但这个模板没有内置，当我使用下面的代码时，菜单会显示出来，然后你会看到下面的子弹头链接，看起来很搞笑。我试图让它的风格正确的模板，但我不确定如何实现这一点？以下是我已经尝试过的代码 HTML普通代码 <body class="homepage"> <header id="header"> <nav class="na

所以，我粗略地看了几个问题，但试图使用相同的想法，但无法使其工作？希望你们中的一个能在这里帮助我

我基本上是想用一个提供的模板创建一个二级下拉菜单，但这个模板没有内置，当我使用下面的代码时，菜单会显示出来，然后你会看到下面的子弹头链接，看起来很搞笑。我试图让它的风格正确的模板，但我不确定如何实现这一点？以下是我已经尝试过的代码

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></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脚本中包含这样的代码

.navbar-nav>ul {
        margin-left: 35px;
        padding-bottom: 28px;
    }

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

如果说您的导航是固定宽度，您可以使用下面的代码和/或我使用您提供的代码创建的附件。我希望有帮助

这是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>

如果您的导航是固定宽度，您可以使用下面的代码和/或我使用您提供的代码创建的附件。我希望有帮助

这是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位置属性设置为“相对”

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

从那里出发？这是我遇到的唯一示例代码，可以找到更多信息，但它应该可以帮助您开始在当前项目中构建它。祝你好运

尝试将父级

CSS position属性设置为“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; }

从那里出发？这是我遇到的唯一示例代码，可以找到更多信息，但它应该可以帮助您开始在当前项目中构建它。祝你好运

谢谢你的回复，我已经添加了代码，它仍然显示为“红色”的子弹头链接在网站的另一边。你知道为什么会这样吗？红子弹在第一层还是第二层？我更新了fiddle和代码，删除了第二级标题项目符号。项目符号位于第二级，因此从技术上讲它是有效的，尽管样式没有显示，只是显示为红色文本，项目符号位于网站的最右侧（在定价链接下）。我甚至看不到第二级链接2，因为它隐藏在身体部分下面。我只能看到单词“second”，但它周围没有方框或任何东西，只有文本。我已经用你的更新更新了代码，仍然有相同的结果。谢谢你的帮助。谢谢你的回复，我已经添加了代码，它仍然在网站的另一边显示为“红色”的要点链接。你知道为什么会这样吗？红子弹在第一层还是第二层？我更新了fiddle和代码，删除了第二级标题项目符号。项目符号位于第二级，因此从技术上讲它是有效的，尽管样式没有显示，只是显示为红色文本，项目符号位于网站的最右侧（在定价链接下）。我甚至看不到第二级链接2，因为它隐藏在身体部分下面。我只能看到单词“second”，但它周围没有方框或任何东西，只有文本。我已经用你的更新更新了代码，仍然有相同的结果。谢谢你在这方面的帮助。

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