css - Hide <li> on touch/scroll outside -

on mobile devices, need hide li when scroll or pressing area of screen. on fixed header menu , how can achieve ? thank help.

html:

    <ul class="profilenav">         <li id="settingslink"><a href="#" ><img src="user.png"></a>             <div id="settingslist">                 <ul class="sub">                     <li>aaaaa</li>                     <li>aaaaa</li>                     <li>aaaaa</li>                 </ul>             </div>         </li>         <li>bbbbb</li>         <li>ccccc</li>     </ul>      </header>  </div> 

css:

body #head h1 {   border: 0 none;   display: inline-block;   font-weight: bold;   margin: 0;   padding: 0 10px 0 0; }  ul { list-style: none; }  img { border: 0; }  p { font-size: 1.3em; line-height: 1.25em; color: #666; margin-bottom: 15px; }  #wrap { display: block; margin: 0 auto; padding: 0px 40px; }  #settingslink { position: relative; } #settingslink:hover { background: #fff !important; } #settingslink:hover { color: #3f6998; }  .headerwrap {  width: 100%; background: #f5f5f5;     border:1px solid #d8d8d8;     border-width:1px 0; }  header {  width: 98%; margin-left: auto; margin-right: auto; display: block; position: relative; height: 35px; border: 0; }  .logo { float: left; color: #fff; display: block; margin-left: 10px; font-size: 24px; letter-spacing: normal; line-height: 35px; }  .profilenav { position: absolute; right: 0; } .profilenav li { display: block; font-size: 1.2em; float: left;  }  .profilenav { display: block; line-height: 25px; font-size: 18px; color: #333333; text-decoration: none; padding: 0 10px; z-index: 10; } .profilenav a:hover { color: #b6cadd; }  .profilenav li:hover #settingslist { display: block; position: absolute; }  #settingslist { background: #fff; display: none; position: absolute; padding-top: 7px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.5); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); z-index: 100; } #settingslist .sub { background: #fff;  } #settingslist .sub li { font-size: 10px; font-weight: ; background: #fff; text-align: left; } #settingslist .sub li { background: #fff; display: block; line-height: 25px; padding: 3px 6px; color: #596774; width: 120px; } #settingslist .sub li a:hover { background: #537db9; color: #fff; }  #avatar { float: right; display: block; width: 240px; } #avatar img { padding: 3px; border: 1px solid #cbcbcb; }  #body { display: block; background: #fff; min-height: 200px; margin-top: 50px; padding: 11px 20px; padding-bottom: 30px; }  .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; }  html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; }