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
Matthew Chastain
Courses Plus Student 3,758 PointsCSS Drop Down Menu
So, I've completed most of the CSS tutorials here and haven't yet figured out how to do a drop down menu. I've googled it a bunch, but the ones I've found are stylized in such a way as to be useless in my applications and even if they did fit, they completely throw the layout of my pages off by inserting them. Could anyone point me in a direction where I could learn how to build these onto my already existing nav bars? It'd be nice not to have to completely rework what I've already built to use it. Thanks in advance!
4 Answers
Domen Stojic
31,376 PointsOk I did some slight modifications but left your styling like you wanted it with slight modifications.
HTML
<nav>
<ul class="navbar">
<li><a href="index1.html">Home</a></li>
<li><a href="our_parents.html">Our Parents</a></li>
<li><a href="our_students.html">Our Students</a></li>
<li><a href="our_teachers.html" class="teachers">Our Teachers</a>
<ul>
<li><a href="https://ebox.union.k12.sc.us/owa/auth/logon.aspx?replaceCurrent=1&url=https%3a%2f%2febox.union.k12.sc.us%2fowa%2f">Employee Email</a></li>
<li><a href="http://powerschool.union.k12.sc.us/teachers/pw.html">PowerTeacher</a></li>
<li><a href="http://https://ivportal.union.k12.sc.us">iVisions</a></li>
</ul>
</li>
<li><a href="our_schools.html" class="schools">Our Schools</a>
<ul>
<li><a href="">Union County High School</a></li>
<li><a href="">Jonesville Elementary/Middle School (K-8)</a></li>
<li><a href="">Lockhart School (K-8)</a></li>
<li><a href="">Sims Middle School</a></li>
<li><a href="">Buffalo Elementary School</a></li>
<li><a href="">Foster Park Elementary School</a></li>
<li><a href="">Monarch Elementary School</a></li>
</ul>
</li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="departments.html" class="departments">Departments</a>
<ul>
<li><a href="http://www.union.k12.sc.us/newweb/administration.html">Administration/Support Staff</a></li>
<li><a href="http://www.union.k12.sc.us/newweb/superintendent.html">Office of the Superintendent</a></li>
<li><a href="https://ucsdpersonnel.shutterfly.com">Personnel</a></li>
<li><a href="http://www.union.k12.sc.us/newweb/board.html">School Board</a></li>
<li><a href="http://www.union.k12.sc.us/newweb/instruction.html">Instructional/Staff Development</a></li>
<li><a href="https://ucsdssgt.shutterfly.com">Special Services - GT</a></li>
<li><a href="http://www.union.k12.sc.us/district/newtechnology/index.html">Technology</a></li>
<li><a href="http://www.schoolnutritionandfitness.com/index.php?sid=1006132335102241">Food Service</a></li>
<li><a href="http://www.union.k12.sc.us/District/Insurance/Insurance%20Homepage.htm">Insurance</a></li>
<li><a href="http://www.union.k12.sc.us/newweb/testing.html">Testing</a></li>
<li><a href="http://www.union.k12.sc.us/newweb/dservices.html">District Services</a></li>
<li><a href="http://www.union.k12.sc.us/newweb/finance.html">Finance</a></li>
</ul>
</li>
<li><a href="employment.html">Employment</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
<nav>
Try to avoid multiple id and class labels, if they are redundant and don't need to solve something specific you don't need to use them! Keep it DRY!!! :D
CSS
.navbar {
text-align: center;
}
.navbar li {
list-style: none;
float: left;
}
.navbar li a {
display: block;
border: 2px solid #000;
font-family: Futura, Tahoma, sans-serif;
color: black;
background-color: gold;
border-radius: 5px;
text-decoration: none;
padding: 10px;
margin-left: 2px;
margin-bottom: 4px;
font-size: 1.1em;
max-width: 100%;
}
.navbar li ul {
display: none;
width: auto;
}
.navbar li:hover ul, .navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
.navbar li:hover li {
float: none;
}
.navbar li:hover li a {
background-color: steelblue;
box-shadow: 3px 3px 3px #ccc;
}
.navbar li li a:hover {
background-color: pink;
color: white;
}
Hope this helps! I have tried to stick to your original CSS!
Domen Stojic
31,376 PointsHi Matthew!
Essentially what you would like to create is a unordered list that is hidden (display:none) until user :hovers over it (display:block)! You can do this with css or in combination with javascript, it all depends on what effect you would like to achieve!
Here is a link on how to do it with CSS: http://www.cssnewbie.com/easy-css-dropdown-menus/#.U8DkhJSSzZU
Daniel Veremchuk
31 PointsSimply have your children ul be absolutely positioned and display: none;, and on hover display it as a block.
nav ul ul {
display: none;
}
nav ul li:hover ul {
display: block;
}
Matthew Chastain
Courses Plus Student 3,758 PointsUnfortunately, that hides my sub list elements, but they don't reappear when hovered. Thanks for the help!
Domen Stojic
31,376 PointsCan you give me your code example?
Matthew Chastain
Courses Plus Student 3,758 PointsMatthew Chastain
Courses Plus Student 3,758 PointsThanks! If it's not too much trouble, would you mind telling me what was causing it to fail before?
Domen Stojic
31,376 PointsDomen Stojic
31,376 PointsIt failed because you nested items like:
instead of
This works because you declare hide on the contents of the first li that is your "wrapper" group and then you can hover unhide the elements nested inside it.
Now it probably sounds quite logical :D
Matthew Chastain
Courses Plus Student 3,758 PointsMatthew Chastain
Courses Plus Student 3,758 PointsOf course! Now, to remember that next time. Thanks again!