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
Adam Duffield
30,494 PointsHover Dropdown list is pushing other content down the page
Hi,
I've never really made a hover dropdown list so i gave it a go for a website I'm working on and I have the jist of it, the only problem being it pushes other content down the page, could anybody help out with this?
<nav class="navbar">
<ul id="navlist">
<li><a href="#">AED</a>
<ul id="sub_navlist">
<li>Stuff</li>
<li>Stuff</li>
<li>Stuff</li>
</ul>
</li>
<li><a href="#">Aprons</a></li>
<li><a href="#">Burns</a></li>
<li><a href="#">Eye Care</a></li>
<li><a href="#">First Aid Kit</a></li>
<li><a href="#">Gloves</a></li>
<li><a href="#">Manikin's</a></li>
<li><a href="#">Signs</a></li>
</ul>
</nav>
SCSS(CSS)
.navbar{
float:left;
width:100%;
height:100%;
#navlist{
float:left;
width:100%;
margin:0;
height:100%;
li{
display:inline-block;
font-size:1.1em;
background-color:limegreen;
padding:0;
margin:0;
height:100%;
float:left;
text-align:center;
width:12.5%;
font-weight:bold;
text-decoration:none;
&:hover{
background-color:green;
}
a{
float:left;
padding:3% 0;
width:100%;
text-align:center;
}
}
}
}
#sub_navlist{
visibility:hidden;
margin:0;
padding:0;
height:0;
}
#navlist li:hover > #sub_navlist{
visibility:visible;
width:100%;
height:100%;
float:none;
top:0;
padding:0;
position:relative;
}
#navlist li:hover #sub_navlist li{
background-color:green;
padding:0;
float:none;
position:relative;
width:100%;
display:inline-block;
height:auto;
}
Cheers,
Adam
8 Answers
idan ben yair
10,288 PointsHi,
Try to add position: absolute; to your drop down menu. Also defining z-index will help you control what selector will be on top of the other so while you have your nav bar pushing down with a margin it wont push any actual elements if you set the z-index to lets say 1
Let me know if that helped :)
Darren Kynaston
Courses Plus Student 15,610 PointsHi Adam I'm sure this is well past but I've explained and put the code you need in Codepen: http://codepen.io/anon/pen/emwedQ
Your id="navlist" should be in the <li> below where you've originally put it and the display=relative. Then give a display=absolute to the class="sub_navlist". Explained and example in the Codepen link above.
Also just give the
.sub_navlist class a fixed width of about 400px and make the .sub_navlist li { text-align: left;}
Hope this helps?
Darren
Adam Duffield
30,494 PointsHey Darren I managed to work it out some time ago now but forgot all about this post! Thanks for taking the time to look into it though :)
Stephanie Caulley
13,153 PointsHi Darren, I don't know if this helped the original poster, but it helped me with a project.
Thanks a bunch!
-- Stephanie
Robert Bojor
Courses Plus Student 29,439 PointsHi Adam,
In order for the submenu not to push content down you will need to assign a position:absolute to it, and the <li> element hosting the submenu will have to have a position:relative for it to work properly.
Once this is done you can control the visibility using display: none/block from your css rules. Also you might need to adjust the <ul> submenu position within the parent <li> using top, left, right, bottom rules in css.
idan ben yair
10,288 Pointstry to define margins for the dropdown list that will push it to the right spot under its parent list
Adam Duffield
30,494 PointsAlso not working Idan :(
idan ben yair
10,288 Pointsohh :( weird, well I'm at work right now, I can try to play with your code later on, if you still dont have the answer later on and I come up with something I will update you.
idan ben yair
10,288 PointsI think Robert's idea is a good one, specifying a fixed width for the sub ul might be the way to go.
Adam Duffield
30,494 PointsHi guys, I've tried both and I just end up with my list right at the top of the html page which isn't ideal because I'm aiming to make this site responsive. Any other suggestions? I've also come across another problem, the link for the main li item doesnt work whilst i have a hover list inside it.
Robert Bojor
Courses Plus Student 29,439 PointsThis happens because the parent <li> element doesn't have a position:relative assigned to it. When the parent element of an another element that is positioned absolute doesn't have position relative, the position:absolute element will take the body's or the closest element in the hierarchy that has one coordinates and use it.
If you specify a position relative to the <li> it should work just right.
Adam Duffield
30,494 PointsNot sure I understand you, which parent element are we talking about? I can code but I can't speak the lingo all too well. I don't have anything as absolute position either, when i change them around to anything other than what they are they end up all over the page at the moment.
Robert Bojor
Courses Plus Student 29,439 PointsYour current structure is:
nav
ul
li // position:relative
ul // position:absolute
This will force the ul with position:absolute to use the coordinate system from inside the parent ( li ) that has position relative. So top:0, left:0 will be in the top-left corner of the li instead of the top-left corner of the site. From there you move the ul using top, left, right, bottom as you wish.
Adam Duffield
30,494 PointsCheers Robert! That make's much more sense and has put the ul where I want it but now my li are quite scrunched up and won't seperate!
Robert Bojor
Courses Plus Student 29,439 PointsTry adding some padding and/or margins to the a elements inside the main li elements, or to the li elements as well.
Adam Duffield
30,494 PointsI gave it a try but it didn't change a thing, whatever i change for the li inside the sub ul isn't working now, it seems to be holding the main ul and li values
Robert Bojor
Courses Plus Student 29,439 PointsSorry mate, I thought you were referring to the main ul and li.
When it comes to drop-downs I found it better if you specify a fixed width for the sub ul element in your css, and style the sub li from there.