CSS Dropdown menu not falling under parent menu - html

Question

I was just having a small problem and I'm not sure how to fix it. I'm still new to HTML and CSS and I was trying to get the drop down menu to work, but after looking at various tutorials I can only get it so when I hover over the parent folder the sub menu falls either to the left or right and not underneath the parent.
<ul id="navigate">
<li class="current"> Home</li>
<li> <a href = ".html" >A</a>
<ul>
<li>B </li>
</ul>
</li>
<li> C</li>
<li> D</li>
<li> E</li>
<li> F</li>
</ul>
Above is the portion of the code for my nav bar. html have files to them
This is my CSS:
/*
* Navigation Bar
*/
#navigate
{
padding: 0;
margin-top: 5px;
list-style-type: none;
color: black;
float:left;
width: 100%;
background-color: #00FF00;
}
#navigate li
{
display: inline;
position: relative;
}
#navigate li a
{
float: left;
width: 7em;
background-color: #00FF00;
text-decoration: none;
border-right: 1px solid #FFFFFF;
padding-left: 1em;
padding-right: 1em;
text-align: center;
}
#navigate li a:hover
{
background-color: #D1E751;
color: #26ADEA;
}
#navigate li.current a
{
background:#D1E751;
}
/*
* SubMenu
*/
#navigate li ul
{
display: none;
position: absolute;
padding: 0;
}
#navigate li:hover ul
{
display: inline-block;
}
Currently the code works in that it shows the submenu to the right of the parent menu. I'm not sure how to get it to fall directly below the parent menu, any help would be greatly appreciated. Or any tips if my code looks a little odd this is my first semester in HTML, CSS and programming in general.
Shows up like this (just showing the one menu
parent sub
----------------------------------
A | B |
----------------------------------
I would like it to look like this
------------
A | Parent
------------
B | sub
------------
Thanks in advance
------------------------------ UPDATE 5/9/2014 ----------------
So now I've managed to get it to work, but when it shows up it moves the content....
------------
A | Parent
------------
contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
------------
A | Parent
------------
B | sub contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
------------
contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
i'm thinking it might have to do with the float:left and where I've cleared the float or the positioning. When I add a position: absolute it just moves the sub menu over the parent menu though.
Updated Code
/*
* Navigation Bar
*/
#navigate
{
padding: 0;
margin-top: 5px;
list-style-type: none;
color: black;
width: 100%;
background-color: #00FF00;
position: relative;
}
#navigate li
{
float: left;
padding-right: 2px;
}
#navigate li a
{
float: left;
width: 7em;
background-color: #32CD32;
text-decoration: none;
text-align: center;
border-radius: 25px;
padding: 5px;
margin: auto;
}
#navigate li a:hover
{
background-color: #D1E751;
color: #26ADEA;
}
#navigate li.current a
{
background:#D1E751;
}
/*
* SubMenu
*/
#navigate ul
{
display: none;
list-style: none;
padding: 0;
}
#navigate ul li
{
clear: left;
display: block;
}
#navigate li:hover ul
{
display: block;
}
Thanks in advance.
--------Update few mins later >.< -------
I ended up putting it all in a div and formatting the div now it works.
/*
* Navigation Bar
*/
#navigate
{
padding: 0;
margin-top: 5px;
list-style-type: none;
color: black;
width: 100%;
background-color: #00FF00;
position: relative;
}
#navigate li
{
float: left;
padding-right: 2px;
}
#navigate li a
{
float: left;
width: 7em;
background-color: #32CD32;
text-decoration: none;
text-align: center;
border-radius: 25px;
padding: 5px;
margin: auto;
}
#navigate li a:hover
{
background-color: #D1E751;
color: #26ADEA;
}
#navigate li.current a
{
background:#D1E751;
}
/*
* SubMenu
*/
#navigate ul
{
display: none;
list-style: none;
padding: 0;
}
#navigate ul li
{
clear: left;
display: block;
}
#navigate li:hover ul
{
display: block;
}
.nav
{
position: absolute;
z-index: 2;
margin: auto;
}
changes made to html just enclosed in

Answer 1

I understand that you have difficulty with your pop-up menu, if so, here's one of the solutions
DEMO

Answer 2

I think it will help if you add top position to ul element.
#navigate li ul
{
display: none;
position: absolute;
padding: 0;
top: 100%;
left: 0;
}
#navigate li:hover ul
{
display: block;
}
Here display: block; will be more apropriate, I think.

Answer 3

when you set
#navigate li
{
display: inline;
position: relative;
}
it applies it to all of the li elements including the submenu, which means all the li align horizontally including the submenu, because of the display: inline;
so change it to
#navigate > li
{
display: inline;
position: relative;
}
to target only direct li children
and give your submenu ul a class mySubmenu and set its position to absolute:
.mySubmenu
{
position:absolute;
}