Need help to finish a drop down to be active only when clicked. (HTML and CSS) -
tried hard figure out. nothing.
take look: http://liveweave.com/vdqjtf
i need simple activation on click, work on mobile.
this minimal example, uses css , html.
/* start praveen's reset fiddle ;) */ * {font-family: 'segoe ui'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} /* end praveen's reset fiddle ;) */ nav ul {display: block;} nav > ul > li {display: inline-block; border: 1px solid #999; padding: 5px; position: relative;} nav ul ul {position: absolute; left: 0; padding: 5px; border: 1px solid #999; margin-top: 5px; margin-left: -1px; width: 100px; background-color: #fff; display: none;} nav ul input {display: none;} nav ul ul li {display: block;} nav ul input:checked + ul {display: block;}
<nav> <ul> <li> <label> item 1 <input type="radio" name="menu"> <ul> <li><a href="#">sub item 1</a></li> <li><a href="#">sub item 2</a></li> <li><a href="#">sub item 3</a></li> </ul> </label> </li> <li> <label> item 2 <input type="radio" name="menu"> <ul> <li><a href="#">sub item 1</a></li> <li><a href="#">sub item 2</a></li> <li><a href="#">sub item 3</a></li> </ul> </label> </li> <li> <label> item 3 <input type="radio" name="menu"> <ul> <li><a href="#">sub item 1</a></li> <li><a href="#">sub item 2</a></li> <li><a href="#">sub item 3</a></li> </ul> </label> </li> </ul> </nav>
Comments
Post a Comment