导航CSS无法正常工作。 （悬停和高度100％问题）

Question

帮助！我很沮丧。一直试图解决这个问题几周（我是新手）。我有一个带有导航菜单的左对齐边栏。这是jsfiddle： http://jsfiddle.net/alh3168/hE6Sv/5/

#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;}

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

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

知道我的问题是什么吗？

以下是我希望它的示例：http://perezweddings.com/blog/

提前非常感谢！