Question

I’m trying to create a simple menu pop-up effect using anchors within a div and unordered lists.

I want the html to look something like this:

<div class="info">
 <a href="#">Link</a> | 
 <a onclick="menu('id1');">Another Link</a>
 <ul id="id1" class="submenu">
  <li><a href="dfhdfh">Stuff</a></li>
  <li><a href="aetjetjsd">Other</a></li>
  <li><a href="etetueb">Hooray</a></li>
 </ul>
</div>

Here is my javascript [pretty simple, not the problem, i don’t think]:

function menu(id) {
    var myLayer = document.getElementById(id);
    if (myLayer.style.display == "none" || myLayer.style.display == "") {
        myLayer.style.display = "block";
    } else {
        myLayer.style.display = "none";
    }
}

The css is I believe where the problem is:

.info ul .submenu
{
 border: solid 1px #000;
 border-top: none;
 background: #FFFFFF;
 position: relative;
 top: 4px;
 width: 150px;
 padding: 6px 0;
 clear: both;
 z-index: 2;
 display: none;
}

.info ul .submenu li
{
 background: none;
 display: block;
 float: none;
 margin: 0 6px;
 border: 0;
 height: auto;
 line-height: normal;
 border-top: solid 1px #00ff00;
}

.info .submenu li a
{
 background: none;
 display: block;
 float: none;
 padding: 6px 6px;
 margin: 0;
 border: 0;
 height: auto;
 color: #ff0000;
 line-height: normal;
}

.info .submenu li a:hover
{
 background: #0000ff;
}

I don’t really know how to create the css on the ul so that if appears over the underlying text. I can’t get it in the right spot.

I just want to click the <a> tag and a menu will pop up directly below the <a> tag.

Answer 1

I cleaned up your CSS:

.info ul.submenu
{
border: solid 1px #000;
border-top: none;
background-color: #fff;
position: relative;
top: 4px;
width: 150px;
padding: 6px 0px 0px 0px;
z-index: 2;
display: none;
}

.info ul.submenu li
{
display: block;
border: none;
border-top: solid 1px #00ff00;
}

.info ul.submenu li a
{
display: block;
padding: 6px 0px 6px 4px;
color: #ff0000;
}

.info ul.submenu li a:hover
{
background: #0000ff;
}

Let me know if the problem is still there. Like I said earlier, I don’t see “a”‘s moving on show/hide.

---

EDIT: Ok. I’m much more stronger with jQuery as oppose to plain javascript. If you cannot use jQuery for whatever reason, I have to leave it up to you to perform the same with plain js. Sorry!

HTML:

<ul class="root">
  <li>
    <div class="menuHeader">Something 1</div>
    <ul class="parent">
      <li>asdf 1.1</li>
      <li>asdf 1.2</li>
      <li>asdf 1.3</li>
    </ul>
  </li>
  <li>
    <div class="menuHeader">Something 2</div>
    <ul class="parent">
      <li>asdf 2.1</li>
      <li>asdf 2.2</li>
      <li>asdf 2.3</li>
    </ul>
  </li>
  <li>
    <div class="menuHeader">Something 3</div>
    <ul class="parent">
      <li>asdf 3.1</li>
      <li>asdf 3.2</li>
      <li>asdf 3.3</li>
    </ul>
  </li>
</ul>

CSS:

.info ul.root > li
{
  width: auto;
  float: left;
  border:solid 1px blue;
  padding:5px;
}
.info ul.parent
{
  padding:0px;
  display:none;
}
.info .menuHeader
{
  cursor:pointer;
}
.info li
{
  list-style: none;
}

Javascript (utilizing jQuery):

$(document).ready(function() {
  $('.menuHeader').click(function(event) {
    $('.parent').hide();
    $(this).siblings('.parent').show();
  });
});

I included only the functional kind of stuff in the CSS. Obviously, you need different look, so you may play with colors on your own. Let me know if you have more questions.