javascript - Jquery 鼠标悬停子菜单滑出高度

Question

我是新手；需要一些帮助!我创建了一个带有滑出子菜单的左对齐导航菜单。除了子菜单的高度，我对所有内容都很满意。如何使整个滑出式菜单(不透明的)达到整个屏幕的 100% 高度？希望它看起来像这样:http://perezweddings.com/blog/

这是我的 jsfiddle:http://jsfiddle.net/alh3168/hE6Sv/10/

我需要更改这里的内容吗？:

div.menu ul.second li a {
  width: 150px;
  bottom: auto;
  min-height: 100%;
  background-color: #B2CC7F;
  color: #00293E;
  text-decoration: none;
  display: block;
  padding: 7px 10px 0 0;
  text-align: left;
  cursor: pointer;
  cursor: hand;
  background: #000; 
  background-color:rgba(0,180,180,0.3);
  padding-left:20px;
  font-family: Neou-Bold; 
  src: url('Neou-Bold.otf'); 
  font-size:10px;
  letter-spacing:1.6px ;
}

Answer 1

现在颜色在子菜单 anchor 上。我们需要将其移动到父 ul.second 元素，然后添加 CSS 以使该元素固定并从上到下跨越。

div.menu ul.second {
    background-color:rgba(0,180,180,0.3);
    top:0;
    position: fixed;
    bottom:0;
}

完成后，我们需要更新 anchor 样式以将子菜单项的背景颜色默认设置为透明，因为背景颜色来自父元素。

div.menu ul.second li a {
    background-color:transparent;
}

您可能还想向 div.menu ul.second 元素添加一些填充，还有一些您可能想要调整的其他内容，但您可以快速将此 CSS 添加到你的 fiddle 的底部看到它的工作。