-1

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

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

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

4

2 回答 2

0

这是一个菜单的小提琴，子菜单仅使用 css 完成。这并不完全是你想要完成的事情，但它应该让你走上正确的道路。

从这里垂直对齐它们、在页面加载时显示一个 div 或其他任何东西都不是一件容易的事。

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

编辑 这是一个更新的小提琴，我认为它可以满足您的需要。在悬停时打开子菜单时，它会向下滑动内容。

于 2012-08-31T19:15:43.387 回答
0

事实证明，可以有一个纯 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>
于 2012-09-02T00:27:23.287 回答