Javascript 导航CSS不起作用。（悬停和高度100%问题）

救命啊！我很沮丧。几个星期来一直在想这个问题（我是个新手）。我有一个带导航菜单的左对齐侧栏。以下是JSFIDLE：

1） 我希望滑出菜单的高度为height100%

2） 当我将鼠标悬停在滑动菜单上单击子链接时，它会消失

知道我的问题是什么吗

下面是我希望它看起来像什么的一个例子：

---

非常感谢

您需要改用mouseenter/mouseleave（事件传播）：@Wolff当我单击您的链接时，我看到页面未找到。很抱歉：非常感谢@A.Wolff！非常感谢。你知道如何使高度达到100%吗？

#navcontainer {
  font-family:Arial, Helvetica, sans-serif;
  font-size:16px;
  font-weight: bold;
  text-decoration: none;
  height:37px;}
ul#navlist, ul#navlist ul, ul#navlist li {list-style-type: none;}
ul#navlist {margin:0 0 30px 0;}
ul#navlist li {display:inline;}
ul#navlist li a {padding: 8px 10px 7px 10px;
  background:#000000;
  border-bottom:3px #00aeef solid;
  text-decoration:none;
  color:#FFF;
  margin:0 -3px 0 -2px;}
ul#navlist li a:hover {color:#000;
  background:#00aeef;}
ul#navlist li a:active {color: #000;
  background: #00aeef;}
ul#navlist li a.current {color:#000;
  background:#00aeef;}
ul#subnavlist {display:none;
  text-align:left;
  padding: 5px 9px 0 9px;
  font-weight: bold;
  text-decoration:none;
  clear:both;
  margin:0 0 0 128px;
  box-shadow:2px 2px 4px #000;
  position:relative;
  top:29px;}
ul#subnavlist li {float:none;}
ul#subnavlist li a {background:#A1BF73;
 font-size:12px;
 margin-top: 0px;
 color:#000;
 height:21px;}
ul#navlist li:hover ul#subnavlist {display: block;
  position: absolute;
  margin-top:7px;
  padding-right:0;}
ul#navlist li:hover ul#subnavlist li a {display: block;
  border: none;
  padding: 5px 10px 9px 10px;
  margin-left:-9px;
  margin-top:-7px;
  margin-bottom:-5px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  background:#00aeef;}
ul#navlist li:hover ul#subnavlist li a:hover {
  background:#000000;
  color:#FFFFFF;
  padding: 5px 10px 9px 10px;}
ul#navlist li:hover {background:#00aeef;}