css drop down menu with thumbnail_问答_开发者_运维开发者技术经验分享

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;
tex开发者_StackOverflowt-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

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>