Home/ Questions/Q 6528165
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T09:30:34+00:00

hi im building a drop down menu that has to have a thumbnail to

  • 0

hi im building a drop down menu that has to have a thumbnail to the left. at the moment im using <ul>&<li>s to build the menu and ive got the drop down working. the issue im having is when trying to add an image to the left had side it just addes its self to the bottom of the list if that makes sense.

at the moment ive got it working but im hopping someone could suggest a better way

here is my code

<!--the css for the nav bar-->
#navbar
{
     clear: both;
      position: absolute;
     left: 488px;
     width: 466px;
}

#navbar ul{


float:left;
display:block;
}   
#navbar ul li img
{
padding:0px;
margin:0px;
border:none;

}
#navbar ul li{
text-align: center;
display:block;
float:left;
width:55px;
border-left:thin #666 solid;
border-right:thin #666 solid;
}




#navbar li li, #navbar li li a{
height:0px;
margin-top: -100px;
text-align: center;
  zoom: 1;
  background-color:#666;
text-decoration: none;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
border:thin #000 solid;
width:93px;
display:table-row;

}

 .navbar link{
color: #ff6600;
text-decoration: none;
}

#navbar li:hover li{
height:auto;
margin-top:0px;
margin-bottom: 0px;
}



#navbar li:hover li a{
color:#FFF;

text-decoration: none;
}

#navbar li li a:hover{
color:#333;
}

#navbar ul ul{
background:black;
}   

#navbar li li:hover li li{
height:auto;
margin-top:0px;
margin-bottom: 0px;
margin-left:-100px;
margin-top:-30px;

}

#navbar li:hover li li{
height:77px;
margin-top:-79px;
margin-bottom: 0px;
margin-left:-96px;
}

#thum
{
width:70px;
z-index:-2;
}

#thum li
{
height:auto;
z-index:-50;
 }


<!--html of nav bar-->
<div id="navbar">
        <ul id="items" >
            <li><a href="#"><img src="img/home_button_56_44.png"/></a></li>
            <li><a href="#"><img src="img/product_56_42.png"/></a>
                    <ul>

                        <li><a href="#">About</a></li>
                        <li><a href="#">About2</a></li>
                        <li><a href="#">About3</a></li>
                        <li>about4
                        <ul id="thum"><li><img src="img/home_button_56_44.png"/></li>     </ul>
                        </li>


                    </ul>


            <li><a href="#"><img src="img/lifestyle_57_42.png"/></a></li>

            <li><a href="#"><img src="img/about_54_42.png" /></a></li>
            <li><a href="#"><img src="img/contact_54_42.png"  /></a></li>
        </ul>
        </div>
}

hope this makes sense i know its a bit cluttered i will be cutting it down before the site goes live

thanks
dan

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would place the thumb image in the first li of the sub menu. Give it a class and float it to the left. This may require a few tweaks depending on the size of your image. This should allow the following lis to fall beside it.

     <html>
<head>
<style type="text/css">
<!--the css for the nav bar-->
#navbar
{
     clear: both;
      position: absolute;
     left: 488px;
     width: 466px;
}

#navbar ul{


float:left;
display:block;
}   
#navbar ul li img
{
padding:0px;
margin:0px;
border:none;

}
#navbar ul li{
text-align: center;
display:block;
float:left;
width:55px;
border-left:thin #666 solid;
border-right:thin #666 solid;
}




#navbar li li, #navbar li li a{
height:0px;
margin-top: -100px;
text-align: center;
  zoom: 1;
  background-color:#666;
text-decoration: none;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
border:thin #000 solid;
width:93px;
display:table-row;

}

 .navbar link{
color: #ff6600;
text-decoration: none;
}

#navbar li:hover li{
height:auto;
margin-top:0px;
margin-bottom: 0px;
}



#navbar li:hover li a{
color:#FFF;

text-decoration: none;
}

#navbar li li a:hover{
color:#333;
}

#navbar ul ul{
background:black;
}   

#navbar li li:hover li li{
height:auto;
margin-top:0px;
margin-bottom: 0px;
margin-left:-100px;
margin-top:-30px;

}

#navbar li:hover li li{
height:77px;
margin-top:-79px;
margin-bottom: 0px;
margin-left:-96px;
}

#thum
{
width:70px;
z-index:-2;
}

#thum li
{
height:auto;
z-index:-50;
 }
#navbar li li.my-thumb {width:40px;}
#navbar li .thumb-menu {width:140px;padding:0;}
</style>
</head>
<body>

<!--html of nav bar-->
<div id="navbar">
        <ul id="items" >
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a>
                    <ul class="thumb-menu">
                        <li class="my-thumb"><img width="40" height="40" src="img/home_button_56_44.png"/></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">About2</a></li>
                        <li><a href="#">About3</a></li>
                    </ul>
            <li><a href="#">Item 3 </a></li>

            <li><a href="#">Item 4</a></li>
            <li><a href="#">Item 5</a></li>
        </ul>
        </div>
</body>
</html>
    • 0