我在设计下拉菜单样式时遇到了问题。一切都很好,但我在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();
});
});
我如何改进这一点,使其更独立于浏览器和分辨率?
编辑
当我提高或降低显示器的分辨率,或者试图在更大的屏幕上查看时,下拉菜单会根据分辨率的不同而移动到左侧或右侧。显然我不会这样做。Here是链接,它还没有完成。
3条答案
按热度按时间bkhjykvo1#
#menu
必须具有position:relative;
这样一来,
#submenu
将根据#menu
得到position:absolute;
,其中,left:0px;
意味着它将粘在#menu
的左边框上,这就是您想要的,不需要margin-left
和margin-top
,只需添加top:30px;
,并测试它是否正确定位在Galerie下,可能需要增加或减少顶部。更新
当我说
#menu
必须有一个position:relative;
时,我以为#menu
是一个div,只包含<a>
Galerie,如果不是这样,如果#menu
包含所有4个链接:Uvod .. Cenik..等等...那么它当然会在一开始就坚持下去。您需要做的是为Galerie添加一个特殊的div容器,意味着...
现在,必须将
position:relative;
设置为#galerieParent
。1aaf6o9v2#
这里有很多问题。我已经修改了布局,使其更符合大多数开发人员设置这种类型菜单的方式。我还颠倒了大部分ID和类,它们的使用方式几乎保证了重复的ID。
这可能不是你问题的理想答案,但我认为其中有一些有用的信息。
http://jsfiddle.net/mrPse/8/
3b6akqbq3#
您需要添加一些CSS
并且变更了
根据需要进行调整。