如何用css模拟点击功能？

Question

我想用css模拟点击功能。

当鼠标点击第一个li标签时，我希望下拉所有列表。

这是我用css的简单html代码，我该怎么办？

  

jsfiddle

<div id="lang_sel">
  <ul>
    <li><a href="#">option1</a>
      <ul>
        <li><a href="#">option2</a></li>
        <li><a href="#">option3</a></li>
      </ul>
    </li>
  </ul>
</div>
#lang_sel {
    height: 32px;
    position: relative;
    font-family: verdana, arial, sans-serif;
    display: inline-block;
}

#lang_sel ul, #lang_sel li {
    padding: 0!important;
    margin: 0!important;
    list-style-type: none!important;
}
#lang_sel li:before {
    content: ''!important;
}
#lang_sel ul ul {
    width: 149px;
}
#lang_sel li {
    float: left;
    width: 149px;
    position: relative;
}
#lang_sel a, #lang_sel a:visited {
    display: block;
    font-size: 11px;
    text-decoration: none!important;
    color: #444444;
    border: 1px solid #cdcdcd;
    background: #fff;
    padding-left: 10px;
    line-height: 24px;
}
#lang_sel ul ul {
    visibility: hidden;
    position: absolute;
    height: 0;
    top: 25px;
    left: 0;
    width: 149px;
    border-top: 1px solid #cdcdcd;
}
#lang_sel a:hover, #lang_sel ul ul a:hover {
    color: #000;
    background: #eee;
}
#lang_sel ul li:hover ul{
    visibility: visible;
}

..............................

Answer 1

您可以使用checkbox hack

#lang_sel {
	height: 32px;
	position: relative;
	font-family: verdana, arial, sans-serif;
	display: inline-block;
}
#opt{
    width:200px;
    height:30px;
    opacity:0;
}
label{
    display:block;
}
label span{
    top:0;
    width:200px;
    height:30px;
    position:absolute;
}

label ul{
    display:none;
}

input:checked + label ul{
    display:block;
    
}
#lang_sel ul, #lang_sel li {
	padding: 0!important;
	margin: 0!important;
	list-style-type: none!important;
}

#lang_sel ul ul {
	width: 149px;
}
#lang_sel li {
	float: left;
	width: 149px;
	position: relative;
}
#lang_sel a, #lang_sel a:visited {
	display: block;
	font-size: 11px;
	text-decoration: none!important;
	color: #444444;
	border: 1px solid #cdcdcd;
	background: #fff;
	padding-left: 10px;
	line-height: 24px;
}
#lang_sel ul ul {
	visibility: hidden;
	position: absolute;
	height: 0;
	top: 25px;
	left: 0;
	width: 149px;
	border-top: 1px solid #cdcdcd;
}
#lang_sel a:hover, #lang_sel ul ul a:hover {
	color: #000;
	background: #eee;
}

<div id="lang_sel">
    <input type="checkbox" id="opt"/>
    <label for="opt">
        <span>Option1</span>
        <ul>
            <li>Suboption</li>
            <li>Suboption</li>
            <li>Suboption</li>
            <li>Suboption</li>
            <li>Suboption</li>
        </ul>
    </label>
</div>