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 Daniel Beale
Daniel Beale
1,681 Points

Positioning of dropdown menu (HTML, CSS, Jquery)

Sorry if this is a bit of a mess but this is my first project and I think I've got myself in a bit of a mess. I don't have anyone in real life to refer to and I've spent hours trying to fix it! When you click on the 'Menu' item the dropdown appears to the bottom left of the Nav element, not under the 'Menu' item.

The code is below and I've uploaded to http://www.danielbeale.co.uk/donalberto/ if it helps?

<nav>
         <ul class="menu">
          <li><a href="index.html">Home</a></li>
          <li><a href="contact.html">Contact</a></li>
          <li class="dropdown">
              <a href="#" class="dropdown-toggle" >Menu<b class="caret"></b>       `enter code here`</a>
            <ul class="dropdown-menu" style="display:none">
              <li><a href="menu.html">Evening</a></li>
              <li><a href="lmenu.html">Lunch</a></li>
            </ul>
          </li>
        </ul>
    </nav>  

nav {
    display: block;
    float: right;
    padding: 5px;
}

.menu {
    display:inline;
}

nav a{
    text-align: center;
    font-family: playball;
    font-size: 1.5em;
    color: black;
    text-decoration: none;
    padding: 5px;
}

.menu a:hover {
    color: darkred; 
}

.dropdown-toggle {

}

.dropdown-menu {
    position:absolute;
    background-color: white;
    float: right;
}

I'd be really grateful if someone could help - i'm losing my mind!

Joshua Young
Joshua Young
3,349 Points

Thats funny. I was working on it inside of inspect element to see if I could help. All of a sudden it started working. You must have fixed it while I was playing with it. =-)

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Hi Daniel Beale, just letting you know I put your code into code blocks to make it easier to read and for others to help.

Sounds like maybe you figured it out though?

1 Answer

Codin - Codesmite
Codin - Codesmite
8,600 Points

Here is a basic version of what you are trying to do, you should be able to adapt this to your code.

HTML

<nav>
  <ul>
    <li> Home </li>
    <li class="main"> Menu
      <ul class="sub">
        <li> Evening </li>
        <li> Lunch </li>
      </ul>
      <li> Contact </li>
    </li>
  </ul>
</nav>

CSS

nav {
  float: right;
}

nav ul li {
  display: inline;
  padding: 0px 20px;
  float: left;
}

.main {
  position: relative;
}

.sub {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  padding: 0;
  list-style-type: none;
}

.main:hover .sub {
  display: block;
}

http://codepen.io/anon/pen/ojbpOx