CSS / Javascript <ul>Всплывающее меню

Question

Я пытаюсь создать простой эффект всплывающего меню, используя якоря внутри div и неупорядоченные списки.

Я хочу, чтобы HTML выглядел примерно так:

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

Вот мой javascript [довольно просто, не проблема, я не думаю]:

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

CSS я верю, где проблема:

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

Я нея действительно знаю, как создать CSS на UL, чтобы он отображался поверх основного текста.Я не могу получить это в нужном месте.

Я просто хочу щелкнуть тег <a>, и сразу под тегом <a> появится меню.

Answer 1

Я внес пару изменений в ur css - я прямо ссылаюсь на подменю класса

.submenu
    {
        list-style: none;
        display: none;
        border: solid 1px #000;
        border-top: none;
        background: #FFFFFF;
        position: relative;
        top: 4px;
        margin:0;
        padding: 0 5px;
        width: 150px;
        clear: both;
        z-index: 2;
    }
    .submenu li
    {
        background: none;
        display: block;
        float: none;
        margin: 0 6px;
        border: 0;
        height: auto;
        line-height: normal;
        border-top: solid 1px #00ff00;
    }
    .submenu li a
    {
        background: none;
        display: block;
        float: none;
        padding: 6px 6px;
        margin: 0;
        border: 0;
        height: auto;
        color: #ff0000;
        line-height: normal;
    }
    .submenu li a:hover
    {
        background: #0000ff;
    }

Answer 2

Я очистил ваш 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;
}

Дайте мне знать, если проблема все еще существует.Как я уже говорил ранее, я не вижу движения «а» на шоу / скрытии.

---

РЕДАКТИРОВАТЬ: ОК.Я намного сильнее с jQuery, чем с простым javascript.Если вы не можете использовать jQuery по какой-либо причине, я должен предоставить вам возможность выполнить то же самое с обычным js.Извините!

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 (с использованием jQuery):

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

Я включил только функционалтакие вещи в CSS.Очевидно, вам нужен другой внешний вид, поэтому вы можете играть с цветами самостоятельно.Дайте мне знать, если у вас есть еще вопросы.

Answer 3

Try: ul .submenu ==> ul.submenu

в css.