Making a dropdown menu

SuperSayian

Hey everyone,

So I'm very new to coding and I was wondering if someone couldhelp me make my nav a dropdown menu?

Here's my code:


#menu_wrapper {
clear: both;
width: 100%;
height: 95px;
margin: 0 auto;
}

#menu {
clear: both;
width: cover;
height: 75px;
margin: 0 auto;
background: #3EDAAD;
}

#menu ul {
width: 1000px;
overflow: hidden;
padding: 20px 0 0 0;
margin: 0px auto;
list-style: none;
text-align: center;
}

#menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}

#menu ul li a {
float: left;
display: block;
width: 100px;
padding: 4px 0 5px 20px;
font-size: 18px;
text-align: center;
font-weight: normal;
text-decoration: none;
color: #212629;
outline: none;
}


/* end of menu */



<div id="menu_wrapper">

<div id="menu">

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our Project</a></li>
<li><a href="#">Outreach</a></li>
<li><a href="#">Notebook</a></li>
<li><a href="#">Parts</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Collaborations</a></li>
<li><a href="#l">Interlab Study</a></li>
</ul>

</div> <!-- end of menu -->

Banta

I'm pretty sure "cover" is only for background images, so that could be a problem. (Even for background images, there's not great support on iOS, just partial, but that's for another matter.)

Before we get too far into this, what exactly do you want to dropdown? Or where exactly do you want a dropdown? Do you want people to click/hover on a link, like "Menu" and then the whole thing to appear, or something like "Our Project" with Out Reach, Notebook and Parts under it.

What you've shown in the above UL is just the top level items

SuperSayian

I'm wrong so! It's working away the way I want it to anyway bar the dropdown! :P

I want the stuff to appear on hover if possible!

even if I could just get project with "overview, results, submitted parts, prototype" under it that would be great! I could put it under for the others myself, I'd say

smash

Sent you a pm there with some simple bootstrap code.