带有缩略图的 CSS 下拉菜单答案

【问题标题】：css drop down menu with thumbnail带有缩略图的 CSS 下拉菜单
【发布时间】：2011-09-03 00:01:26
【问题描述】：

嗨，我正在构建一个下拉菜单，该菜单必须在左侧有一个缩略图。目前我正在使用<ul>&<li>s 来构建菜单，并且我得到了下拉菜单。我遇到的问题是，当尝试将图像添加到左侧时，它只是将自己添加到列表的底部，如果这有意义的话。

目前我得到了它的工作，但我希望有人可以提出更好的方法

这是我的代码

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

希望这是有道理的，我知道它有点混乱，我会在网站上线之前把它删掉

谢谢丹

【问题讨论】：

标签： html css menu thumbnails drop-down-menu

【解决方案1】：

我会将拇指图像放在子菜单的第一个 li 中。给它一个类并将其浮动到左侧。这可能需要根据图像的大小进行一些调整。这应该允许以下lis 落在它旁边。

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

【讨论】：