html - 如何在点击时更改无序列表宽度

我正在建立响应式网站。我有固定的导航。我的内容正在改变。我想将HOME列表更改为例如，单击时将其宽度设置为180px。有人可以帮忙吗？

这是我的导航代码

的HTML

<div class="aside">
<ul>
    <li><a class="po" href="index.html">HOME</a></li>
    <li><a class="fo" href="galerija.html">GALERY</a></li>
    <li><a class="ra" href="program.html">PROGRAM</a></li>
    <li><a class="ko" href="ulaznice.html">TICKETS</a></li>
<li><a class="ko" href="kontakt.html">CONTACT</a></li>
</ul>

的CSS

.aside ul
{
float:left;
font-size:0.8em;
display:block;
margin-top:10%;
padding: 0px;
max-width:180px:
width:100%;
min-width:140px;

}


.aside li
{
height:40px;
list-style:none;
width:100%;
display:block;
text-align:center;
line-height:45px;
padding-top:2px;

}


.aside a
{
background-color:white;
display:block;
height:40px;
width:70%;
text-align: center;
text-decoration:none;
font-size:1.375em;
font-weight:600;
font-weight:600;
color:#4ea3d9;
-moz-transition: all 600ms ease;
-webkit-transition:all 600ms ease;
-o-transition: all 600ms ease;

}

.aside a:hover
{
width:100%;

}

最佳答案

您可以通过在click事件上添加带有javascript的类来实现。

关于html - 如何在点击时更改无序列表宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14843241/