javascript - CSS Menu-子菜单下拉定位？

Question

我目前正在用 CSS 编写一个点击式 drop-down 菜单。我想将我的子菜单的 div 容器直接放在我的标签下方。我已经对每个特定容器左侧的百分比进行了硬编码，但是当它显示在更大的屏幕上时，一切都发生了变化。我知道这样做是错误的方法，我只是找不到其他任何东西来工作。我不知道 Javascript 或 Jquery。实现这种适用于多种浏览器和屏幕尺寸的外观的最简单方法是什么？

input {
        opacity: .3;
        margin-right: -.7em;
        margin-left: 0em;
        overflow: visible;
    }
    
    input + label {
        color: #fff;
        display: inline-block;
        padding: 6px 8px 10px 24px;
        background-image: black url(../images/glossyback2.gif);
        height: 8px;
        margin: 0;
        line-height: 12px;
        position: relative;
    }
    
    input:hover + label:hover {
        background: #3385D6;
    }
    
    input + label + div {
        margin: 0;
        margin-top: 2px;
        padding: 16px;
        border: 1px solid;
        width: 100%;
        height: auto;
        position: absolute;
        top: 23px;
        display: none;
    }
    
    input:checked + label + div {
        display: block;
    }
    
    input:checked + label {
        z-index: 3;
    }
    		
    		/* GUI styled: */
    		
    .menu {
        z-index: 1000;
        height: 1px;
        width: 100%;
        padding: 20px;
        position: relative;
        background-image: black url(../images/glossyback.gif);
        background-color: #0066CC;
        text-align: center;
        font-family: Verdana, Geneva, sans-serif;
    }
    
    .menu a {
        text-decoration: none;
        color: #fff;
    }
    
    .menu input {
        display: none;
    }
    
    .menu div a {
        text-decoration: none;
        color: blue;
    }
    
    .menu div td:hover {
        text-decoration: none;
        background-color: #3385D6;
        color: #ffffff;
    }
    
    .menu div input {
        display: inline;
        opacity: 1;
        margin: 0;
    }
    
    div.menu input + label {
        z-index: 1000;
        padding: 0;
        border-color: #ccc;
        border-width: 0 1px;
        height: 19px;
        margin: 0 -.23em;
    }
    
    .menu label span {
        z-index: 1000;
        font-size: 12px;
        line-height: 9px;
        padding: 6px 1em 12px 1em;
        display: block;
        margin-top: -1px;
        background-image: url(../images/glossyback.gif) repeat-x bottom left;
    }
    
    .menu label span a:hover {
        background-image: black url(../images/glossyback2.gif);
    }
    
    .menu label span.startcap, .menu label span.endcap {
        text-decoration: none;
        z-index: 1000;
        padding: 0;
        background-image: black url(../images/glossyback.gif);
        float: left;
        width: 8px;
        height: 24px;
        margin-left: -6px;
    }
    
    .menu label span.endcap {
        z-index: 1000;
        background-image: black url(../images/glossyback.gif);
        float: right;
        margin-right: -6px;
    }
    
    .menu input + label + div {
        position: absolute;
        border: 1px solid #808080;
        border-width: 2px 1px 1px 1px;
        background: #F0F6FC;
        text-align: left;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -o-border-radius: 6px;
        border-radius: 6px;
        width: 15%;
        top: 35px;
        left: 35px;
    }
    
    .menu input + label + div > div p {
        font-size: 12px;
        line-height: 18px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        text-align: left;
        z-index: 1000;
    }
    
    .menu input + label + div > div {
        z-index: 1000;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 1px solid #ABABAB;
        border-width: 2px 1px 1px 1px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
        padding: 16px;
        padding-top: 5px;
        background-image: url(../images/glossyback2.gif));
    }
    
    .menu input:checked + label {
        background-color: #AFCEEE;
        border-color: #6696CB;
        z-index: 1000;
    }
    
    .menu input:checked + label span {
        background-image: url(../images/glossyback.gif);
    }
    
    .menu input:checked + label span.startcap {
        background-image: url(../images/glossyback.gif);
    }
    
    .menu input:checked + label span.endcap {
        background-image: url(../images/glossyback.gif);
        z-index: 1000;
    }

<div class="menu">
        <input type="radio" name="UItab" id="taba" checked="checked">
        <label for="taba"><span class="startcap"></span><span>
        <a href="home.php">Home</a></span></label>
    
        <input type="radio" name="UItab" id="tabb">
        <label for="tabb"><span>Users</span></label>
        <div style="height:5px;left:34.25%;width:10.5%">
            <div>
                <table>
                    <tr>
                        <td id="linka"><a href="index.php?page=user_management">
        User Management</a></td>
                    </tr>
                </table>
            </div>
        </div>
    
        <input type="radio" name="UItab" id="tabc">
        <label for="tabc"><span>Elements</span></label>
        <div style="height:20px;left:38.5%;width:10.5%;">
            <div>
                <table>
                    <tr>
                        <td id="linkb"><a href="index.php?page=new_element">
        New Element</a></td>
                    </tr>
                    <tr>
                        <td id="linkc"><a href="index.php?page=exst_element">
        Existing Elements</a></td>
                    </tr>
                </table>
            </div>
        </div>

Answer 1

用 position: relative 将 input 和菜单包裹在容器中，并设置为菜单 position: absolute 和 top : 100% 就像在这个例子中一样:

.wrapper{
    position: relative;
    display: inline-block;  
    margin-right: 30px;
}

.my-menu{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #4197CF;
    width: 80px;
    padding: 0 5px;
}

input:checked + label + .my-menu {
    display: block;
}

<div class="wrapper">
    <input type="radio" name="UItab" id="tabb">
    <label for="tabb"><span>Users</span></label>
        
    <div class="my-menu">
            <p>Element 1</p>
            <p>Element 2</p>
            <p>Element 3</p>
    </div>
</div>
    
<div class="wrapper">
    <input type="radio" name="UItab" id="tabb1">
    <label for="tabb1"><span>Other Users</span></label>
        
    <div class="my-menu">
            <p>Element 4</p>
            <p>Element 5</p>
            <p>Element 6</p>
    </div>
</div>

以上是一个基本示例，只是为了向您展示如何操作。只需添加您的样式。