how to simulate click function with css?

Question

I would like to simulate the click function with only css.

when the mouse click the first li tag, I wish to dropdown the all list.

This is my simple html code with css , and how could I do?

<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;
}

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

Akshay · Accepted Answer · 2015-06-30 10:11:20Z

You can use 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>

Collectives™ on Stack Overflow

how to simulate click function with css?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related