Question

我只使用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%;
}

感谢您的时间。

HTML / CSS面板图标显示面板但不关闭它

0 个答案: