Hi folks,

I have this navigation bar that stick to the bottom of the screen. One of the menu items is a drop-up menu. My problem is that it does not matter what width property I give the ul li ul or ul li ul li. my wish is to make the menu that drops up 50% of the screen width.

Code:
  <div class="footer blue">
    <div class="button sep">
        <div class="content">
           <a href="support.html"> <div class="support">
        </div>
    <h2>Support</h2>
    </div></a>
    </div>
   <div class="button2">
        <div class="content2">
            <div class="compass">
        </div>
            <ul>
            <li>
                <h2><a href="#nav">Policy Library</a></h2>
                    <ul>
                        <li>Health and Safety Information</li>
                        <li>Health and Safety Information</li>
                    </ul>
            </li>
        </ul>
        
        
    </div>
    </div>
Code:
.footer {
    width: 100%;
    height: 50px;
    position:fixed;
    bottom:0;
	clear:both;
	margin-top: 0px;
	
}

/*New footer*/

.footer a:link {text-decoration:none; color: #fff;}
.footer a:visited {text-decoration:none; color: #fff;}
.footer a:hover {text-decoration:underline; color: #fff;}
.footer a:active {text-decoration:underline; color: #fff;}

.footer > a {
    display: none;            
}
.footer ul {
    list-style: none;
    margin-top: 0px;
            height: 3.75em;
                background: #939495;
}

.footer li {
    position: relative;
    min-width: 50%;
    background: #939495;
}

.footer ul li ul {
   display: none;
   position: absolute;
   bottom: 0;
   background: #939495;
   height: 200px;


}

.footer ul li ul li {
color: red;
width: 200px;
bottom: 0;
right: 0;

}
.footer li:hover ul {
    display: block;
                background: #939495;
}
 


/*End New footer*/ 

.footer h2 {
    color: #fff;
    font-family: 'Droid sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding-top: 7px;
    margin-left: -3px;
        white-space: nowrap;    

}

.footer .button {
    width: 50%;
    float: left;
    display:table-cell;
}

.footer .button2 {
    width: 49%;
    float: left;
    display:table-cell;
}

.sep {
    border-right: 1px solid #000;

}

.footer .content {
    width: 90px;
    height: 56px;
    margin: 8px auto;

}

.footer .content2 {
    width: 135px;
    height: 56px;
    margin: 8px auto;

}

.support {
    background: url(../img/support.png) no-repeat;
    background-size: 35px 35px;
    height: 50px;
    width: 40px;
    float: left;
    
}

.support:hover {
    background: url(../img/support-hover.png) no-repeat;
    background-size: 35px 35px;
    height: 50px;
    width: 40px;
    float: left;
    
}

.compass {
    background: url(../img/compas.png) no-repeat;
    background-size: 35px 35px;
    height: 50px;
    width: 40px;
    float: left;
    
}

.compass:hover {
    background: url(../img/compas-hover.png) no-repeat;
    background-size: 35px 35px;
    height: 50px;
    width: 40px;
    float: left;
    
}