Question

这是我的代码，你可以看到，我正在使用位置相对＆amp;绝对。虽然使用绝对意味着我不能在没有下拉框位于同一空间的情况下添加多个下拉列表，但我无法想到解决方案。有什么建议吗？

@Before

function opentabs() {
		window.document.getElementById('about').style.display="block";
		window.document.getElementById('location').style.display="block";
		}
		function closetabs() {
		window.document.getElementById('about').style.display="none";
		window.document.getElementById('location').style.display="none";
		}

#contact {
position: relative;
width: 100px;
height: 50px;
background-color: rgb(51,51,51);
color: white;	
font-family: corbel;
border-color: white;
border-style: solid;
border-width: 2x;
} 

#about {
position: absolute;
width: 100px;
height: 50px;
background-color: rgb(51,51,51);
color: white;	
font-family: corbel;
border-color: white;
border-style: solid;
border-width: 2x;
display: none;
} 
#location {
position: absolute;
width: 100px;
height: 50px;
background-color: rgb(51,51,51);
color: white;	
font-family: corbel;
border-color: white;
border-style: solid;
border-width: 2x;
display: none;
}

Answer 1

我的评论示例：

你必须在定位中玩一下，因为你需要高度+填充+边框+边距作为子菜单顶部的值。或者使用box-sizing: border-box，然后使用百分比值，这样您就不必计算固定的css值。诀窍是将子菜单相对于主菜单按钮进行比较。这样，菜单将与主按钮保持在同一位置，无论它放在文档中的哪个位置。

与z-index结合使用时，绝对定位对于与菜单下方的其他元素重叠非常有用。

<html>
<head>
    <style>
    .menu-btn {
        width: 100px;
        height: 50px;
        background-color: rgb(51,51,51);
        color: white;
        display: block;
        font-family: corbel;
        border-color: white;
        border-style: solid;
        border-width: 2x;
        text-align: center;
    }
    .menu-sub {
        display: none;
        position: relative;
        top: 54px;
    }
    .menu-main:hover > .menu-sub {
        display: block;
    }
    </style>
</head>
<body>
<div class="menu-btn menu-main">Home
    <div class="menu-btn menu-sub">About</div>
    <div class="menu-btn menu-sub">Location</div>
</div>
</body>
</html>

ps：只需在绝对定位的元素上设置左侧和顶部属性，即可修复自己的代码。位置应该像Home的底部70像素一样，因此About可以适合它们。

像

这样的东西

#about {
    position: absolute;
    top: 10px;
} 
#location {
    position: absolute;
    top: 75px;
}

可能已足以解决重叠问题。

由于位置原因，我的菜单不能有多个下拉菜单

1 个答案: