I am trying to make a simple srop down menu for a certain option on my navbar, h
ID: 3750519 • Letter: I
Question
I am trying to make a simple srop down menu for a certain option on my navbar, however when I drop down I get this (figured it'd be best to show a picture).
How can I get this to go away?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animalpedia</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<header>
<h1 id="mainhead">Animalpedia</h1>
<h2 id="mainSubHead">Your Wildlife Resource</h2>
<img src="images/bkg-banner.png">
</header>
<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#animals.html">Animals</a>
<ul>
<li><a href="index.html">Endangered</a></li>
<li><a href="about.html">At Risk</a></li>
<li><a href="animals.html">Extinct</a></li>
</ul>
</li>
<li><a href="activities.html">Activities</a></li>
<li><a href="contact.html">Contact</a></li>
</div>
<body>
<article>
<div>
<section id="intro">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</div>
</article>
</body>
</html>
CSS.
/*-----------NAVIGATION--------------*/
.nav{
width: 100%;
position: absolute;
}
ul{
list-style-type: none;
background-color: #baf2d8;
padding: 0;
text-align: center;
margin: 0px auto;
overflow: hidden;
width: 755px;
}
ul li{
float: left;
line-height: 20px;
font-size: 20px;
display: inline-block;
width: 150px;
}
ul li a{
text-decoration: none;
border-style: inset;
border-color: #33c4a7;
background-color: #2ca58d;
color: #fff;
display: block;
padding: 5px 45px;
}
ul li a:hover{
background-color: #8bbeb2;
border-color: #94ccbf;
color: #104c30;
text-shadow: 2px 2px #ccc;
}
ul li ul li{
float: none;
display: none;
width: 150px;
}
ul li ul li a{
padding-left: 0px;
padding-right: 0px;
}
ul li:hover ul li{
display: block;
Animalpedia Your Wildlife Resource About Animals Endangered At Risk Extinct Home Activities Contact usmod tempor iam, quis Lorem ipsum dol incididunt ut laboc nostrud exercitat... Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culp qui officia deserunt mollit anim id est laborum. consequat.Explanation / Answer
Use below given csv code , also you can specify color according to your need..
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
background-color: #baf2d8;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #33c4a7;;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
@media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.