CSS Menu- Submenu drop down positioning?

Question

I'm currently writing a on-click drop-down menu in CSS. I want to position my div container for my submenu directly beneath my label. I've hard coded the percentage from the left on each specific container, but the second it is displayed on a larger screen, everything shifts. I know that was a wrong way to go about it, I just couldn't get anything else to work. I don't know Javascript or Jquery. What is the easiest way to achieve this look that will work on multiple browsers and screen size?

 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

Wrap the input and the menu in a container with position: relative and set to the menu position: absolute and top: 100% just like in this example:

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

The above is a basic example just to show you how to do it. Just add your styles.

Answer 2

Check this example out.

I used this website as a reference to make a similar drop-down setup. This has some added features that make it a bit more flashy and fluid. Figured I'd provide an alternative so you have some options for how you want to set up your drop-downs.

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