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

我真的不知道如何在ul上创建css，以便在基础文本上显示。我无法在正确的位置得到它。

我只想点击<a>标记，然后会在<a>标记的正下方弹出一个菜单。

Answer 1

尝试： ul .submenu ==＆gt; ul.submenu

在css。

Answer 2

我对你的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 3

我清理了你的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;
}

如果问题仍然存在，请告诉我。就像我之前说的那样，我没有看到“a”正在显示/隐藏。

编辑：好的。我对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中的功能性内容。显然，你需要不同的外观，所以你可以自己玩颜色。如果您有更多问题，请与我们联系。

CSS / Javascript <ul>菜单弹出</ul>

3 个答案: