如何正确设置下拉菜单的样式

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

如何才能提高浏览器和分辨率的独立性？感谢您的回答！

编辑当我增大或减小显示器的分辨率或尝试在更大的屏幕上查看时，下拉菜单会根据分辨率移动到左侧或右侧。 这显然是我没有的。 这是链接，它没有完成所以不要对我意味着:-)

Answer 1

#menu必须有一个position:relative;

这样， #submenu将具有position:absolute; 根据#menu及其内部， left:0px; 意味着它会粘在#menu的左边界上，这就是你想要的，不需要margin-left margin-top和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> 画廊 ，如果不是这种情况下，如果#menu包含了所有4个链接：Uvod .. Cenik ..等等......那么当然会坚持一开始。

你需要做的是为Galerie添加一个特殊的div容器 ，意思是......

<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设置。

Answer 2

这里有很多问题。 我已经修改了布局，使其与大多数开发人员设置此类菜单的方式更加一致。 我还颠倒了你的大多数ID和类，它们的使用方式几乎可以保证重复的ID。

这可能不是您问题的理想答案，但我认为其中有一些有用的信息。

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 3

你需要添加一些CSS

#menu {position:relative;}

并改变

#submenu {margin-left:14.5em;}

根据需要调整。