How do i add dropdown items to my horizontal menu bar? - html

Question

hi i am trying to add a drop down item to my horizontal menu bar. i would like the drop down item to be "Parish council minutes" under "parish council information" like these but in my styles:
(http://www2.psd100.com/wp-content/uploads/2013/03/web-dropdown-menu-bar-psd0306.jpg)
i also intend to add a few more drop down menu item in different locations.
many thank in advance.
my css:
my css:
#cssmenu {
background: #f96e5b;
width: 1404px;
margin-right:auto;
margin-left:auto;
padding:0;
}
#cssmenu ul {
list-style: none;
margin: 0%;
padding: 0%;
line-height: 1;
display: block;
zoom: 1;
width:100%
}
#cssmenu ul:after {
content: " ";
display: block;
font-size: 0%;
height: 0%;
clear: both;
visibility: hidden;
}
#cssmenu ul li {
display: inline-block;
padding: 0%;
margin: 0%;
}
#cssmenu.align-right ul li {
float: right;
}
#cssmenu.align-center ul {
text-align: center;
}
#cssmenu ul li a {
color: #ffffff;
text-decoration: none;
display: block;
padding: 15px 25px;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
position: relative;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s;
}
#cssmenu ul li a:hover {
color: #333333;
}
#cssmenu ul li a:hover:before {
width: 100%;
}
#cssmenu ul li a:after {
content: "";
display: block;
position: absolute;
right: -3px;
top: 19px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
#cssmenu ul li a:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: #333333;
-webkit-transition: width .25s;
-moz-transition: width .25s;
-ms-transition: width .25s;
-o-transition: width .25s;
transition: width .25s;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
display: none;
}
#cssmenu ul li.active a {
color: #333333;
}
#cssmenu ul li.active a:before {
width: 100%;
}
#cssmenu.align-right li.last > a:after,
#cssmenu.align-right li:last-child > a:after {
display: block;
}
#cssmenu.align-right li:first-child a:after {
display: none;
}
#media screen and (max-width: 100%) {
#cssmenu ul li {
float: none;
display: block;
}
#cssmenu ul li a {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid #fb998c;
}
#cssmenu ul li.last > a,
#cssmenu ul li:last-child > a {
border: 0;
}
#cssmenu ul li a:after {
display: none;
}
#cssmenu ul li a:before {
display: none;
}
}
#menubar2 {
width:400px;
margin-left:auto;
margin-right:auto;
}
my html:
<div id='cssmenu'>
<ul>
<li class='active'>
<li>Home</li>
<li>Parish Council information</li>
<li>What's on </li>
<li>History</li>
<li>Churches</li>
<li>Newsletter</li>
<li>Village Halls and Social Clubs </li>
<li>Gallery</li>
<div id="menubar2">
<li>Business in Runtons</li>
<li>Contact us</li>
</div>
</ul>
</div>

Answer 1

Put your "flyouts" (lets call it like this cause thats what is is) into your LI's.
Like this:
HTML:
<ul> <!-- this is your horizontal menu bar ul -->
<li>
Some Page
<div class="flyout_container">
<ul>
<li>Some Subpage of Some page
</ul>
</div>
</li>
</ul>
CSS:
ul > li
{
display:block;
position:relative;
height:30px;
}
ul > li .flyout_container
{
position:absolute;
top:30px; /* this is the LI's height*/
left:0;
display:none;
}
ul > li:hover .flyout_container
{
display:block;
}
Normal state you just see the first level and once u hover an LI with a flyout_container in it, it will appear located as you wished on the given screenshot.