Demo of Drop Down Menu With Recent Posts Based on Labels

This is demo of drop down menu with recent posts based on labels for all blogger users. Read more instruction from http://www.threelas.com

by putriarisnawati

HTML

<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"...

CSS

#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;
}