Image rollover menu with dropdowns as images

Posted on 2008-06-12
Last Modified: 2010-05-18
Hi Experts

I've spent hours looking for this.  Does anyone know how to create a vertical image roll-over menu with dropdowns which are also image rollovers?

I know how to create a Java vertical image rollover menu and I know how to create a CSS dropdown menu.  I just can't find any examples of the two combined.

There was a similar question on EE but suggested links don't work any more.  See

Can anyone point me in the right direction?  Should it be all Java, or all CSS, or something else?

Many thanks

Question by:willnjen
  • 3
  • 2

Accepted Solution

jeremyBass26 earned 500 total points
Comment Utility
there are many options out there...

start here...

just modfy the  <a>  with &nbsp; and <span> and use the css for the images... easy as pie... and i love the effect for this one...
LVL 21

Expert Comment

Comment Utility
I would say pure css, just in case users dont have js (its faster too)

Something like this would work (mostly stolen from with a few modifications)

    <title>CSS Image Rollover Menu</title>

    <style type="text/css">

        #pmenu {padding:0; margin:25px 0 50px 15px; list-style-type: none; width:101px;}

        #pmenu ul {padding:0; margin:0; list-style-type: none; width:101px;}

        #pmenu li {position:relative;}

        #pmenu a, #pmenu a:visited {display:block;background:url(images/button.png);width:100px; font-size:10px; color:#fff; height:30px; line-height:22px; text-decoration:none; text-indent:5px; }

        #pmenu li:hover > a {background:url(images/button_down.png); color:#c00;}

        #pmenu li ul {display: none;} 

        #pmenu li:hover > ul {display:block; position:absolute; top:0; left:101px;}




    <ul id="pmenu">

        <li><a href="#nogo">Top Level 1</a></li>

        <li><a href="#nogo">Top Level 2</a></li>

        <li><a href="#nogo">Top Level 3 &#187;</a>


	            <li><a href="#nogo">Sub Level 1a</a></li>

	            <li><a href="#nogo">Sub Level 1b</a></li>

	            <li><a href="#nogo">Sub Level 1c &#187;</a>


			            <li><a href="#nogo">Sub Level 2a</a></li>

			            <li><a href="#nogo">Sub Level 2b</a></li>

			            <li><a href="#nogo">Sub Level 2c</a></li>



	            <li><a href="#nogo">Sub Level 1d</a></li>

	            <li><a href="#nogo">Sub Level 1e</a></li>



        <li><a href="#nogo">Top Level 4</a></li>

        <li><a href="#nogo">Top Level 5</a></li>

        <li><a href="#nogo">Top Level 6</a></li>



Open in new window


Author Comment

Comment Utility
Hi Guys

I am after a menu that uses images that change to another image as you rollover.  That combined with the multi-level dropdowns is what I can't do.

An example of the image changing rollover I want to use is here (not my work)..
There are two images which change when rolled over.  The code is below.

How do I add a level of dropdowns that are also image rollovers?




<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<TITLE>Test image menu from Ocean Ridge</TITLE>

<SCRIPT src="" language="javascript"></SCRIPT>



  <div id="nav" style="left: -530px; top: 36px; width: 90px">


      <a href="/index.shtml" onMouseOver="MM_swapImage('home','','',1)" onMouseOut="MM_swapImgRestore()"><img src="" name="home" width="56" height="45" border="0" id="home"></a><br>&nbsp;</div>



Open in new window

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!


Author Comment

Comment Utility
Hi jeremyBass26

I just read your post again and had another look at fsmenu.  Are you saying I could use images with fsmenu?  Can you show me an example?



Author Closing Comment

Comment Utility
I figured it out, fsmenu worked well.  Thanks!

Expert Comment

Comment Utility
sorry i didn't get back... but glad to see you got it... have a great one... :)

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now