user3344592 user3344592 - 1 year ago 35
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:

Here's my jsfiddle:

Do I need to change something in here?: 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;
font-family: Neou-Bold;
src: url('Neou-Bold.otf');
letter-spacing:1.6px ;

Answer Source

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. ul.second {
    position: fixed;

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. ul.second li a {

You'll probably want to add some padding to the 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.