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 akash devgan
akash devgan
2,312 Points

trying to create dropdown using pure css and html

On hover menu 1 should display sub-menus its working properly but on hover menu 2 and menu 3 move as well i don't know why?? akashdevgan.com is a link to website where you can have a look and i will post all the code below html <!Doctype html> <html> <head> <title>New complete project</title> <link rel="stylesheet" href="css/normalize.css">

                 <link rel="stylesheet" href="css/main.css" />
            </head>

    <body>
          <header>
                 <ul class="drop-down">
                      <li class="li-dropdown"><a href="#">Menu1</a>
                             <ul class="sub-dropdown">
                                   <li> Sub menu1</li>
                                   <li>Sub menu2</li>
                                   <li>Sub menu 3</li>
                             </ul>
                       </li>
                      <li><a href="#">Menu2</a></li>
                      <li><a href="#">Menu3</a></li>
                 </ul>
          </header>

     </body>

</html>

css

body{ padding:0; margin:0; height:100%; width:100%; }

a{text-decoration:none;color:white} *{box-sizing:border-box;} header{ background-color:#8B36A1;

}

.drop-down{ margin:0; padding:0px; text-align:center;

}

.drop-down li{ display:inline-block; }

.drop-down li a{ display:block; padding:30px; }

.li-dropdown{

position:relative;

}

.sub-dropdown{ display:absolute; display:none;

}

.sub-dropdown li{ display:block;

}

.li-dropdown:hover >.sub-dropdown{display:block;}

1 Answer

Joe Consterdine
Joe Consterdine
13,965 Points

Hi Akash,

some things to think about:

  1. Try keep your CSS tidier. You seem to put a lot on one line and it's hard to read.

It's fine to put it on one line if it's just one selector, but if there's more split it up like I have below.

  1. The reason 'Menu 2' and 'Menu 3' move down is because the dropdown increases the height of the container and so the other two elements go down.

In the code below I've added 'position: absolute' to the dropdown which takes it out of normal document flow and therefore doesn't add to the height.

try copying this css:

body{ padding:0; margin:0; height:100%; width:100%; }

*{box-sizing:border-box;}

a{text-decoration:none;
    color:white;
}

header{
    background-color:#8B36A1;
}

.drop-down{ margin:0; padding:0px; text-align:center;
    position: relative;
}

.drop-down li {
    display:inline-block;
}

.drop-down li a {
    display:block;
    padding:30px;
}

.li-dropdown{
    position:relative;
}

.sub-dropdown li{ display:block;
    list-style: none;
    background: #8B36A1;
    color: #fff;
}

.sub-dropdown {
    display: none;
}

.li-dropdown:hover >.sub-dropdown{
    display: block;
    position: absolute;
    top: 100%;
    padding: 0;
    width: 100%;
}
akash devgan
akash devgan
2,312 Points

thanks for helping joe !!