CSS Dropdown menu - How to add thumbnails


Tags: css,image,menu,drop-down-menu,thumbnails

Problem :

I have the menu below, and I'd like to add thumbnail images to the left side, like this:

enter image description here
http://i.imgur.com/aK5EJ.jpg

Is this possible to do with css; I've done a search around the net but I haven't found a css menu with thumbnails.

appreciate any help

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <title>Menu</title>
            <style type="text/css">

            body {
            behavior: url(csshover.htc);
            font-size:11px;
            font-family:Arial, Helvetica, sans-serif;
            }

            #nav {
            position:absolute;
            left:700px;
            top:10px;
            }

            p a {
            color: #000;
            text-decoration:underline!important;

            }
            a{
            color:#000;
            text-decoration:none;
            }
            p a:hover{  text-decoration: none!important;
            }

            ul#nav {
            list-style: none;
            padding: 0;
            margin: 0;
            }


            ul#nav li a {
            display: block;
            font-weight: bold;
            padding: 2px 10px;
            background:#f9f9f9;
            }

            ul#nav li a:hover{
            background:#888;
            color:#fff;
            list-style:none;
            }

            li {
            float: left;
            position: relative;
            width: 100px;
            text-align: center;
            margin-right:5px;
            border:1px solid #ccc;

            }

            ul#nav li.current a{
            background:#ddd;
            }

            ul#nav li.current a:hover{
            background:#888;
            }

            li ul {
            display: none;
            position:absolute;
            width:100px;
            top: 18px;
            left: 0;
            font-weight: normal;
            padding: 1px 0 10px 0;
            margin-left:-1px;
            }

            ul#nav li ul.sub li{
            border-width:0 1px 1px 1px!important;
            }

            ul#nav li ul.sub li a{
            font-weight: normal!important;  
            }
            li>ul {
            top: auto;
            left: auto;
            }

            li:hover ul, li.over ul {
            display: block;
            }

            .sub li {
            list-style:none;
            }


            </style>
            </head>

            <body>


            <ul id="nav">

                <li><a href="#" title="Menu">Menu</a>
                  <ul class="sub">
                     <li><a href="#" title="Services > Number One">Number One</a></li>
                     <li><a href="#" title="Services > Number Two">Number Two</a></li>
                     <li><a href="#" title="Services > Number Three">Number Three</a></li>
                     <li><a href="#" title="Services > Number Four">Number Four</a></li>
                     <li><a href="#" title="Services > Number Five">Number Five</a></li>
                  </ul>
                </li>



            </ul>

            </body>
            </html>


Solution :

Sure it's possible. Just make the thumbnail a background image of the anchor tag. See this example: http://jsfiddle.net/EyRFW/1

ul#nav li ul.sub li a
{
    font-weight: normal!important;  
    padding-left:20px;
    background-image:url(http://jsfiddle.net/img/ico-add-resource.png);
    background-position: 3px 3px ;
    background-repeat:no-repeat;
}

    CSS Howto..

    How to update current css version in asp.net

    jQuery on click shows div but it flickers and disappears

    HTML/CSS How do I get 2 completely independant scrollbars?

    How to persist checking the screen width in Javascript

    How to position a div under a link on click?

    How to implement this to my index.html?

    how to change browsers default scrollbar using css or jquery

    how to align the content of a box

    Duplicated footer html/css on another page, but shows up differently?

    How to properly align rows with bootstrap

    How to override style of single RichFaces component

    How to have an image overlap the edge of a div

    How to avoid an hover on a menu item to affect the menu items on the right

    How to make a conjoined input with flexible width

    How to prevent dynamically appended div from overflowing?

    How to css 3rd li in hierarchy?

    How to apply CSS to second word in a string?

    How do I get user-inputted information from the website directly to my e-mail?

    How to recreate Mac like File Browser in all OS with JS/CSS

    How to animate an unknown number of items in sequence using css animations?

    How can I add a hover effect to icons with CSS? [closed]

    How to make a simple pure css or jquery image toggle?

    How to call particular CSS file only for desktop not for mobile [closed]

    How to select css id's with numbers in them?

    How to divide HTML into two distinct areas, as if using frames?

    how to run HTML+CSS+JAVASCRIPT Project on android Emulator

    How to change Image inside of CSS of a usercontrol

    How do I use CSS to keep multiple images relatively sized withing the same outer element?

    CSS sliding-window rounded-corner buttons: how to avoid the “dead” area on right side of “window”?

    Showing required fields by bolding