我有下面的菜单，我想在左侧添加缩略图，如下所示:
这可能与 css 相关吗？我在网上进行了搜索，但没有找到带有缩略图的 css 菜单。
感谢任何帮助
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu</title>
<style type="text/css">
body {
behavior: url(csshover.htc);
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
}
#nav {
position:absolute;
left:700px;
top:10px;
}
p a {
color: #000;
text-decoration:underline!important;
}
a{
color:#000;
text-decoration:none;
}
p a:hover{ text-decoration: none!important;
}
ul#nav {
list-style: none;
padding: 0;
margin: 0;
}
ul#nav li a {
display: block;
font-weight: bold;
padding: 2px 10px;
background:#f9f9f9;
}
ul#nav li a:hover{
background:#888;
color:#fff;
list-style:none;
}
li {
float: left;
position: relative;
width: 100px;
text-align: center;
margin-right:5px;
border:1px solid #ccc;
}
ul#nav li.current a{
background:#ddd;
}
ul#nav li.current a:hover{
background:#888;
}
li ul {
display: none;
position:absolute;
width:100px;
top: 18px;
left: 0;
font-weight: normal;
padding: 1px 0 10px 0;
margin-left:-1px;
}
ul#nav li ul.sub li{
border-width:0 1px 1px 1px!important;
}
ul#nav li ul.sub li a{
font-weight: normal!important;
}
li>ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul {
display: block;
}
.sub li {
list-style:none;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#" title="Menu">Menu</a>
<ul class="sub">
<li><a href="#" title="Services > Number One">Number One</a></li>
<li><a href="#" title="Services > Number Two">Number Two</a></li>
<li><a href="#" title="Services > Number Three">Number Three</a></li>
<li><a href="#" title="Services > Number Four">Number Four</a></li>
<li><a href="#" title="Services > Number Five">Number Five</a></li>
</ul>
</li>
</ul>
</body>
</html>
最佳答案
当然可以。只需将缩略图作为 anchor 标记的背景图像即可。请参阅此示例:http://jsfiddle.net/EyRFW/1
ul#nav li ul.sub li a
{
font-weight: normal!important;
padding-left:20px;
background-image:url(http://jsfiddle.net/img/ico-add-resource.png);
background-position: 3px 3px ;
background-repeat:no-repeat;
}
关于CSS 下拉菜单 - 如何添加缩略图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7688914/