how can I make my drop down menu not collapse after the 1st list item?

Question

I have a drop down menu with 3 sub list items in every tab, there's a problem were the drop down menu disappears when you move the mouse to the second drop down menu list item. Any idea on how to fix this?

<header>
   <h1 class="main-title">This Is a Test</h1>
   <nav>
    <ul>
     <li class="main-nav home-page active"><a href="index.html">HOME</a></li>
     <li class="main-nav">
      <span> Content 1 </span>
      <ul class="sub-nav">
       <li><a href="page1.html">Page 1</a></li>
       <li><a href="page2.html">Page 2</a></li>
       <li><a href="page3.html">Page 3</a></li>
      </ul>
    </li>
     <li class="main-nav">
      <span> Content 2 </span>
      <ul class="sub-nav">
       <li><a href="page4.html">Page 4</a></li>
       <li><a href="page5.html">Page 5</a></li>
       <li><a href="page6.html">Page 6</a></li>
      </ul>
     </li>
     <li class="main-nav">
      <span> Content 3 </span>
      <ul class="sub-nav">
       <li><a href="page7.html">Page 7</a></li>
       <li><a href="page1.html">Page 8</a></li>
       <li><a href="page1.html">Page 9</a></li>
      </ul>
     </li>
    </ul>
   </nav>
  </header>
  <section>
  </section>
  <footer>
  </footer>
 </body>
</html>

html{
    font-size: 1em;
}

body {
    margin: auto;
    padding: 0;
    max-width: 100%;
}

header {
    margin: auto;
    padding: 0;
    max-width: 100%;
}

.main-title {
    margin: 15px 0 15px 5%;
    color: orange;
    font-size: 4em;
}

nav {
    color: white;
    background-color: orange;
    margin: auto;
    padding: 0;
    max-width: 100%;
}

nav li > span, nav  a{
    font-size: 1.5em;
}
nav ul {
    max-height: 100%;
    text-align: right;
    max-width: 100%;
    margin: auto;
    padding: 0 5% 0 0;
}

nav li {
    max-height: 100%;
    border-style: solid;
    border-width: 0 1px 0 0;
    border-color: rgba(0,0,0,.1);
    display: inline-block;
    list-style: none;
    margin: 3px;
    padding: 2px;
    max-width: 100%;
}

.main-nav:hover{
    background-color: #ffcc33;
}

nav a {
    text-decoration: none;
}
nav a {
    color: orange;
}
.home-page a:visited {
    color: white;
}

nav a:visited {
 color: orange;
}

.active {
    background-color: #ffcc33;
}
.main-nav {
    position: relative;

}

.sub-nav li:hover {
    background-color: rgba(0,0,0,.1);
}

.sub-nav{
    position: absolute;
    display: none;
}

.main-nav:hover .sub-nav {
    display: block;
}
section {
    margin: auto;
    padding: 0;
    max-width: 100%;
}

footer {
    margin: auto;
    padding: 0;
    max-width: 100%;
}

Answer 1 · 2016-04-25T06:24:24Z

April 25, 2016 6:24am

By giving your list items the position: absolute property, it takes them out of the normal document flow and they do not contribute to the size of their parent element. The parent then only overlaps the first item, and once the mouse goes below that, it is no longer hovering over the parent which is a condition of the CSS rule that exposes the list.

As a quick fix, you could do something like adding: height: 300%; to the .sub-nav CSS. But that won't be sufficient if you add more items to any of the main categories. Ideally you would re-work your layout so normal flow can be preserved and the container sizes will always be adequate for their contents.

One good technique you might consider for this kind of layout would be flexbox.

Welcome to the Treehouse Community

Looking to learn something new?

brandonlind2

brandonlind2

how can I make my drop down menu not collapse after the 1st list item?

1 Answer

Steven Parker

Steven Parker