带缩略图的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下来之前,该网站正式上线
感谢 丹
答
我将拇指图像中的第一子菜单的。给它上一堂课并将它浮到左边。这可能需要一些调整,具体取决于图像的大小。这应该允许下面的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>
好的ace非常感谢你 – Dannymadethis