下拉菜单而不是导航栏下方只是替换链接。我已经尝试了一切,但找不到解决方案。
@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>
现在你需要将相应的css放到导航栏上方的样式中:
.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;
}