Help With Using CSS For Menus and Utilising Image Rollovers

Epyon

Epyon

Epyon

Associate
Joined
1 Mar 2004
Posts
1,790
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:

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 :D.
 
With the code as it is now it doesn't even sit in side the navigation area.

I think i understand what you are trying to achieve though, there's lots of free CSS code around the web for making cross browser menus such as the ones you want, i'll see if i can find one for you.

Are you wanting drop-down menus?

EXAMPLE:

Home | Link 1 | Link 2

When clicking on say Link 1 a menu drops down with the sub-links. Is this what you are wanting?
 
Last edited:
t31os said:
i'll see if i can find one for you.
Click to expand...

Is this what you had in mind, of course modify it as needed to suit your own code though. :)

http://sperling.com/examples/menuh/

If you want something else please be specific. ;) EDIT: Does require script though...

EDIT: This is actually better (and nicer), does not require any script, it's pure CSS and works across most browsers.
http://www.tjkdesign.com/articles/new_drop_down/default.asp

Easiest way to do it i'd say, take one that works and does what you need, then just adjust it where need be.
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom