您好，我正在构建一个必须在左侧有缩略图的下拉菜单。目前我正在使用 <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>
}
希望这是有道理的，我知道它有点困惑，我会在网站上线前把它删掉
谢谢 担
最佳答案
我会将缩略图放在子菜单的第一个 li 中。给它一个类，让它向左浮动。这可能需要根据图像的大小进行一些调整。这应该允许以下 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>
关于html - 带有缩略图的CSS下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7285706/