Question

我正在尝试使用CSS和JS的组合来创建导航菜单。应该发生的是，当鼠标悬停在主题（菜单级别0）上时，会出现一个子主题列表，一旦您将鼠标悬停在不同的主题上，它们就会消失。我尝试的方法是让JS函数更改包含子主题列表的元素的“display”属性，在“none”和“block”之间。子主题列表位于包含主要主题的div块中的div块中。

为了澄清发生了什么，我在不同的元素类型周围设置了不同颜色的边框。问题似乎是嵌套的子主题div块实际上没有嵌套，而是在主顶部div块下面呈现，如子主题块周围的绿色边框位于主要主题块周围的蓝色边框外部所示。我正在使用Chrome和Firefox进行测试，行为是一样的，所以必须有一些我不理解的东西并且做错了。

我看到关于下拉菜单的问题很多，我很乐意指出一种更好的方法来实现我想要的东西。但我也想了解我在我的例子中做错了什么，以进一步理解CSS和JS。

Answer 1

这是一个fiddle菜单，子菜单只用css完成。这不完全是你想要完成的，但它应该让你走上正确的道路。

从这里开始，将它们垂直对齐，在页面加载时显示一个div或其他任何内容都不是很多。

我对css进行了评论，因此您可以看到基本实现真正需要的代码很少。

修改 Here's我认为你需要的是一个更新的小提琴。它会在悬停时打开子母素时滑动内容。

Answer 2

事实证明，可能有一个纯粹的CSS解决方案，完全符合我的目标，即一个列表，当一个条目被鼠标悬停时，用一个条目扩展该条目子列表。我最糟糕的问题是我包括“位置：绝对;”在样式中，它阻止包含元素扩展以容纳新显示的子列表。以下是一个完整的代码示例，已在Chrome和Firefox中进行了测试，并由validome.org进行了验证：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<!-- DropDownExpandMenuExample2\TestWEMenus.html - 2012-09-01 -->

<head>
<title>Test of menu styles</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<meta name="author" content=" Bruce Bon "></meta>
<style type="text/css">

div.navcontainer{
    font:           10pt/14pt 'Lucida Grande', Verdana, Helvetica, sans-serif;
    background:     transparent;
    width:          220px;
    margin-left:    0px;
    /* position:      absolute; top: 210px; left: 660px;*/
    position:       absolute; top: 20px; left: 660px;
    padding-left:   10px;
    padding-bottom: 20px;
    color:          #22657F;
    z-index:        10;        /* make sure in front */
    border-left:    2px solid #BB77FF;
    }

/* main topic styles */
ul#navmaintopiclist {
    margin:     0;
    margin-top: 15px;
    padding:    0;
    }
ul#navmaintopiclist li {
    font-size:        14px;
    padding-top:      5px;
    padding-bottom:   5px;
    font-weight:      bold;
    list-style:       none;
    }
ul#navmaintopiclist li a {
    display:         block;
    text-decoration: none;
    }

/* Add the link and hover effects */
ul#navmaintopiclist li:link    {
    color: #333388; text-decoration:none; }
ul#navmaintopiclist li:visited {
    color: #6633AA; text-decoration:none; }
ul#navmaintopiclist li:hover   {
    color: #5555BB;
    text-decoration: none;
    }

ul#navmaintopiclist li:hover ul {
    display: block;
    }

/* Hide the subtopics, set subtopic size, etc */
ul.subtopiclist {
    display:          none; 
    background-color: #BBFFBB;
    width:            180px;        /* Width to help Opera out */
    position:         relative;
    left:             0px;
    }

ul#navmaintopiclist li ul li {
    background:       transparent;
    list-style-type:  none;
    font-family:      'Lucida Grande', Verdana, Helvetica, sans-serif;
    font-size:        14px;
    letter-spacing:   -1px;
    font-weight:      bold;
    margin-left:      -20px;
    }

</style>

</head>


<body>

<div class="navcontainer">

  <ul id='navmaintopiclist'>

    <li><a href="index.html">Home</a></li>

    <li><a href="index.html">Healthy Mind</a>
      <ul class='subtopiclist'>
        <li>Stress and Anxiety</li>
        <li>Emotional Freedom</li>
        <li>Self-Hypnosiss</li>
      </ul>
    </li>

    <li><a href="index.html">Healthy Body</a>
      <ul class='subtopiclist'>
        <li>SubOne</li>
        <li>SubOne</li>
        <li>SubOne</li>
      </ul>
    </li>

</ul>


</div>

</body>

</html>

我的CSS / Javascript下拉菜单测试代码有什么问题？

2 个答案: