Tuesday, September 22, 2009

How to make a drop down menu with images for blogger page

Say hello to the new mouseover drop down menu. This is a slight modification of the simple dropdown menu tutorial here. To add images simply set up the dropdown menu as described in his post and then add images in front of the text. this will look great on your blogspot or other blog. So for example:

each <li> </li> contains a single menu element. Here is one example.

onmouseout="mclosetime()" href="#"><img src="MAIN IMAGE" height="60" />MENU NAME</a>
<div id="m3"
<a href="YOUR LINK 1"><img src="IMAGE 1 LOCATION" height="30" />LINK1 NAME </a>
<a href="YOUR LINK 2"><img src="IMAGE 2 LOCATION" height="30" />LINK2 NAME </a>

If any of this is unclear shoot me an email or comment and I will clarify.

Bonus question! how do I quote HTML in a post without having it be used.
replace, in this order,
"&" with "& amp;"
"<" with "& lt;"
">" with "& gt;"

but remove the spaces i am showing in the quotes

Add a share this post on facebook link to your blog.
share to facebook button


  1. I dont get it. Where do i put my images. I just tried to put a menu bar that uses pictures but where do i put the pictures? How do i link them. Url=http://www.dynamicdrive.com/style/csslibrary/item/glossy_horizontal_menu/

  2. you paste the image link right before the title of the menu. if you are still having trouble post your code and I can look at it.

  3. Hey Mike, I'm not sure if you're still blogging, but for some reason, I'm unable to get the menu to work for Internet Explorer. I loaded your page with IE, and the menu still works beautifully. Any tips? Here's my blog:



i'm not here right now but leave a message and i will get back to you as soon as possible.