Edit in JSFiddle

<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
      google.load("gdata", "1.x", { packages : ["blogger"] });
    </script><script src='http://plugin-codes.googlecode.com/files/threelaspluginr-v2-2.js' type='text/javascript'></script>
                
<ul id="navigation">
                    <li>
                        <a href="http://www.threelas.com" target="_blank">Home</a>
                    </li>
                    <li>
                        <a href="http://www.threelas.com/search/label/Blogger%20SEO" target="_blank">Blogger SEO</a>
                        <ul>
                            <li>
                                <div class='tl-recent' data-posts='3' data-width='200px' data-imgheight='50' data-imgwidth = '50' data-url="http://www.threelas.com/feeds/posts/default/-/Blogger%20SEO" data-content='80' data-imgfloat='left'></div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="http://www.threelas.com/search/label/Blogger%20Api" target="_blank">Blogger API</a>
                        <ul>
                            <li>
                                  <div class='tl-recent' data-posts='3' data-width='200px' data-imgheight='50' data-imgwidth = '50' data-url="http://www.threelas.com/feeds/posts/default/-/Blogger%20Api" data-content='80' data-imgfloat='left'></div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="http://www.threelas.com/search/label/Blogger%20and%20Widget" target="_blank">Blogger and Widget</a>
                        <ul>
                            <li>
                                <div class='tl-recent' data-posts='3' data-width='200px' data-imgheight='50' data-imgwidth = '50' data-url="http://www.threelas.com/feeds/posts/default/-/Blogger%20and%20Widget" data-content='80' data-imgfloat='left'></div>
                            </li>
                        </ul>
                    </li>                    
                </ul>
                <div style="clear:both;"></div>

#navigation {
     list-style: none outside none;
     margin: 0px;
     padding: 0px;
}

#navigation li {
     display: block;
     float: left;
     position: relative;
}

#navigation li a {
     background: none repeat scroll 0% 0% #2C5463;
     border-top: 1px solid #909090;
     color: #FFFFFF;
     margin-left: 1px;
     padding: 5px 15px;
     text-decoration: none;
     white-space: nowrap;
}

#navigation li a:hover {
     background: none repeat scroll 0% 0% #617F8A;
}

#navigation li a:hover img {
     border: medium none;
     text-decoration: none;
}

#navigation li ul li a {
     background: none repeat scroll 0% 0% transparent;
     border: medium none;
     color: #000000;
     margin-left: 0px;
     padding: 1px;
     white-space: normal;
}

#navigation li ul li a:hover {
     background: none repeat scroll 0% 0% #FFFFFF;
     color: blue;
}

#navigation li ul {
     display: none;
     list-style: none outside none;
     margin: 0px;
     padding: 0px;
}

#navigation li:hover ul {
     background: none repeat scroll 0% 0% #FFFFFF;
     border-radius: 13px 13px 13px 13px;
     border: 8px solid firebrick;
     display: block;
     margin-top: 4px;
     position: absolute;
}