CodePen

HTML

            
              <div id ="sidebar">
<ul>
	<li>
	<a href="http://themeforward.com/demo2/2013/04/29/2289/">Image Tests</a>
	<a href="#">
    <img width="250" height="120" src="http://themeforward.com/demo2/wp-content/uploads/2013/03/Koala-250x120.jpg" class="attachment-thmb-sdbr wp-post-image" alt="This is a caption for a Koala, how nifty that must be." />
    </a>
	</li>

	
	<li>
	<a href="http://themeforward.com/demo2/2013/04/29/image-gallery/">Image Gallery</a>
	<a href="#">
    <img width="250" height="120" src="http://themeforward.com/demo2/wp-content/uploads/2013/03/Chrysanthemum-250x120.jpg" class="attachment-thmb-sdbr wp-post-image" alt="Chrysanthemum" />
    </a>
	</li>

	
	<li>
	<a href="http://themeforward.com/demo2/2013/04/29/the-new-gallery/">The New Gallery</a>
	<a href="#">
    <img width="250" height="120" src="http://themeforward.com/demo2/wp-content/uploads/2013/03/Lighthouse-250x120.jpg" class="attachment-thmb-sdbr wp-post-image" alt="This is the alt text" />
</a>
	</li>

	</ul>

</div>
            
          
!
via HTML Inspector

CSS

            
              
#sidebar ul { background:#FFF; list-style:none; padding:30px; border:1px solid #D4D4D4; width:100%; margin:30px 0 0; box-shadow: 0 0 5px rgba(0, 0, 0, 0.12) }
#sidebar ul ul, #sidebar ul ul ul, #sidebar ul ul ul ul { width:auto; margin:0; padding:0; border:none; box-shadow:none }
#sidebar ul li { font-size:.9em }
#sidebar li, .widget-container, .widget_recent_comments { margin:0 }
#sidebar ul.children { text-indent:1em }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................