隐藏<li>触摸/向外滚动</li>

Question

在移动设备上，我需要在滚动或按任何屏幕区域时隐藏li。这是在固定标题菜单上，我该如何实现？谢谢你的帮助。

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 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%; }