Question

我目前正在CSS中编写一个点击式drop-down菜单。我想将我的div容器放在我标签下面的子菜单中。我在每个特定容器上硬编码了左边的百分比，但是第二个显示在更大的屏幕上，一切都在变化。我知道这是一个错误的方法，我只是无法得到任何其他工作。我不懂Javascript或Jquery。实现这种可以在多种浏览器和屏幕尺寸上工作的最简单方法是什么？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

将input和菜单换入包含position: relative的容器，并设置为菜单position: absolute和top: 100%，就像在此示例中一样：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

上面是一个基本的例子，只是为了告诉你如何做到这一点。只需添加你的风格。

Answer 2

检查this example。

我使用this website作为参考来制作类似的下拉设置。这有一些额外的功能，使它更华丽和流畅。我想提供一个替代方案，以便您可以选择如何设置下拉菜单。

<强> HTML：

<div class="menu-wrap">
  <nav class="menu">
    <ul class="clearfix">
      <li><a href="#">Home</a></li>
      <li>
        <a href="#">Users <span class="arrow">&#9660;</span></a>
        <ul class="sub-menu">
          <li><a href="index.php?page=new_element">New Element</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Elements <span class="arrow">&#9660;</span></a>
        <ul class="sub-menu">
          <li><a href="index.php?page=new_element">New Element</a></li>
          <li><a href="index.php?page=exst_element">Existing Elements</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

<强> CSS：

.clearfix:after {
  display: block;
  clear: both;
}

/*----- Menu Outline -----*/

.menu-wrap {
  width: 100%;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
}

.menu {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.menu li {
  margin: 0px;
  list-style: none;
  font-family: Verdana, Geneva, sans-serif;
  background-color: #0066CC;
}

.menu a {
  transition: all linear 0.15s;
  color: white;
}

.menu li:hover > a,
.menu .current-item > a {
  text-decoration: none;
  color: #F4F9FD1;
}

.menu .arrow {
  font-size: 11px;
  line-height: 0%;
}

/*----- Top Level -----*/

.menu > ul > li {
  float: left;
  display: inline-block;
  position: relative;
  font-size: 19px;
}

.menu > ul > li > a {
  padding: 10px 40px;
  display: inline-block;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}

.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
  background: #80B2E6;
}

/*----- Bottom Level -----*/

.menu li:hover .sub-menu {
  z-index: 1;
  opacity: 1;
}

.sub-menu {
  width: 100%;
  padding: 5px 0px;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: -1;
  opacity: 0;
  transition: opacity linear 0.15s;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  background: #005CB8;
}

.sub-menu li {
  display: block;
  font-size: 16px;
}

.sub-menu li a {
  padding: 10px 30px;
  display: block;
}

.sub-menu li a:hover,
.sub-menu .current-item a {
  background: #80B2E6;
}

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

2 个答案: