Navbar subsection floating left when my navbar is centered

#1

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!

#2

So many questions about this, why do you add divs:

              <div class="nav-content">
                <div class="nav-sub">

what value does it have?

absolute elements position relative to non static parents, but all parents of nav-content are static? Why?

nav-content is a block, block show below each other. Given nav-main takes up all the space, the nav-content will position itself below nav-main on the left hand side (blocks always sit on the left side by default)

#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.