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!

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

brandonlind2
brandonlind2
7,823 Points
Posted by brandonlind2
brandonlind2
7,823 Points

Can someone explain why my CSS drop down menu isn't working?

<!DOCTYPE HTML>
<html>
<head>
 <title>Test</title>
 <meta charset="utf-8">
 <link rel="stylesheet" href="css/normalize.css">
 <link rel="stylesheet" href="css/main.css">
</head>
<body>
 <header>
  <h1> TEST </h1>
  <nav>
   <ul>
    <li class="main-nav"><a href="index.html">Home</a></li>
    <li class="main-nav">
    <span>Content 1</span>
     <ul class="dropdown-menu">
      <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 class="main-nav">
     <span>Content 2</span>
     <ul class="dropdown-menu">
      <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="dropdown-menu">
      <li><A href="page7.html">page 7</a></li>
      <li><a href="page8.html">page 8</a></li>
      <li><a href="page9.html">page 9</a></li>
     </ul>
    </li
    </li>
   </ul>
  </nav>
  <hr>
 </header>
 <section>
 </section>
 <footer>
 </footer>
</body>
</html>

html{margin: auto;
     width: 940;
     padding: 0;
     font-size: 1em;}
* {box-sizing: border-box;}



img {max-width: 100%;}

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

header {max-width: 100%;
        margin: auto;
        padding: 10px 0 0 0 ;}
/******************************* dropown menu
.main-nav {
    position: relative;
}

.dropdown-menu {
    display: none;
}       
.dropdown-menu:hover {
        z-index: 1;
    position absolute;
    display: block;
}
*****************/  
header h1 {text-align: center;
           padding: 3px 0 0 10px;}

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

nav a {text-decoration: none;}

nav a:visited {color: black;}

nav ul {text-align: center;
        padding: 0 0 0 0;}


nav li {max-width: 100%;
        padding: 5px 3px;
        margin: auto;
        list-style: none;
        text-align: center;
        border-radius: 8px;
        border: 1px solid #000000;
        font-weight: bold;}

nav li:hover {box-shadow: inset 0 0 10px 1px rgba(0,0,0,.4);}

section { max-width: 100%;
          margin: auto;
          padding: 0;
          text-align: center;
          }

section p { max-width: 100%
           margin: 0 15%;
           text-align: center;}

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

3 Answers

David Morisset
David Morisset
13,323 Points
David Morisset
David Morisset
13,323 Points

My mistake, the span has nothing to do with it. Try this :

.main-nav {
    position: relative;
}

.dropdown-menu {
    z-index: 1;
    position absolute;
    display: none;
}

.main-nav:hover .dropdown-menu {
    display: block;
}

Also, i didn't notice but all your dropdown menu code appears as commented out in your CSS because there are no trailing and leading / after and before all the stars. I don't know if it's done on purpose.

brandonlind2
brandonlind2
7,823 Points
brandonlind2
brandonlind2
7,823 Points

yeah I commented it on purpose so it would be easier to see. yeah Thanks that made it work, I wonder why it didnt work with the span element i would have been hovering over the span so I'm a bit confused as to why the first didnt work

David Morisset
David Morisset
13,323 Points
David Morisset
David Morisset
13,323 Points

Cool !

The span doesn't work because it's a sibling, not a parent. I believe (but didn't try yet) that the following selector would do the job :

        span:hover + .dropdown-menu
brandonlind2
brandonlind2
7,823 Points
brandonlind2
brandonlind2
7,823 Points

it being a sibling makes sense, thanks man you helped me out alot

David Morisset
David Morisset
13,323 Points
David Morisset
David Morisset
13,323 Points

Glad to see it helped. All the best.

David Morisset
David Morisset
13,323 Points
David Morisset
David Morisset
13,323 Points

The property display: none that you have on your .dropdown-menu takes it out of the screen, that's why you can't hover over it. Instead, you should hover over the parent element and target the dropdown. It should look like this :

.dropdown-menu {
    z-index: 1;
    position absolute;
    display: none;
}

.main-nav span:hover .dropdown-menu {
    display: block;
}

Hope this helps

brandonlind2
brandonlind2
7,823 Points
brandonlind2
brandonlind2
7,823 Points

its still not working for some reason

.main-nav {
    position: relative;
}

.dropdown-menu {
    z-index: 1;
    position absolute;
    display: none;
}

.main-nav span:hover .dropdown-menu {
    display: block;
}