Hide <li> on touch/scroll outside - css

Question

On the mobile devices, I need to hide li when scroll or pressing any area of screen. This is on the fixed header menu and how can I achieve this ? Thank you for your help.
HTML:
<ul class="profilenav">
<li id="settingslink">
<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 a { 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 a { 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 a { 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%; }