I have looked at some answers regarding similar issues, but I cannot seem to incorporate this into my own code. I understand that absolute position and inline block do not work with one another because the element is taken out of flow through absolute position.
I have been trying to make my dropdown menu in my navigation bar appear like a normal dropdown menu. Upon toying around to find a solution to this problem, relative positioning calls up the entire navigation bar down alongside the actual dropdown menu (Please run the code to see, terrible explanation). I would appreciate if someone could show me what needs to be done here, as I have spent about an hour trying to figure out what to do.
If you have an extra moment as well, I also am trying to figure out how to center the elements within this navigation bar. This is not of priority, however.
Thank you so much,
John (I have about 1 week of HTML/CSS experience)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<style>
.font {
font-family: "open sans";
}
/* Initial Nav Bar */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
left: 0;
margin-top: 0;
top: 0;
position: absolute;
}
/* Where buttons float */
li {
float: left;
}
/* Hover color */
.active {
background-image: -webkit-linear-gradient(top, black 0%, #193c5a 100%);
background-image: -o-linear-gradient(top, black 0%, #193c5a 100%);
background-image: linear-gradient(to bottom, black 0%, #193c5a 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}
li a:hover, .dropdown:hover .dropbtn {
background-image: -webkit-linear-gradient(top, black 0%, #193c5a 100%);
background-image: -o-linear-gradient(top, black 0%, #193c5a 100%);
background-image: linear-gradient(to bottom, black 0%, #193c5a 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}
.dropdown-content a:hover {
background-image: -webkit-linear-gradient(top, black 0%, #193c5a 100%);
background-image: -o-linear-gradient(top, black 0%, #193c5a 100%);
background-image: linear-gradient(to bottom, black 0%, #193c5a 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar-default {
background-image: -webkit-linear-gradient(top, #7eb0db 0%, #2a6496 100%);
background-image: -o-linear-gradient(top, #7eb0db 0%, #2a6496 100%);
background-image: linear-gradient(to bottom, #7eb0db 0%, #2a6496 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}
.wrapper-border-radius {
text-align: center;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<div class="wrapper-border-radius">
<ul class="navbar-default">
<li><a class="font active" href="#">Home</a></li>
<li class="dropdown navbar-default">
<a class = "font" href="#" class="dropbtn">Classes</a>
<div class="dropdown-content navbar-default">
<a class = "font" href="physics.html">Physics</a>
<a class = "font" href="math.html">Math</a>
<a class = "font" href="humanities.html">Humanities</a>
<a class = "font" href="stem.html">STEM</a>
<a class = "font" href="STW.html">STW</a>
<a class = "font" href="spanish.html">Spanish</a>
<a class = "font" href="computerscience.html">Computer Science</a>
</div>
<li><a class = "font" class="tend" href="contactme.html">About Me</a></li>
<li><a class = "font" href="stemproject.html">STEM Project</a></li>
<li><a class = "font" class="tend"href="soccer.html">Sports</a></li>
<li><a class = "font" class="tend" href="contactme.html">Contact Me</a></li>
</ul>
</div>
</html>Here you go hope this helps
body{margin:0;}
.font {
font-family: "open sans";
}
/* Initial Nav Bar */
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: auto;
left: 50%;
margin-top: 0;
top: 0;
position: absolute;
transform: translateX(-50%);
}
.navbar {
white-space: nowrap;
}
.navbar li {
display: inline-block;
}
/* Hover color */
.active {
background-image: -webkit-linear-gradient(top, black 0%, #193c5a 100%);
background-image: -o-linear-gradient(top, black 0%, #193c5a 100%);
background-image: linear-gradient(to bottom, black 0%, #193c5a 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}
li a:hover, .dropdown:hover .dropbtn {
background-image: -webkit-linear-gradient(top, black 0%, #193c5a 100%);
background-image: -o-linear-gradient(top, black 0%, #193c5a 100%);
background-image: linear-gradient(to bottom, black 0%, #193c5a 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}
.dropdown-content a:hover {
background-image: -webkit-linear-gradient(top, black 0%, #193c5a 100%);
background-image: -o-linear-gradient(top, black 0%, #193c5a 100%);
background-image: linear-gradient(to bottom, black 0%, #193c5a 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar-default, .navbar-default-content {
background-image: -webkit-linear-gradient(top, #7eb0db 0%, #2a6496 100%);
background-image: -o-linear-gradient(top, #7eb0db 0%, #2a6496 100%);
background-image: linear-gradient(to bottom, #7eb0db 0%, #2a6496 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}
.wrapper-border-radius {
text-align: center;
width: 100%;
height: 50px;
margin: 0;
padding: 0;
background-image: -webkit-linear-gradient(top, #7eb0db 0%, #2a6496 100%);
background-image: -o-linear-gradient(top, #7eb0db 0%, #2a6496 100%);
background-image: linear-gradient(to bottom, #7eb0db 0%, #2a6496 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<div class="wrapper-border-radius">
<ul class="navbar-default navbar">
<li><a class="font active" href="#">Home</a></li>
<li class="dropdown navbar-default">
<a class = "font" href="#" class="dropbtn">Classes</a>
<div class="dropdown-content navbar-default-content">
<a class = "font" href="physics.html">Physics</a>
<a class = "font" href="math.html">Math</a>
<a class = "font" href="humanities.html">Humanities</a>
<a class = "font" href="stem.html">STEM</a>
<a class = "font" href="STW.html">STW</a>
<a class = "font" href="spanish.html">Spanish</a>
<a class = "font" href="computerscience.html">Computer Science</a>
</div>
<li><a class = "font" class="tend" href="contactme.html">About Me</a></li>
<li><a class = "font" href="stemproject.html">STEM Project</a></li>
<li><a class = "font" class="tend"href="soccer.html">Sports</a></li>
</ul>
</div>
</html>