Pure CSS Mouseover Menu without Javascript

CSS Menu without JavaScript, Pure-CSS, Hidden, Mouseover-EffectMany internet users are online with javascript-disabled clients(because of security or performance reasons). And you want use a nice mouseover multi-level menu on your homepage. CSS ist the perfect solution for this. All modern browsers like Mozilla Firefox, Microsoft Internet Explorer, Opera, Google Chrome, Apple Safari support css. Just copy & save code below as anything.html to see how this hidden menu works. You can use images, flash instead of links. Click here for a Demo

Why arent you using an un/ordered list? it would be the more accessible solution.

The updated multi-level version is very good. Thak you!

Can you create a horizontal drop-down menu for the top of page, header area? First level a rollover to bottom and second and third level to right. Cou you make menu open and close slowly? I found a good menu with that effect on dynamidrive but it uses javascript.

Can u add arrows for parent menu items with sub lists?

This is a cool and simple menu.
My only question is, how can you make the same menu working using an external htm file for the source of the menu list in order to simplify implementing this menu on a website with many pages?
The main point is not just implementing it on hundreds of pages the very first time, but if I have to add or remove a menu list item later, if a single external file is used for the menu list itself, I only have to update that single file, instead of all of the webpages.

for example:

I've been looking all over for a solution like this (with and without java script), but so far I couldn't find nor get an answer.


All what you need put all style code in an external .css file and call it with < link > tag. You can use it for multiple .html pages.

Thank you for your reply but I think my question wasn't clear enough.

You suggested to put all style code in an external .css file and call it with a < link > tag. I already have that.

I mean, I know how to do that. My question was only about the list of the menu items that starts with "< div id="cssm1"> and ends with "< /div>". This is the part that I want to put in an external .html file so that every time I modify the menu list itself, it will effect all pages on the website. In other words, I don't want to "clutter" all web pages with the menu list itself.

What I left out from the example code in my first message is that I was assuming that the example code is not for a sample of a menu html file but a sample for all other hundreds of webpages on the webserver that have a link or a reference to the menu.

Since this messaging window, that I am typing this message in doesn't allow full text of all kind of scripts, I simplified the example code with one words like < style> meant the < link> reference to the external .css file.
The < code> ment to be the reference code with one or two lines max. for the menu list file which is not known by me, that is exactly the part that I want to know how to do.

And to complete my explanation, the space between < /code> and < /body> is where the html content of the webpages go to.

On the second thought: Maybe where I am mistaken is the final use or purpose of your menu code above???

Until know I was in the firm belief that the html sample code that you posted is an example for a regular web page that INCLUDES the code and the list for the menu IN THE SAME PAGE.

Is it possible, that your sample code is only for the menu itself, and you're not supposed to put the rest of the web page in the same file, but you supposed to reference this html file into the top of all other regular web pages?

If that's the case, how do you do that? Using some kind of < div.. code?

I am lost here.


try this two steps:

1. put your menu code in an external file (ie: menu.inc.html)
2. put css code in an external file

include "menu.inc.html" to your all pages
be sure that everypage calls right css file

it should work everywhere

Thank you, and it was DEAD easy to use. I just copy and pasted the code into my site.

Other examples had problem with IE, and special fixes, but not this.

thank you.

I'm using IE7 (company standards...) and it's not working at all. Every time I mouse over the white space between the boxes the whole menu closes back up to the top level. Since there is no contiguous path to "Germany", I can't open the third level.

Can anybody tell me how to modify this code in order to position the menu to the right of the word MENU ..not over it as it initially is designed to work?

to move the menu over so it doesn't cover (2 steps! don't skip 2nd step.):


#cssm1:hover ul, #cssm1:hover ul li:hover ul, #cssm1:hover ul li:hover ul li:hover ul { 

to this

#cssm1:hover ul, #cssm1:hover ul li:hover ul, #cssm1:hover ul li:hover ul li:hover ul { 
        position: absolute;
        left: 20px; top: 10;

(the "left:20px" would be how far over it moves.)

you need to make the menu not disappear. So:

change this

#cssm3 { background-color: #c3f; padding: 3px; text-align: center; } 
#cssm1:hover #cssm3 { display:none; } 

to this

#cssm3 { background-color: #c3f; padding: 3px; text-align: center; } 

I am wanting to have the 1st unordered list remain visible, while mousing over the list items will show/hide the sub-unordered lists (instead of having to mouseover the "menu" div to show the first level of menu options)...

What part of the CSS should I adjust for this?

How can I change it vertical menu. I want to have horizontal bar and when you bring mouse over it, it should drop vertically down.
thank you

I have my nav built is working fine except I can't isolate the 2nd tier nav to its first tier dependent. All of my 2nd tier nav's show up when any of the 1st tiers are hovered.

I have the UL as the id for the grouping, but i don't think this should matter. Could this be effecting it?


Nice. But not very legible and not very flexible. Too easy to break by changing a single variable.
Would recommend spreading it out so it's easier to read, we can compact it down later on. Would also add comments explaining exactly what does what so we don't have to figure out your thought process ourselves.
Just my 2 cents. Take it or leave it.


Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <b> <pre> <h1> <h2> <h3> <h4> <h5> <h6> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <div> <style><img> <br> <blockquote>
  • Lines and paragraphs break automatically.
  • You may insert videos with [video:URL]

More information about formatting options

This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Enter the characters shown in the image.

CafeWebmaster.com(CW) is a free online community for webdevelopers and beginners. Anybody can share their code, articles, tips, tutorials, code-examples or other webdesign related material on the site. Newbies can submit their questions and reply to existing questions. CW does not guarantee or warrant reliability of code, data and information published on the site. Use the site on your own risk. The site takes no responsibility of direct or indirect loss or any kind of harm to its users. The site also doesn't take responsibility of infected files or source code with any kind of infection or viruses, worms, spywares, malwares, trojan horses. CW reserves the right to edit, move, or delete any of content for any reason.