DropDown / Rollover Menu with pure CSS / HTML

CSS Menu without JavaScript, Pure-CSS, Hidden, Mouseover-EffectThis is another CSS Menu with changed direction. Many website visitors are online with javascript-disabled clients(because of filters, access rules etc). And you want use a nice rollover 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(e. arrows), flash instead of links. Click for a Demo of rollover top menu




CSS DropDown Menu without JavaScript, PureCSS, Rollover



CSS DropDown/Rollover Menu without Javascript

This is a dhtml menu like rollover menus with javascript. Tested with major web-browsers like Mozilla Firefox 3, Microsoft Internet Explorer 8, Opera 9.5, Google Chrome, Apple Safari, ...

This is exactly what I need, thank you very much!

Really nice horizontal menu. How can I use arrows for submenus?

You mean like in the demo page? Add the HTML code » in front of whatever will have a rolldown (the Design section in the demo page, for example).

The aforementioned HTML code didn't display, the code for the arrows is & # 1 8 7 ; (remove spaces).

It works perfectly with Firefox, but it doesn't work with IE 6.0 which is most people still using it now, if this is working, it would be perfect for most people...

You need additional Javascript code for IE6. I do not think that such pure-css menus avaliable for IE6 and older.

Great menu! Thanks.

How can I expand the width of a drop down menu entry when it's open? Say I have:

  • Menus     »
  • The "Javascript is awful" is split over two lines and the menu item is a fixed width. How can I force the menu item to expand to fit the text on one line?

    Thanks

    You can change width of second level menu items. Look at top of this page.

    Very nice! Seems to good to be true, whats the catch? :) Small amount of markup, very effective and just 1px out on the sub menu between FF 3 / IE 7, haven't tested IE 6.

    Thanks for sharing

    This was a very helpful menu code, but I was wondering if there is a simple way to get it to remain a fixed width? For example, if I resize the browser window, the menu shrinks and stacks on top of itself in order to completely fit in the window, while I was hoping that I could have it remain on one horizontal line no matter what the browser window size. Thanks!

    How could I make a file (say using php), so I can just call this code in multiple pages, rather than retyping it many times?

    What I did: make 2 files:
    /resources/menu.php
    /resources/menu-styles.php

    then put the menu code (from

    to

    ) in /resources/menu.php

    then put the style info (from

    in /resources/menu-styles.php

    then put:

    <?php require("/var/www/resources/menu.php"); ?>
    where you want the menu in every page

    and:

    <?php require("/var/www/resources/menu-styles.php"); ?>
    between the and tags in every page.

    Replace the "/var/www/" and stuff for troubleshooting - worked for me but YMMV

    How can you center this menu? Nothing I try has worked, I tried to chance the absolute position, but I still nothing changes.

    Thanks

    Is there any way to take out the gaps out from in between the drop down lists?

    To take out the gaps you replace:

    #cssm1 a { display: block; border: 1px solid #fff; background: #abc; text-decoration: none; padding: 3px 10px; }
    #cssm1 a:hover { background: #789; }

    With:

    #cssm1 a { display: block; border: 0px solid #fff; background: #abc; text-decoration: none; padding: 3px 10px; }
    #cssm1 a:hover { background: #789; }

    Replace

     #cssm1 a { display: block; border: 0px solid #fff; background: #abc; text-decoration: none; padding: 3px 1px; }
    #cssm1 a:hover { background: #789; } 

    With

     #cssm1 a { display: block; border: 0px solid #fff; background: #abc; text-decoration: none; padding: 3px 0px; }
    #cssm1 a:hover { background: #789; } 

    Great code, just one question - How can I change the text color?

    Pulldowns don't want to appear in IE 8. :(

    pulldowns didn't work in IE 8
    suggestions?

    How can the colour of the background be changed?
    Beside this. Great Code!!

    This is very nice. Avoids the bloated code that so many others seem to have.

    Hi,

    great posting! Thx.

    But what about this:


    #cssm1 { position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 20px;

    background:#ff2222;
    -moz-opacity: .9;
    opacity: .9;
    filter: alpha(opacity=90);
    }

    3nd level menu is clipped and background color only for level 2.

    Do you have a fix for this?

    Regards
    Marion

    Thanks you very much. Exactly what I needed.

    Try this CSS if you have trouble with page content moving all over the place. This should keep the Nav menu in front of your content when it drops down. (I've changed the appearance)

    #cssm1 ul {
    padding: 0px;
    margin: 0px auto 0px auto;
    text-align: center;
    }
    #cssm1 ul li {
    display: block;
    float: left;
    width: 150px;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    height: 20px;
    line-height: 30px;
    }
    #cssm1 ul li a {
    background-color: #1A44EE;
    color: #FFFFFF;
    line-height: 20px;
    display: block;
    text-decoration: none;
    position: relative;
    }
    #cssm1 ul li a:hover {
    background-color: #335FF7;
    }
    #cssm1 ul li ul li {
    font-size: small;
    width:150px
    }
    #cssm1 ul li ul, #top_nav:hover ul li:hover ul li ul {
    visibility: hidden;
    }
    #cssm1 ul li:hover ul, #top_nav:hover ul li:hover ul li:hover ul {
    visibility: visible;
    }
    #cssm1:hover ul li:hover ul li:hover ul {
    position: absolute;
    margin-left: 150px;
    margin-top: -20px;
    width: 300px;
    }

    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

    CAPTCHA
    This question is for testing whether you are a human visitor and to prevent automated spam submissions.
    Image CAPTCHA
    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.