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

What is wrong in my CSS/Javascript drop down menu test code?

本文关键字：什么 问题 代码 测试 CSS Javascript 下拉菜单 我的      更新时间：2023-09-26

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

为了弄清楚发生了什么，我在不同的元素类型周围设置了不同颜色的边界。问题似乎是嵌套的子主题div块并不是真正嵌套的，而是在主顶部div块下方呈现的，正如围绕子主题块的绿色边界在围绕主主题块的蓝色边界之外的事实所示。我正在用Chrome和Firefox进行测试，行为是一样的，所以肯定有一些我不理解的地方，而且我做错了。

我看到关于下拉菜单有很多问题，我很高兴能找到一种更好的方式来实现我想要的。但我也想了解我在示例中做错了什么，以进一步理解CSS和JS。

这里有一个菜单，子菜单只使用css。这并不完全是你想要实现的，但它应该让你走上正确的道路。

从这里开始，垂直对齐它们，在页面加载时显示一个div，或者其他什么都不需要太多。

我对css进行了注释，这样您就可以看到基本实现真正需要的代码是多么的少。

编辑这是一个更新的fiddle，我认为它可以满足你的需要。当悬停时打开一个sub-meun时，它可以向下滑动内容。

事实证明，有可能拥有一个只支持CSS的解决方案，它完全符合我的目标，即一个列表，当一个条目被鼠标悬停时，它会用一个子列表扩展该条目。我最糟糕的问题是，我在样式中包含了"position:absolute；"，这阻止了包含元素的扩展以容纳新显示的子列表。以下是一个完整的代码示例，它已经在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>
相关文章：