html - 下拉菜单没有延伸到导航栏下方,只是替换了原来的链接

标签 html css drop-down-menu

下拉菜单不是导航栏下方,而是替换了链接。我已经尝试了一切,但找不到解决方案。

@charset "UTF-8";
body {
  margin: 0px;
  padding: 0px;
}


/*Top Nav*/

.toptitle {
  background-color: #7acc68;
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

.toptitle p {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  font-family: 'Source Code Pro', monospace;
  font-size: 35px;
  color: black;
  font-weight: bold;
}

.navbar {
  background-color: #7acc68;
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

.navbar a {
  float: left;
  font-size: 25px;
  color: black;
  margin: 0px;
  padding: 10px;
  font-family: 'Source Code Pro', monospace;
}

.navbar a:hover {
  background-color: #c9c9c9;
}

.dropdown {
  float: left;
  overflow: hidden;
  position: relative;
  display: block;
  color: rebeccapurple;
}

.dropdown a {
  margin: 0px;
  padding: 10px;
  overflow: hidden;
}

.dropdown:hover .dropdownContent {
  display: block;
}

.dropdownContent {
  display: none;
  background-color: #c9c9c9;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  position: absolute;
  z-index: 1;
}

.dropdownContent a {
  display: block;
}


/*Bottom nav*/

.bottombar {
  background-color: #7acc68;
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}


/*Main Content*/

.maincontent {
  background-color: #d3d3d3;
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  color: black;
  font-family: 'Roboto', sans-serif;
}
<!--Fonts---Roboto,Source Code Pro--->
<link href="https://fonts.googleapis.com/css?family=Roboto|Source+Code+Pro" rel="stylesheet">
<!--Font Awesome--->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<div class="toptitle">
  <p> Jacob Tufts</p>
</div>
<div class="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Programmer</a>
  <div class="dropdown">
    <a href="#">Computer Guy<i class="fa fa-caret-down"></i></a>
    <div class="dropdownContent">
      <a href="#">General <b>IT</b></a>
      <a href="#">Networking</a>
    </div>
  </div>
  <div class="dropdown">
    <a href="#">Technician<i class="fa fa-caret-down"></i></a>
    <div class="dropdownContent">
      <a href="#">Audio</a>
      <a href="#">Lighting</a>
      <a href="#">projection</a>
    </div>
  </div>
  <div class="dropdown">
    <a href="#">Videographer<i class="fa fa-caret-down"></i></a>
    <div class="dropdownContent">
      <a href="#">Editing</a>
      <a href="#">Video</a>
    </div>
  </div>
</div>
<div class="maincontent">
  <p>gegeheheh</p>
</div>
<div class="bottombar">
  <p>egegege</p>
</div>

最佳答案

首先你要选择合适的html标签,还要知道它们的正确用途。最好将每个导航栏链接都写在列表项中,因为每个元素都是列表的集合,或者您也可以将链接放在 div 中。可能,您还必须知道如何控制和设置 html 的样式。下面的代码可以正常工作,试试这个:

您的 html 代码:

<div class="navbar">
   <ul>
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">About</a>
      </li>
      <li class="dropdown">
        <a href="#">Programmer <i class="fa fa-caret-down"></i> </a>
        <ul class="dropdown-content">
          <li><a href="#">General <b>IT</b></a></li>
          <li><a href="#">Networking</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#">Technician <i class="fa fa-caret-down"></i> </a>
        <ul class="dropdown-content">
          <li><a href="#">Audio</a></li>
          <li><a href="#">Lighting</a></li>
          <li><a href="#">Lighting</a></li>
        </ul>
      </li>
    </ul>
</div>

现在你需要在导航栏上方添加相应的样式样式:

.navbar {
   background-color: 7acc68;
   width: 100%; 
}  
.navbar ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}
.navbar ul li {
  display: inline-block;
}
.navbar ul li a {
  display: inline-block;
  color: #ffffff;
  padding: 8px 10px;
}
.navbar ul li a i {
  padding-left: 5px;
  float: right;
}
.navbar ul li.dropdown {
  position: relative;
}
.navbar ul li.dropdown .dropdown-content {
  background: #000000;
  position: absolute;
  min-width: 150px;
  left: 0;
  top: 100%;
  display: none;
}
.navbar ul li.dropdown .dropdown-content li {
  display: block;
}
.navbar ul li.dropdown .dropdown-content li a {
    display: block;
}
.navbar ul li:hover > a {
  background-color: #c9c9c9;
  color: #000000;
}
.navbar ul li.dropdown:hover .dropdown-content {
  display: block;
}

关于html - 下拉菜单没有延伸到导航栏下方,只是替换了原来的链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52247914/

相关文章:

javascript - 刷新页面而不重新加载它?

HTML/CSS - 即使使用 <br> 标签,元素也保持在同一行

html - 不可调整的表格单元格

html - 是否有可能获得 CSS 的 HTML 属性?

html - 如何制作全 Angular Bootstrap 轮播 slider ?

html - 如何使用 CSS 设置其他 div 的 div 中心?

html - 需要两个 div 才能正确排列

asp.net-mvc - mvc 填充下拉列表

asp.net - 将选定值设置为 UserControl 中的 DropDownList

javascript - Asp.net 的自动完成下拉列表