I am trying to add a drop down menu to my html, but the links arent being hidden
ID: 3888579 • Letter: I
Question
I am trying to add a drop down menu to my html, but the links arent being hidden maybe it is how I setup the divs. Thanks for the help
<!DOCTYPE html>
<html lang="en">
<style>
body{
background-image: url("blah.jpg");
position: relative;
background-size: 100% auto;
background-repeat: no-repeat;
margin:0;
padding: 0;
}
nav{
float: right;
padding-top: 1%;
padding-right: 2%;
color: white;
}
nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav li {
float: left;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav li a:hover {
color: #333;
}
#fLinks{
text-align: center;
padding-left: -1%;
}
#footer{
/*background: #aaa; */
padding: 1em;
color: white;
text-align: center;
}
h1{
text-align: center;
color: white;
padding: 22.5%;
}
h6{
margin: 5px;
text-align: center;
}
ul{
list-style-type: none;
}
li {
display: inline;
}
#fLeft ul{
padding-right: 30px;
}
#fRight ul{
padding-right: 30px;
}
/*social media icons--facebook,twitter,linkedin,instagram,skype, rss */
.fa { /* sizing */
padding: 5px;
font-size: 20px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-instagram {
background: #125688;
color: white;
}
.fa-skype {
background: #00aff0;
color: white;
}
</style>
<head>
<title>Welcome</title><!-- <meta http-equiv="refresh" content="5"> -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="home.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div id="background">
<nav>
<ul>
<li>
<a href="default.php">Home</a>
</li>
<li>
<a href="about.asp">About</a>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">Coding Projects</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
<li>
<a href="resume.asp">Resume</a>
</li>
<li>
<a href="resume.asp">Contact</a>
</li>
<li>
<div class="box">
<div class="container-1">
<span class="icon"><i class="fa fa-search"></i></span> <input id="search" placeholder="Search..." type="search">
</div>
</div>
</ul>
</nav>
<h1>Test</h1>
<div id="footer">
<div id="fLeft">
<ul id="fLinks">
<li>
<a href="privacy.php">Privacy Policy</a>
</li>
<li>
<a href="sitemap.php">Sitemap</a>
</li>
</ul>
</div>
<div id="fMiddle">
<h6>©</h6>
</div>
<div id="fRight">
<ul>
<li>
<a class="fa fa-facebook" href="#"></a>
</li>
<li>
<a class="fa fa-linkedin" href="#"></a>
</li>
<li>
<a class="fa fa-instagram" href="#"></a>
</li>
<li>
<a class="fa fa-skype" href="#"></a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Explanation / Answer
<!DOCTYPE html>
<html lang="en">
<style>
body{
background-image: url("blah.jpg");
position: relative;
background-size: 100% auto;
background-repeat: no-repeat;
margin:0;
padding: 0;
}
nav{
float: right;
padding-top: 1%;
padding-right: 2%;
color: white;
}
nav ul{
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
float: left;
}
nav li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav li a:hover {
color: #333;
}
#fLinks{
text-align: center;
padding-left: -1%;
}
#footer{
/*background: #aaa; */
padding: 1em;
color: white;
text-align: center;
}
h1{
text-align: center;
color: white;
padding: 22.5%;
}
h6{
margin: 5px;
text-align: center;
}
ul{
list-style-type: none;
}
li {
display: inline;
}
#fLeft ul{
padding-right: 30px;
}
#fRight ul{
padding-right: 30px;
}
/*social media icons--facebook,twitter,linkedin,instagram,skype, rss */
.fa { /* sizing */
padding: 5px;
font-size: 20px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-instagram {
background: #125688;
color: white;
}
.fa-skype {
background: #00aff0;
color: white;
}
.makehide{
display: none;
}
.dp:hover{
display: block;
}
</style>
<head>
<title>Welcome</title><!-- <meta http-equiv="refresh" content="5"> -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="home.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="background">
<nav>
<ul>
<li>
<a href="default.php">Home</a>
</li>
<li>
<a href="about.asp">About</a>
</li>
<li>
<div class="dropdown">
<a class="dropdown-toggle dropbtn" type="button" data-toggle="dropdown">Coding Projects
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="resume.asp">Resume</a>
</li>
<li>
<a href="resume.asp">Contact</a>
</li>
<li>
<div class="box">
<div class="container-1">
<span class="icon"><i class="fa fa-search"></i></span> <input id="search" placeholder="Search..." type="search">
</div>
</div>
</ul>
</nav>
<h1>Test</h1>
<div id="footer">
<div id="fLeft">
<ul id="fLinks">
<li>
<a href="privacy.php">Privacy Policy</a>
</li>
<li>
<a href="sitemap.php">Sitemap</a>
</li>
</ul>
</div>
<div id="fMiddle">
<h6>©</h6>
</div>
<div id="fRight">
<ul>
<li>
<a class="fa fa-facebook" href="#"></a>
</li>
<li>
<a class="fa fa-linkedin" href="#"></a>
</li>
<li>
<a class="fa fa-instagram" href="#"></a>
</li>
<li>
<a class="fa fa-skype" href="#"></a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
PLEASE RATE and upvote the answer
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.