HTML CSS examples for CSS Widget:UL Alignment
Right-align span inside li tag
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .nav {<!-- w w w.ja va 2 s.com--> height:46px; } .nav ul { list-style:none; padding:0; text-align:center; } .nav ul li { position:relative; display:inline; } .nav ul a { display:inline-block; padding:11px; } .nav ul ul { position:absolute; left:-10000px; margin:0; padding:0; text-align:left; z-index:10000; } .nav ul ul li { display:block; } .nav ul li ul { width:151%; } .nav ul ul li:hover { background:Chartreuse; } .nav ul li:hover ul { left:0; } .nav ul li:hover a { text-decoration:underline; } .nav ul li:hover ul a { text-decoration:none; background:none; } .nav ul li:hover ul a:hover { text-decoration:underline; } .nav ul ul a { white-space:nowrap; display:block; border-bottom:2px solid yellow; } .nav ul ul ul { display:none; } .nav ul ul li:hover>ul { display:block; position:absolute; left:100%; top:0; } .nav ul ul li li { width:51%; position:relative; } .nav ul ul li li:hover { background:blue; } .bubble-info, .bubble-danger, .bubble-success, .bubble-default, .bubble-warning { width:21px; height:21px; display:inline-block; position:absolute; right:0; text-align:center; color:pink; font-weight:bold; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border:2px solid OrangeRed; } .bubble-default { background:grey; } .bubble-success { background:BlueViolet; } .bubble-info { background:Chartreuse; } .bubble-warning { background:yellow; } .bubble-danger { background:blue; } </style> </head> <body> <div class="navcontainer"> <div class="nav"> <ul> <li> <a href="#">Lorem ip</a> <ul> <li> <a href="#">Lorem<span class="bubble-info">Lo</span> </a> </li> <li> <a href="#">Lorem<span class="bubble-warning">Lo</span> </a> </li> <li> <a href="#">Lorem i<span class="bubble-danger">Lo</span> </a> </li> <li> <a href="#">Lorem <span class="bubble-success">Lo</span> </a> </li> <li> <a href="#">Lorem <span class="bubble-default">Lo</span> </a> </li> </ul> </li> </ul> </div> </div> </body> </html>