Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

brandonlind2
brandonlind2
7,823 Points
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,798 Points
rydavim
rydavim
18,798 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
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;