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 make a white square around my form fields?

    How can I test websites for Mobile Devices

    how to make a div transparent without affecting the child in CSS 3?

    How to make a picture responsive that is on wordpress custom post type through HTML/CSS

    How to style child components from parent component's css file?

    How to rotate an object 120deg on every click with CSS-transition/transform throu JS

    How to fix “Blocked loading mixed active content” for css and js over https

    How to implement Star Rating in Intel XDK by App Framework 3.0

    How to remove extra space in navigation bar? [duplicate]

    CSS positioning: how to make it relative to one element but not the other?

    Codeigniter--add “active” css class to link, how to?

    How to fit content of a DIV with fixed height

    how to color the whole star icon when button is clicked

    How to change URL inside CSS?

    AngularJS - how to show an alert when the length of an array is zero and hide the default behavior?

    How to apply css to three different classes hovering one of them

    How to detect browser support for :after and :before

    Two sprites on same position: how to make this happen?

    CSS menu list items need to show inside div container

    How to Change XYChart's color in JavaFx?

    How to left-align the text in a Bootstrap accordion

    How to: Reduce font-size if a line breaks

    How can I change the color CSS property of an element using jQuery

    how to increase border line from the center using css animation

    How to disable a YUI MenuBarItem from markup

    How to add a mobile optimised external CSS to a Shopify site

    How to manipulate SVG element style with javascript?

    How do I fix the image size when changing to another image?

    How to position child div to the center of every parents div using position absolute in css [duplicate]

    How to add border for html tr