HTML CSS examples for CSS Widget:UL Element
Highlight LI within UL
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .drop-shadow {<!-- w w w . jav a 2 s . com--> background-color: blue; } .drop-shadow li { border-right: 2px solid #CECECE; } #list4 { font-family:sans-serif; font-size:12px; height:350px; width: 300px; } #list4 ul { list-style: none; } #list4 ul li a { display:block; text-decoration:none; color:#000000; line-height:30px; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#EFEFEF; padding:3px 0px 3px 10px; cursor:pointer; } li.active { background-color: yellow; border-right: none; } </style> </head> <body> <div id="list4" class="flexcroll "> <ul class="drop-shadow"> <li> <a href="#"> <span class="label label-important">Past Due</span> <span class="grey-span"> <b>test</b> - Test </span> </a> </li> <li> <a href="#"> <span class="label label-important">Past Due</span> <span class="grey-span"> <b>test</b> - Test </span> </a> </li> <li class="active"> <a href="#"> <span class="label label-warning">July 29</span> <span class="grey-span"> <b>test</b> - Test </span> </a> </li> <li> <a href="#"> <span class="label label-warning">Aug 21</span> <span class="grey-span"> <b>Look</b> - Test </span> </a> </li> </ul> </div> </body> </html>