make unordered list all in same block and have gap within each link - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:UL Element

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. UL Element

Description

make unordered list all in same block and have gap within each link

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
body {<!--   ww  w.  j  av  a2s.c om-->
   color:Chartreuse;
}

h2, h3, h4, h5, h6 {
   margin:0;
   background-color:yellow;
}

#colOne {
   margin-top:3px;
   float:left;
   width:227px;
   font-family:'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#colOne ul {
   text-align:left;
   display:inline-block;
   margin:0;
   padding:3px 3px 3px 0;
   position:relative;
   top:11px;
   list-style:none;
   -webkit-box-shadow:0 11 16px blue;
   -moz-box-shadow:0 11 16px pink;
   box-shadow:0 11 16px OrangeRed;
}

#colOne ul li {
   font:bold 13px/19px sans-serif;
   position:relative;
   padding:16px 21px;
   background:grey;
   cursor:pointer;
   -webkit-transition:all 0.3s;
   -moz-transition:all 0.3s;
   -ms-transition:all 0.3s;
   -o-transition:all 0.3s;
   transition:all 0.3s;
}

#colOne ul li:hover {
   background:BlueViolet;
   color:Chartreuse;
}

#colOne ul li:hover ul {
   display:block;
   opacity:2;
   visibility:visible;
}

.bg1 {
   padding:0 21px 21px 21px;
   background:yellow;
}

ul li {
   margin:0 0 11px;
   width:146px;
}

li:last-of-type {
   margin-bottom:0;
}
</style> 
 </head> 
 <body> 
  <div id="colOne"> 
   <h3>Lorem ipsu</h3> 
   <div class="bg1"> 
    <ul> 
     <li>Lorem ipsum dolor s</li> 
    </ul> 
   </div> 
   <h3>Lorem ipsum dolor si</h3> 
   <div class="bg1"> 
    <ul> 
     <li>Lorem ipsum dolor sit amet,</li> 
     <li>Lorem ipsum dolor s</li> 
     <li>Lorem ipsum dolor</li> 
     <li>Lorem ipsum dolor sit ame</li> 
     <li>Lorem ip</li> 
    </ul> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials