user3344592 user3344592 - 7 months ago 10
Javascript Question

Jquery mouseover submenu slide-out HEIGHT

I'm a newbie; need some help! I created a left-aligned navigation menu with a slide-out submenu. I'm happy with everything except for the sub-menu's height. How can I make the entire slide-out menu (the opaque one) go to 100% height of the entire screen? Want it to look like this: http://perezweddings.com/blog/

Here's my jsfiddle: http://jsfiddle.net/alh3168/hE6Sv/10/

Do I need to change something in here?:

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

Right now the color is on the sub-menu anchors. We need to move that to the parent ul.second element, and then add CSS to make that element fixed and span from the top to the bottom.

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

Once that has been done, we need to update the anchor style to set the background color of sub-menu items to transparent by default since the background color is coming from the parent element.

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

You'll probably want to add some padding to the div.menu ul.second element as well and there are some other things you may want to adjust, but you can quickly add this CSS to the bottom of your fiddle to see it working.