带缩略图的css下拉菜单

嗨建立一个下拉菜单，必须有一个缩略图在左边。此刻我使用<ul>&<li>s来构建菜单，并且我的下拉菜单正常工作。我试图向左侧添加图像时遇到的问题是，如果有意义的话，它只是将其自身添加到列表的底部。带缩略图的css下拉菜单

此刻Ive得到了它的工作，但即时通讯跳跃有人能提出一个更好的办法

这里是我的代码

<!--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> 
}

希望这是有道理的，我知道它有点混乱，我将削减IT下来之前，该网站正式上线

感谢丹

来源

2011-09-02 Dannymadethis

我将拇指图像中的第一子菜单的。给它上一堂课并将它浮到左边。这可能需要一些调整，具体取决于图像的大小。这应该允许下面的li落在它旁边。

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

来源

2011-09-02 15:48:54 Jrod

好的ace非常感谢你 – Dannymadethis

带缩略图的css下拉菜单

回答

相关问题