Question

设置网站的基础知识（刚刚开始学习上周左右）到目前为止，我有这个侧面导航栏，它做我想做的事，减去一件事。我希望有一个容器与我目前拥有的侧导航栏颜色相同但宽度相同，并且无论页面有多长，都可以从页面的顶部延伸到底部。

以下是我正在处理的代码和jsfiddle：http://jsfiddle.net/A977A/

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id"sideContainer">
  <ul id="MenuBar1" class="MenuBarVertical">
    <li><a href="index.html">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a class="MenuBarItemSubmenu" href="#">Post </a>
      <ul>
        <li><a href="#">Type 1</a></li>
        <li><a href="#">Type 2</a></li>
        <li><a href="#">Type 3</a></li>
      </ul>
    </li>
    <li><a href="#">Browse</a>
      <ul>
        <li><a href="#">Type 1</a></li>
        <li><a href="#">Type 2</a></li>
        <li><a href="#">Type 3</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Login</a></li>
  </ul>

</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1");
</script>
</body>
</html>

我也想知道是否有办法在普通css而不是JS中弹出子菜单？（JS我不打算去那个网站工作，因为它不是我的问题）

Answer 1

首先，您需要将=添加到您的div：

<div id="sideContainer">

然后将其添加到CSS文件中的#sideContainer：

background-color: #666;
height: 100%;

赋予高度100％的值将其设置为浏览器窗口的高度。

Answer 2

要以普通css而不是JS来弹出子菜单，请更改

ul.MenuBarVertical ul.MenuBarSubmenuVisible {
  left: 0;
}

到

ul.MenuBarVertical li:hover ul {
  left: 0;
}

容器从上到下匹配导航栏

2 个答案: