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 do you use HTML5 tags while supporting Progressive Enhancement for no-script clients that don't natively recognize unknown elements?

    How to change width to fill the remaining space (CSS)

    How to Style Similar to an Exam Questi-n

    how to exclude tags of certain types using LESS css

    how to trigger a stored property with css color change?

    How to save user's choice of theme of web pages

    How to interchange table cells using Pure CSS

    How to delete first pseudo after

    How to fix Image on top of text with css

    How to Prefix this Input element, using CSS

    How to Set custom text Color in QTextEdit?

    how to make the postion close X in css file in top instead of bottom

    how to select the first element of each class with css

    How do you right-align text into a column?

    How to have this horizontal CSS based navigation menu work properly?

    How to avoid AjaxMin removal for IE9 and below CSS hack

    How to switch between specific CSS files using jQuery?

    How to align text in CSS

    How to add a color in the
    bottom content area?

    How to make divs float on both ends of another div?

    CSS - How to make if “Firefox, Safari, Opera and IE”?

    How do I make the textbox close to the text label

    How to create CSS for an existing web application that now is used in a Kiosk with touch screen

    How to set border's thickness in percentages?

    How come the first

    How to add colour classes to this css

    How to develop a webpage with Bootstrap [closed]

    CSS - Superfish, how to float 4th level of dropdown

    Symfony2 Form Type - how to set form CSS class as attribute?

    How would you code this: The SO Menu [closed]