I've been working on creating a drop-down menu using CSS, and I've managed to hide the drop down menu successfully. However, I'm facing difficulty in making it reappear. I suspect that the issue lies with the :hover tag, which I have removed from the css as I haven't been able to get it to function properly. Can anyone assist me with the CSS? Help, please! I am desperate for a solution.
Here is the HTML Code:
<div id="navigation">
<ul id="menu">
<li class="menu"><a href="#home">Home</a></li>
<li class="menu"><a href="#news">About Us</a></li>
<ul class="sub_menu">
<li>Our Mission Statement</li>
<li>How Funds Are Spent</li>
<ul class="sub_sub_menu">
The Founders
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
</ul>
</ul>
<li class="menu"><a href="#contact">What We Do</a></li>
<ul class="sub_menu">
<li>T-Shirt Designs</li>
<li>Future Design Ideas</li>
<ul class="sub_sub_menu">
Fact Sheets
<li>How Our Fact Sheets Work</li>
<li>Fact Sheet 1</li>
</ul>
</ul>
<li class="menu"><a href="#about">Media</a></li>
<li class="menu"><a href="#contact">Contact Us</a></li>
</ul>
</div>
The CSS code I am using is as follows:
ul {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
padding-top: 0px;
padding-bottom: 0px;
}
li.menu {
display: inline
}
a:link, a:visited {
font-weight: bold;
font-size: 14px;
color: #FFFFFF;
background-color: #B4B7BD;
text-align: center;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 20px;
padding-left: 20px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #B4B7BD
}
ul.sub_menu li {
position: relative;
display: none;
width: 100%;
}
ul.sub_sub_menu {
position: relative;
display: none;
}
ul.sub_sub_menu li {
position: relative;
display: none;
width: 100%;
left: 100%;
}