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

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

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

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

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

你可能也想在div.menu ul.second元素中添加一些填充，还有其他一些你可能想要调整的东西，但是你可以快速将这个CSS添加到你的小提琴的底部来看它工作

Jquery mouseover子菜单滑出高度

1 个答案: