HTML CSS examples for CSS Widget:UL Element
expand <a> and <li> to fit the width of the <ul>
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!-- w w w. j a v a2 s. c o m--> background-color:Chartreuse; } #nav ul { margin:26px 100px 0 0; padding:0; list-style-type:none; text-align:center; } #nav ul li { display:block; margin:0; padding:0; } #nav ul li a { text-decoration:none; padding:16px 11px; color:yellow; text-align:left; display:block; } #nav ul li a:hover { color:blue; background-color:pink; } #nav ul.sub-menu { padding:13px 6px 6px 6px; } #nav ul.sub-menu li { display:block; white-space:nowrap; } #nav ul.submenu li a { display:block; } #ddmenu { display:block; margin:0 auto; padding:0 16px; cursor:pointer; outline:none; } #ddmenu ul { z-index:100; position:absolute; top:64px; background:OrangeRed; margin:0; padding:8px 0; list-style:none; } #ddmenu li { display:block; position:relative; float:left; } #ddmenu li a { display:block; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } #ddmenu ul li { display:block; width:100%; } </style> </head> <body> <div id="nav" style="position: relative; float: right;"> <ul id="ddmenu"> <li> <a href="#">Lorem i</a> <ul class="sub-menu"> <li> <a class="sub-link" href="#">Lorem ips</a> </li> <li> <a class="sub-link" href="#">Lorem</a> </li> <li> <a class="sub-link" href="#">Lorem ipsum do</a> </li> </ul> </li> </ul> </div> </body> </html>