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

我在设置下拉菜单样式时遇到问题。一切都很好，但我的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>

还有一段JQuery，它会退出

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

我如何改进它，使其更独立于浏览器和分辨率？感谢您的回答

编辑

---

当我提高或降低显示器的分辨率，或尝试在更大的屏幕上查看时，下拉菜单会根据分辨率向左或向右移动。这显然是我不知道的。是链接，它还没有完成，所以不要对我刻薄：-）

你需要添加一些CSS

#menu {position:relative;}

改变

#submenu {margin-left:14.5em;}

根据需要进行调整。

菜单必须有一个

位置：相对

这样，
#子菜单将具有
位置：绝对
根据
#菜单及其内部，
左：0px
意味着它将粘贴在
#菜单的左边框上，这是您想要的，不需要
左边距
和
右边距顶部
，只需添加
顶部：30px并测试它是否在Galerie下正确定位，可能需要增加顶部或减少顶部

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

更新

当我说
#菜单
必须有一个
位置：相对
我认为
#菜单
是一个只包含

......

现在，
位置：相对#galerieParent
设置code>，这里有许多问题。我修改了布局，使其更符合大多数开发人员设置此类菜单的方式。我还反转了大多数ID和类，它们的使用方式几乎保证了重复ID

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


#导航{
位置：相对位置；
}
#导航a{
右边框：2px实心#161616；
颜色：#CCC；
浮动：左；
字体：粗体1em Verdana，无衬线；
线高：51px；
填充：0 20px；
}
#导航>li{位置：相对；显示：内联块；}
#nav li ul li a{右边界：0；}
.子菜单{
显示：无；
填充：0px；
边缘顶端：3em；
位置：绝对位置；
左：自动；
宽度：180px；
}
.子菜单LIA{右边框：0；}












$（“.menu”）.hover（函数（）{
$（this.children（“.submenu”）.fadeIn（）；
}，函数（）{
$（this.children（“.submenu”）.fadeOut（）；
});
你能解释一下当你调整尺寸时会发生什么，你在寻找什么样的行为吗？你有菜单链接到网站吗？我完全按照你写的那样做了，但是菜单粘贴在菜单的开头，而不是Galerie，那么问题出在哪里呢？
#menu
{
    position:relative;
}
#submenu {
   display: none;
   padding: 0px;
   position: absolute;
   left: 0px;
   top:30px; //find the best value
}

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

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