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

我目前正在用CSS编写一个点击

下拉菜单。我想将子菜单的div容器直接放置在标签下方。我已经在每个特定的容器上从左到右硬编码了百分比，但是当它在更大的屏幕上显示时，一切都会发生变化。我知道这样做是错误的，我只是无法让其他任何东西发挥作用。我不懂Javascript或Jquery。实现这种外观的最简单方法是什么，可以在多种浏览器和屏幕大小上工作


输入{
不透明度：.3；
右边距：-.7em；
左边距：0em；
溢出：可见；
}
输入+标签{
颜色：#fff；
显示：内联块；
填充：6px 8px 10px 24px；
背景图像：黑色url（../images/glossyback2.gif）；
高度：8px；
保证金：0；
线高：12px；
位置：相对位置；
}
输入：悬停+标签：悬停{
背景#3385D6；
}
输入+标签+div{
保证金：0；
边缘顶部：2倍；
填充：16px；
边框：1px实心；
宽度：100%；
高度：自动；
位置：绝对位置；
顶部：23px；
显示：无；
}
输入：选中+标签+div{
显示：块；
}
输入：选中+标签{
z指数：3；
}
/*GUI样式：*/
.菜单{
z指数：1000；
高度：1px；
宽度：100%；
填充：20px；
位置：相对位置；
背景图像：黑色url（../images/glossyback.gif）；
背景色：#0066CC；
文本对齐：居中；
字体系列：Verdana，日内瓦，无衬线；
}
.菜单a{
文字装饰：无；
颜色：#fff；
}
.菜单输入{
显示：无；
}
.菜单a组{
文字装饰：无；
颜色：蓝色；
}
.menu div td:悬停{
文字装饰：无；
背景色：#3385D6；
颜色：#ffffff；
}
.菜单div输入{
显示：内联；
不透明度：1；
保证金：0；
}
分区菜单输入+标签{
z指数：1000；
填充：0；
边框颜色：#ccc；
边框宽度：0 1px；
高度：19px；
边缘：0-0.23em；
}
.菜单标签范围{
z指数：1000；
字体大小：12px；
线高：9px；
填充：6px1em 12px1em；
显示：块；
页边顶部：-1px；
背景图像：url（../images/glossyback.gif）重复-x左下角；
}
.菜单标签范围a：悬停{
背景图像：黑色url（../images/glossyback2.gif）；
}
.菜单标签span.startcap..菜单标签span.endcap{
文字装饰：无；
z指数：1000；
填充：0；
背景图像：黑色url（../images/glossyback.gif）；
浮动：左；
宽度：8px；
高度：24px；
左边距：-6px；
}
.菜单标签span.endcap{
z指数：1000；
背景图像：黑色url（../images/glossyback.gif）；
浮动：对；
右边距：-6px；
}
.菜单输入+标签+div{
位置：绝对位置；
边框：1px实心#808080；
边框宽度：2px 1px 1px；
背景：#F0F6FC；
文本对齐：左对齐；
-webkit边界半径：6px；
-moz边界半径：6px；
-o-边界半径：6px；
边界半径：6px；
宽度：15%；
顶部：35px；
左：35px；
}
.菜单输入+标签+分区>分区p{
字体大小：12px；
线高：18px；
左边距：自动；
右边距：自动；
宽度：100%；
文本对齐：左对齐；
z指数：1000；
}
.菜单输入+标签+div>div{
z指数：1000；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
边框：1px实心#阿巴巴；
边框宽度：2px 1px 1px；
-webkit边界半径：5px；
-moz边界半径：5px；
-o-边界半径：5px；
边界半径：5px；
填充：16px；
垫面：5px；
背景图像：url（../images/glossyback2.gif））；
}
.菜单输入：选中+标签{
背景色：#AFCEEE；
边框颜色：#6696CB；
z指数：1000；
}
.菜单输入：选中+标签范围{
背景图像：url（../images/glossyback.gif）；
}
.菜单输入：选中+标签span.startcap{
背景图像：url（../images/glossyback.gif）；
}
.菜单输入：选中+标签span.endcap{
背景图像：url（../images/glossyback.gif）；
z指数：1000；
}

使用者
元素
将
输入
和菜单包装在带有
位置：相对
的容器中，并设置为菜单
位置：绝对
和
顶部：100%
，如本例所示：


.wrapper{
位置：相对位置；
显示：内联块；
右边距：30px；
}
.我的菜单{
显示：无；
位置：绝对位置；
最高：100%；
左：0；
背景#4197CF；
宽度：80px；
填充：0 5px；
}
输入：选中+标签+.我的菜单{
显示：块；
}

使用者
要素1

要素2

要素3

其他用户
要素4

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

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