Hi There,
My navigation was working perfectly until I added a subsection, which appears when you hover over the ‘Real Estate’ section in my navbar,
I’ve made it so it pops up at the right height, but I’m unsure as to how to get it to come up underneath ‘Real Estate’ for some reason it floats left,
I’ll post my code below,
<!doctype.html>
<html>
<div class="nav-main">
<ul>
<li><a href="index.html" class="nav-item">Home</a></li>
<li>
<a href="real-estate.html" class="nav-item"><span>Real Estate</span></a>
<div class="nav-content">
<div class="nav-sub">
<ul>
<li><a href="real-estate/videography.html">Videography</a></li>
<li><a href="real-estate/photography.html">Photography</a></li>
<li><a href="real-estate/floorplans.html">Floor & Siteplans</a></li>
</ul>
</div>
</div>
</li>
<li><a href="business.html" class="nav-item">Business</a></li>
<li><a href="lifestyle.html" class="nav-item">Lifestyle</a></li>
<li><a href="pricing.html" class="nav-item">Pricing</a><li>
<li><a href="about.html" class="nav-item">About</a></li>
<li><a href="contact.html" class="nav-item">Contact</a></li>
</ul>
</div>
<html>
css
.nav-main {
width: 100%;
background-color: transparent;
height: 30px;
color: white;
overflow: hidden;
margin: 0 auto;
}
.nav-main ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.nav-main ul li {
margin: 0;
padding: 0;
}
.nav-main {
text-decoration: none;
display: block;
color: #FFF;
font-family: 'Work Sans';
text-align: center;
}
.nav-main > ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.nav-main > ul > li {
display: inline;
}
.nav-item {
text-align: center;
height: 30px;
color: white;
text-decoration: none;
margin-right: 20px;
}
.nav-item li {
display: inline;
}
.nav-item a {
display: inline-block;
}
.nav-item:hover {
opacity: 0.7;
}
.nav-item:hover ~ .nav-content {
max-height: 400px;
-webkit-transition:max-height 0.4s ease-in;
-moz-transition:max-height 0.4s ease-in;
transition:max-height 0.4s ease-in;
}
.nav-content {
position: absolute;
top: 150px;
overflow: hidden;
background-color: transparent;
max-height: 0px;
}
.nav-content a {
color: white;
text-decoration: none;
}
.nav-content a:hover {
opacity: 0.7;
}
.nav-sub {
padding: 0px;
}
.nav-sub ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.nav-sub a {
display: inline-block;
float: left;
}
.nav-sub a:hover {
opacity: 0.7;
}
@media only screen and (max-width: 500px) {
.nav-main {
font-size: 12px;
width: 100%;
margin-right: 0px;
}
.nav-item {
margin-right: 8px;
}
}
@media only screen and (min-width: 500px) and (max-width: 580px) {
.nav-main {
font-size: 15px;
width: 100%;
margin-right: 0px;
}
.nav-item {
margin-right: 8px;
}
}
Any help would be greatly appreciated!