Выпадающее меню не работает после размещения еще одного div

body{
margin: 0;
}

.here,.hereinner{
list-style-type: none;
margin:0px;
padding:0px;

}



.menu .here .choice{
float: right;
display: inline;
border: 3px;
background-color: orange;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;

}

.hereinner li{
background-color: orange;
opacity: 1;
line-height: 40px;
text-align: center;
font-size: 20px;

}

.here .heh,.subs{
  width: 200px;
height: 40px;
text-decoration: none;
color: white;
display: block;
}

.here .heh:hover{
background-color: green;
}

.hereinner{
display: none;
}

.subs{
text-decoration: none;
background-color: orange;
color: white;
}

.subs:hover{
background-color: green;
}

.choice:hover .hereinner{
display: block;
}
.clearfix{
  clear:both;
}
.posrel{
  position:relative;
}

.hero{
position: absolute;
width: 100%;
margin-left: 0;
margin-top: 0;
}

.hero .head1{
color: black;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 270px;
font-family: bodoni;
}

.hero .head3{
text-align: center;
font-family: helvetica;
}

<div class = "menu">
<ul class = "here">
        <li class = "choice" ><a href = "" class = "heh">About</a>
            <ul class = "hereinner">
                <li ><a href = "" class = "subs">You</a></li>
                <li ><a href = "http://www.facebook.com" class = "subs">Me</a> </li>
                <li><a href = ""  class = "subs">Us</a></li>

            </ul>

        </li>
        <li class = "choice"><a href = "" class = "heh">Contact Us</a></li>
        <li class = "choice"><a href = "" class = "heh">Sign Up</a></li>
        <li class = "choice"><a href = "" class = "heh">Log in</a></li>

    </ul>
    <div class = "clearfix">
    
    </div>


</div>
<div class = "posrel">
    <div class = "hero">
        <h1 class = "head1">something.com</h1>
        <h3 class = "head3">this is a random sentence.</h3>

</div>          

</div>