Javascript HTML/CSS面板图标显示面板，但不显示'；别关上它

我只使用HTML和CSS创建了一个面板。我希望此面板位于屏幕的底部div，当您点击图像（我用来替换默认文本）时，面板从底部升起。我已经记下了大部分，但是，因为我是新的面板，我不知道如何使用相同的图像关闭面板以及

我并不反对使用javascript或jQuery，但我只是在学习这两种语言，所以我的技能不如你们所有人好

这是我的HTML和CSS

<nav id="nav" role="navigation">


<ul>

    <li>
        <a class="findMe" href="#" aria-haspopup="true"><img  
src="assets/whiteGearIcon.png" /></a>
        <ul>
            <li ><a href="#"><img class="theDudeAbides" 
src="assets/tools/timerIcon.png" /></a></li>
            <li><a href="#"><img class="obviouslyYoureNotAGolfer" 
src="assets/tools/flashIcon.png" /></a></li>

        </ul>
    </li>

</ul>
</nav>

nav
{
/* container */
}
#nav > a
{
    display: none;

}
#nav li
{
    position: relative;
}

/* first level */

#nav > ul
{
    height: 3.75em;
}
    #nav > ul > li
    {
        width: 25%;
        height: 100%;
        float: left;
    }

/* second level */

#nav li ul
{
    display: none;
    padding: 0;
    float: right !important;
    position: relative;
    background-color: grey;
    width: 65%;
    height: 35%;
}
    #nav li:hover ul
    {
        display: block;
    }

.findMe img{
position: absolute;
left: 300%;
top: 50%;
width: 45%;
}

导航
{
/*容器*/
}
#导航>a
{
显示：无；
}
#李海军
{
位置：相对位置；
}
/*一级*/
#导航>ul
{
高度：3.75em；
}
#导航>ul>li
{
宽度：25%；
身高：100%；
浮动：左；
}
/*二级*/
#纳夫利乌尔
{
显示：无；
填充：0；
浮子：对！很重要；
位置：相对位置；
背景颜色：灰色；
宽度：65%；
身高：35%；
}
#李海军：悬停
{
显示：块；
}
.findMe img{
位置：绝对位置；
左：300%；
最高：50%；
宽度：45%；
}

---

谢谢您的时间。

谢谢您的回复，但那是关于hover的，我正在寻找iphone上的tap