Topic: Simple Dropdown Menu (show layer onmouseover)

Hi all

I might just be extremely thick or it might be my antihisthamine meds messing with my brain (yeah, right) but I can't figure this out nor be able to google it.

I need to make the simplest of layer dropdown menus, where the mouseover of an image-header shows a layer with 2 imagelinks like;

----------------------
Header (mouseout)
----------------------




and

----------------------
Header (moseover)
----------------------
img link 1
img link 2
----------------------

Mouseover the header should show the layer with the menu selections and a mouseout of the layer should hide it.


This *should* be straightforward and I should be able to do it using CSS and layers right?

I have googled for quite a while and only find very complex or nested versions that I can't untangle (I'm a very crappy coder so I need a base to start from/manipulate).

Is there anyone that could spend a minute or two to give me a pointer or to a tut on this ?

Many Thanks
nimraw

(e) typos

(Edited by Nimraw on 05-07-2008 13:45)

<ul class="menu">
  <li>
     <a href="">Header</a>
     <ul class="submenu">
        <li><img src=""/> Link 1</li>
        <li><img src=""/> Link 2</li>
     </ul>
  </li>

There are plenty of ways of controlling this. I believe there are CSS only as well as CSS/JavaScript solutions. Google "CSS dropdown menu" and you should come up with a ton.

If you want the image controlled via CSS, then you will want to apply class attributes to the li and control it in the class style.

Dan
Code Town | Zombie Head | How Much TP? | Feed The Blob

Alas you need a tiny bit of JS to make up for IE's lack of support of the :hover pseudo class on other elements than A tags.

See the navigation on my site for example.

Thanks for the tip Dan

However I'm looking for something that makes the layer visible on mouseover (might have explained myself badly), thus creating a drop down, much like the Forum Drop Down Menu on the top right of this page (only triggered by OnMouseOver instead of onClick.. or OnClick could work as well).


I've found tons of scripts, but most are adding a lot of fancy stuff (rollover bgcolor change, delays etc) which messes with my feeble understanding of code.

I just found a rather bloated codechink that I am stripping of unwanted stuff a minute ago and it seems to work. However I can't help but thinking that this should something that could be done without 50lines of javascript...


I'll continue digging...

http://www.cssplay.co.uk/menus/final_drop.html

Later,

C:\

http://css.maxdesign.com.au/listamatic/index.htm

I use this site a lot when I just need the basic code for a menu. It should do a pretty good job of getting you started in the right direction. I would say just look through some of the examples that they have and decide what you want from there.

quote:

---

poi said:

Alas you need a tiny bit of JS to make up for IE's lack of support of the :hover pseudo class on other elements than A tags.See the navigation on my site for example.

---

IE6, that is.

quote:

---

CPrompt said:

http://www.cssplay.co.uk/menus/final_drop.html

---

Garbage (uses non-standard/proprietary code).

(Edited by reisio on 06-21-2008 23:19)