Question

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 than a designer.

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?

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.

Answer 1

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();
});