时间戳

首页 > 解决方案 > 如何在我当前的导航样式中添加下拉菜单

html - 如何在我当前的导航样式中添加下拉菜单

问题描述

我需要在我的“联系人”部分添加一个下拉列表，我想知道是否有人可以帮助我。我试过使用：https ://www.w3schools.com/howto/howto_css_dropdown_navbar.asp

但以我目前的风格，它并不是 100% 正常工作。有没有其他方法可以在不添加“按钮”属性的情况下实现“联系人”部分的下拉菜单？

<nav>
  <div id="logo"><img src="images/logow.png"></div>
  <label for="drop" class="toggle"><i class="fas fa-bars"></i></label>
  <input type="checkbox" id="drop"/>
  <ul class="menu">
      <li><a href="index.html">Home</a></li>
      <li><a href="pricing.html">Pricing</a></li>
      <li><a href="faq.html">Faq</a></li>
      <li><a href="contact.html">Contact</a></li>
      </div> 
  </ul>
</nav>

.toggle, [id=drop] {
  display: none;
}
nav { 
margin:0;
padding: 0;
  background-color: black;

}
#logo {
display: block;
  padding: 10px 0 0 30px;
  width: 10%;
float: left;
}
nav img{
  width: 200px;
}
nav:after {
  content: "";
  display: table;
  clear: both;
}
nav ul {
  float: right;
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 32px;
}
nav ul li {
  display: inline-block;
  float: left;
}
nav a {
  display: block;
  padding: 14px 20px;
  color: white;
  font-size: 17px;
  text-decoration: none;
}

nav a:hover {
color: #FF4E00;
}

@media (max-width :768px) {
#logo {
  display: block;
  padding: 20px 0 10px 0;
  width: 100%;
  text-align: center;
  float: none;
}
nav {
  margin: 0;
}
nav ul {
  float: left;
      width: 100%;
      text-align: center;
}
.toggle + a,
.menu {
  display: none;
}
.toggle {
  display: block;
  background-color: white;
  padding:14px 20px;    
  color:black;
  font-size:17px;
  text-decoration:none;
  border:none;
      cursor: pointer;
      text-align: center;
}
[id^=drop]:checked + ul {
  display: block;
}
nav ul li {
  display: block;
  width: 100%;
  }

}

标签： htmlcss

解决方案

我认为有必要添加按钮...检查我的代码我已经通过单击“运行代码片段”然后“查看完整页面”为您的代码进行了一些更改。

  .toggle,
[id=drop] {
  display: none;
}

nav {
  margin: 0;
  padding: 0;
  background-color: black;
}

#logo {
  display: block;
  padding: 10px 0 0 30px;
  width: 10%;
  float: left;
}

nav img {
  width: 200px;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {
  float: right;
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 32px;
}

nav ul li {
  display: inline-block;
  float: left;
}

nav a {
  display: block;
  padding: 14px 20px;
  color: white;
  font-size: 17px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 20px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

nav a:hover {
  color: #FF4E00;
}

@media (max-width :768px) {
  #logo {
    display: block;
    padding: 20px 0 10px 0;
    width: 100%;
    text-align: center;
    float: none;
  }
  nav {
    margin: 0;
  }
  nav ul {
    float: left;
    width: 100%;
    text-align: center;
  }
  .toggle+a,
  .menu {
    display: none;
  }
  .toggle {
    display: block;
    background-color: white;
    padding: 14px 20px;
    color: black;
    font-size: 17px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    text-align: center;
  }
  [id^=drop]:checked+ul {
    display: block;
  }
  nav ul li {
    display: block;
    width: 100%;
  }
<body>

  <nav>
    <div id="logo"><img src="images/logow.png"></div>
    <label for="drop" class="toggle"><i class="fas fa-bars"></i></label>
    <input type="checkbox" id="drop" />
    <ul class="menu">
      <li><a href="index.html">Home</a></li>
      <li><a href="pricing.html">Pricing</a></li>
      <li><a href="faq.html">Faq</a></li>
      <li>
        <div class="dropdown">
          <button class="dropbtn">Contact 
      <i class="fa fa-caret-down"></i>
    </button>
          <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
      </li>
      </div>
    </ul>
  </nav>
</body>

推荐阅读