How to correctly style drop-down menu


Tags: jquery,html,css,drop-down-menu

Problem :

I ran into problems while styling drop-down menu. Everything is working fine but I have absolute positioning in my CSS (which works) but it of course doesn't work properly when I change my screen resolution. I am more programmer a then designer so I would to ask for some help with this:-) Here is my menu

<div class="navigation">
<!-- some links -->
    <div id="menu">
        <a href="gallery.html">Galerie</a>
        <div id="submenu">
            <a href="galleryOldRooms.html" title="Starší pokoje">Starší pokoje</a><br />
            <a href="galleryNewRooms.html" title="Novější pokoje">Novější pokoje</a>
        </div>
    </div>
</div>

And here is the relevant CSS

#submenu {
   display: none;
   padding: 0px;
   margin-top: 5em;
   margin-left: 27.5em;
   position: absolute;
   left: 0px;
}
.nav a {
   border-right: 2px solid #161616;
   color: #CCC;
   float: left;
   font: bold 1em Verdana,sans-serif;
   line-height: 51px;
   padding: 0 20px;
}

And piece of JQuery which does the drop out

$(document).ready(function() {
    $("#menu").hover(function() {
        $("#submenu").fadeIn(); 
        }, 
    function() {
        $("#submenu").fadeOut();
    });
});

How can I improve this to be it more browser and resolution independent?Thanks for answers!

EDIT When I increase or decrease resolution of my display or try to look at it on bigger screen, the the drop-down menu is moved to either left or right side depending on the resolution. Which is obviously something I don't. Here is the link, it's not finished so don't be mean to me:-)



Solution :

There are a number of issues here. I've modified the layout to be more inline with the way most developers set up this type of menu. I've also reversed most of your IDs and classes, which are being used in such a way as to almost guarantee duplicate IDs.

This may not be an ideal answer to your question, but I think there's some helpful information in it.

http://jsfiddle.net/mrPse/8/

#nav {
    position: relative;
}
#nav a {
    border-right: 2px solid #161616;
    color: #CCC;
    float: left;
    font: bold 1em Verdana, sans-serif;
    line-height: 51px;
    padding: 0 20px;
}
#nav > li {position: relative; display: inline-block;}
#nav li ul li a {border-right: 0;}
.submenu {
    display: none;
    padding: 0px;
    margin-top: 3em;
    position: absolute;
    left: auto;
    width: 180px;
}
.submenu li a {border-right: 0;}

<ul id="nav">
    <li><a href="index.html">Úvod</a></li>
    <li><a href="prices.html">Ceník</a></li>
    <li class="menu">
        <a href="gallery.html">Galerie</a>
        <ul class="submenu" style="display: none;">
            <li><a title="Starší pokoje" href="galleryOldRooms.html">Starší pokoje</a></li>
            <li><a title="Novější pokoje" href="galleryNewRooms.html">Novější pokoje</a></li>
        </ul>
    </li>
    <li><a href="contact.html">Kontakt</a>

    </li>
</ul>

$(".menu").hover(function () {
    $(this).children(".submenu").fadeIn();
}, function () {
    $(this).children(".submenu").fadeOut();
});

    CSS Howto..

    How to make a div tag without margins in css? [duplicate]

    how to change single li element in a menu using lists?

    How to correct CSS formatting problem in Visual Studio

    How can I take pseudo:after { content: “Value”; } value dynamically in this snippet?

    ¿How to create text slider animation?

    How to override the width property in css [closed]

    How do you avoid class name collisions? [closed]

    How To Apply CSS rule to Classes with Specific Keywords Inside Them?

    CSS: How to set up border radius cross browser (only IE8 and IE9 missing ?)

    How to start ordered list from 2 not 1 with w3c validity and IE 6 compatibility?

    how to change height of ellipse in radial gradient in css for background property

    How to serve css files in djangos's flatpages?

    how to specify a different image in css depending if the user visits on a desktop or a mobile browser

    How to add a fade out at the end of this CSS animation?

    jQuery or CSS - How do you make a link in a table row appear underlined even when the cursor is in a neighbouring cell?

    Ionic on Codepen: how to start a new pen and get Ionic support

    How do you control CSS styles from within the CMS interface in Zotonic?

    How to center two columns using CSS without using a fixed width container?

    how to hide the content of the div in css

    How to change font-size of a tag using inline css?

    Css Trick - How to align this div

    How to apply CSS to only immediate children of a certain class

    Show background image if container content is small (responsive)

    how to do jquery once fade out has finished?

    how to set max size of a counter?

    How to make scrollable table's header fixed using css fixed position property?

    100% width = viewport width. How to make it as wide as is page body instead?

    How to center a IMG tag horizontaly and vertically using html and css in ie7?

    How do I add a text shadow with CSS2 [closed]

    Android, How can I apply CSS into WebView?