Как правильно выставить раскрывающееся меню

Question

У меня возникли проблемы при выпадающем меню стиля. Все работает нормально, но у меня есть абсолютное позиционирование в моем CSS (что работает), но он, конечно, не работает должным образом, когда я меняю разрешение экрана. Я больше программиста то дизайнера, так что я бы попросить о помощи с этим :-) Вот мое меню

<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> 

А вот соответствующего 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; 
} 

и кусочком JQuery, который делает выпадение

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

Как я могу улучшить это, чтобы быть более независимым от браузера и разрешения? Спасибо за ответы!

EDIT Когда я увеличивать или уменьшать разрешение моего экрана или попытаться взглянуть на нее на большом экране, то выпадающее меню перемещается в левой или правой стороны в зависимости от разрешения. Это, очевидно, то, чего я не знаю. Here ссылка, это не закончена, так что не будет означать для меня :-)

Answer 1

Здесь есть несколько проблем. Я изменил макет, чтобы быть более встроенным, так как большинство разработчиков настраивали этот тип меню.Я также отменил большинство ваших идентификаторов и классов, которые используются таким образом, чтобы почти гарантировать дублирование идентификаторов.

Это не может быть идеальным ответом на ваш вопрос, но я думаю, что в нем есть полезная информация.

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

Answer 2

Вы должны добавить некоторые CSS

#menu {position:relative;} 

и изменить

#submenu {margin-left:14.5em;} 

корректировать по мере необходимости.

Answer 3

#menu должны position:relative;

Таким образом, #submenu будет иметь position:absolute; по #menu и внутри него, left:0px; означает, что он будет придерживаться на левой границе #menu и это то, что вы хотите, нет необходимости в margin-left и margin-top, просто добавьте top:30px; и проверьте его, если он правильно расположен под Galerie, возможно, вам нужно увеличить верхнюю или уменьшить его.

#menu 
{ 
    position:relative; 
} 
#submenu { 
    display: none; 
    padding: 0px; 
    position: absolute; 
    left: 0px; 
    top:30px; //find the best value 
} 

UPDATE

Когда я сказал, что #menu должен иметь position:relative; Я думал, что #menu является DIV, который содержит только <a>Galerie, если это не так, если #menu содержит все 4 ссылки: Uvod .. Cenik .. и т. Д. ... тогда, конечно, он будет придерживаться в начале.

Что вам нужно сделать, это добавить специальный контейнер DIV для Galerie, значит ...

<div id="menu"> 
    <a href="">Uvod</a> 
    <a href="">Cenik</a> 
    <div id="galerieParent"> 
     <a href="">Galerie</a> 
     <div id="submenu"> 
      ...... 
     </div> 
    </div> 
    <a href="">Kontakt</a> 
</div> 

Теперь position:relative; должен быть установлен для #galerieParent.