Ok be ready long post!
Basically I want to make it so if someone hovers over a button they also see the options below it such as 'About Us' and what have you. Now here's my HTML code:
And here's my CSS code:
Ok now people, show me what you got
.
Basically I want to make it so if someone hovers over a button they also see the options below it such as 'About Us' and what have you. Now here's my HTML code:
Code:
<!--Navigation STARTS Here-->
<div id="navigation">
<ul class="menu">
<li class="blank_left"></li>
<li class="home"><a href="#"><span class="invisible">Home</span></a></li>
<li class="about_us"><a href="#"><span class="invisible">About Us</span></a>
<ul class="cssfly">
<li>About O and O Hosting</li>
<li>Why Us</li>
</ul>
</li>
<li class="hosting_solutions"><a href="#"><span class="invisible">Hosting Solutions</span></a>
<ul>
<li>Student Plan
<ul>
<li>About Our Student Plan</li>
<li>Student Plan Features</li>
</ul>
</li>
<li>Personal Plan
<ul>
<li>About Our Personal Plan</li>
<li>Personal Plan Features</li>
</ul>
</li>
<li>Business Plan
<ul>
<li>About Our Business Plan</li>
<li>Business Plan Features</li>
</ul>
</li>
<li>Compare Our Plans</li>
<li>Request A Quotation</li>
</ul>
</li>
<li class="support"><a href="#"><span class="invisible">Support</span></a></li>
<li class="other_services"><a href="#"><span class="invisible">Other Services</span></a></li>
<li class="blank_right"></li>
</ul>
</div>
<!--Navigation ENDS Here-->And here's my CSS code:
Code:
.menu {
margin:0;
padding:0;
width:900px;
list-style: none;
background-color:#FFFFFF;
display:inline;
}
.menu li {
float: left;
height: 50px;
list-style: none;
background-repeat: no-repeat;
padding: 0;
margin: 0;
}
.menu li a, .menu li a:visited {
display: block;
text-decoration: none;
height: 50px;
background-repeat: no-repeat;
}
.menu:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.blank_left{
width:46px;
background-color:#FFFFFF;
}
.blank_right{
width:49px;
background-color:#FFFFFF;
}
.home {
width:89px;
background-image: url(images/home.png);
}
.home a:hover{
background-image: url(images/home_rollover.png);
}
.about_us {
width:142px;
background-image: url(images/about_us.png);
}
.about_us a:hover{
background-image: url(images/about_us_rollover.png);
}
.hosting_solutions {
width:246px;
background-image: url(images/hosting_solutions.png);
}
.hosting_solutions a:hover{
background-image: url(images/hosting_solutions_rollover.png);
}
.support {
width:128px;
background-image: url(images/support.png);
}
.support a:hover{
background-image: url(images/support_rollover.png);
}
.other_services {
width:200px;
background-image: url(images/other_services.png);
}
.other_services a:hover{
background-image: url(images/other_services_rollover.png);
}
.invisible{
display:none;
}Ok now people, show me what you got
.