Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by brandonlind2
brandonlind2
7,823 Points

does anyone know why my dropdown menu is showing up to the far left of the nav?

<!DOCTYPE HTML>
<html>
 <head>
  <title>Store| Home</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/main.css">
 </head>
 <body>
  <header>
    <nav>
      <ul>
      <li><a href="index.html">Home</a></li>
      <li class="main-nav">
       <span>Clothies</span>
       <ul class="dropdown-menu">
        <li><a href="womenClothies.html">Women</a></li>
        <li><a href="menClothies.html">Men</a></li>
       </ul>
      </li>
      <li class="main-nav" >
       <span>Accessories</span>
       <ul class="dropdown-menu">
        <li><a href="bags.html">Bags</a></li>
        <li><a href="belts.html">Belts</a></li>
       </ul>
      </li>
     </ul>
    </nav>
  </header>
  <section>
  </section>
  <footer>
  </footer>
 </body>
</html>

html{
    width: 940px;
    margin: auto;
    padding:0;
    }
body{
    background-color: orange;
    max-width: 100%;
    margin: auto;
    padding:0;
    }
header {
    max-width: 100%;
    margin: auto;
    padding:0;
    }
nav {
    max-width: 100%;
    margin: auto;
    padding:0;
    }
nav ul {
    text-align: center;
    max-width: 100%;
    margin: auto;
    padding:0;
    }
nav li {
    list-style: none;
    max-width: 100%;
    margin: auto;
    padding:0;
    }
.main-nav { 
          position: relative;
          }
.dropdown-menu{
    background-color: white;
    display: none;
    position: absolute;
    }
.main-nav:hover .dropdown-menu{
    text-align: center;
    display: block;}
section {
    max-width: 100%;
    margin: auto;
    padding:0;
    }
section ul {
    max-width: 100%;
    margin: auto;
    padding:0;
    }
section li {
    max-width: 100%;
    margin: auto;
    padding:0;
    }

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

1 Answer

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

You'll need to use the child combinator to achieve the effect I think you're looking for.

/* Try using a child combinator (>) here instead of a space. (~Line 42) */ .main-nav:hover > .dropdown-menu { text-align: center; display: block; }

Let me know if that's not what you're looking for. Happy coding! :)

EDIT: Okay! I think I understand you now. Try this instead:

.dropdown-menu {
    background-color: white;
    display: none;
    /* position: absolute; */
}

I think the absolute positioning is messing up your intended layout.

brandonlind2
brandonlind2
7,823 Points

Thanks rydavim, but its still not working for some reason

rydavim
rydavim
18,814 Points

I've edited my answer. I think I now understand what you're looking for. Try that. :)

brandonlind2
brandonlind2
7,823 Points

That centered it like I wanted but now since its not positioned the dropdown menu isnt overlapping other elements and is pushing the other list items when it appears

brandonlind2
brandonlind2
7,823 Points

you're right it looks like position absolute is messing it up, thats odd because that shouldn't be messing it up. All the online examples use that and I cant see a way to create it with out it, because position absolute makes the dropdown menu appear on top of the other elements, so it doesnt push them or at least thats my understdning, but for some odd reason its not working like planned.