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

Did I center this drop down menu the right way or is there a better way?

I was having a issue were my dropdown menu was show up to far left and not under the nav list items when they were hovered over. I added a left and right property of -50% the the dropdwon menu. Did I solve this the right way or is there better way?

 <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>

.main-nav { 
          position: relative;
          }
.dropdown-menu{
    background-color: white;
    display: none;
    position: absolute;
    right: -50%;
   left: -50%;
    }
.main-nav:hover .dropdown-menu{
    text-align: center;
    display: block;}
rydavim
rydavim
18,814 Points

Doesn't this styling make it difficult to click on the hover menu items?

3 Answers

David Sheridan
David Sheridan
8,579 Points
David Sheridan
David Sheridan
8,579 Points

Thats a bit of a hacky way of centering objects. Try Margin: auto;

David Sheridan
David Sheridan
8,579 Points
David Sheridan
David Sheridan
8,579 Points

Thats a bit of a hacky way of centering objects. Try Margin: auto;

brandonlind2
brandonlind2
7,823 Points

unfortunatley, margin: auto cant be used on positioned elements set to absolute

Nicholas Suddarth
Nicholas Suddarth
10,081 Points
Nicholas Suddarth
Nicholas Suddarth
10,081 Points

Margin Auto should work on elements set to absolute if you set left and right to Zero.

Try adding these:

position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;