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

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

將input和菜單包裝在一個容器中， position: relative並設置為菜單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>

上面是一個基本的例子，只是為了向你展示如何去做。 只需添加您的樣式。

Answer 2

看看這個例子。

我使用這個網站作為參考來進行類似的下拉設置。 這有一些附加功能，使其更加華麗和流暢。 我想我會提供一種替代方法，因此您可以選擇如何設置下拉列表。

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