Html 带有缩略图的css下拉菜单
嗨,我正在建立一个下拉菜单,它的左边必须有一个缩略图。目前,我正在使用&s创建菜单,我已经让下拉菜单正常工作了。我遇到的问题是,当试图在左侧添加图像时,如果有意义的话,它只会将自己添加到列表的底部 目前我已经开始工作了,但我希望有人能提出更好的方法 这是我的密码Html 带有缩略图的css下拉菜单,html,css,menu,thumbnails,drop-down-menu,Html,Css,Menu,Thumbnails,Drop Down Menu,嗨,我正在建立一个下拉菜单,它的左边必须有一个缩略图。目前,我正在使用&s创建菜单,我已经让下拉菜单正常工作了。我遇到的问题是,当试图在左侧添加图像时,如果有意义的话,它只会将自己添加到列表的底部 目前我已经开始工作了,但我希望有人能提出更好的方法 这是我的密码 <!--the css for the nav bar--> #navbar { clear: both; position: absolute; left: 488px; widt
<!--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>
}
希望这是有意义的,我知道它有点凌乱,我会在网站上线前把它删掉
谢谢
dan我会将拇指图像放在子菜单的第一个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>