Question

当我点击链接时，列表只是关闭，链接不起作用。

正确的方法是当我点击项目列表时，列表会展开并显示相应的链接。所以我可以点击链接并重定向到另一个页面，但是当我点击链接时，列表就会关闭。

CSS代码：

＆＃13;

*:focus {
  outline:none
}
ul {
  list-style:none;
  padding:0;
  margin:0;
}
.menu-sanfona {
  border:1px solid #ccc;
  border-bottom:none;
  background:#eee;
  margin: 10px;
}
.menu-sanfona span {
  padding:10px;
  display:block;
}

.menu-sanfona > li {
    border-bottom:1px solid #ccc;
}

.menu-sanfona > li :hover {
    background: #ddd;
  }
.menu-sanfona li ul {
    background:#fff;
    border-top:1px solid #ccc;
    display:none;
}

.menu-sanfona li:focus ul {
    display:block;
}

HTML CODE:

＆＃13;

<ul class="menu-sanfona">
                <li tabindex="0"> <span class="item">Programas</span>
                    <ul>
                        <li><span><a href="#">Programas</a></span></li>
                        <li><span>Disciplinas</span></li>
                        <li><span>Turmas</span></li>
                        <li><span>Informações</span></li>
                        
                    </ul>
                </li>
                <li tabindex="1"> <span class="item">Pessoas</span>
                    <ul>
                        <li><span>Discentes</span></li>
                        <li><span>Docentes</span></li>
                        
                    </ul>
                </li>
                <li tabindex="2"> <span class="item">Comunicação</span>
                    <ul>
                        <li><span>Requerimentos</span></li>
                        <li><span>Mensagens</span></li>
                    </ul>
                </li>
</ul>

＆＃13;

Answer 1

尝试将此添加到 CSS ：

.menu-sanfona li ul:hover {
  display:block;
}

My Fiddle

该链接在可伸缩的侧面菜单中不起作用。有人能帮我吗？

1 个答案: