CSS 下拉菜单 - 如何添加缩略图
我有下面的菜单，我想在左侧添加缩略图，如下所示：
https://i.sstatic.net/Qp6Kz.jpg
这可以用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>
I have the menu below, and I'd like to add thumbnail images to the left side, like this:
https://i.sstatic.net/Qp6Kz.jpg
Is this possible to do with css; I've done a search around the net but I haven't found a css menu with thumbnails.
appreciate any help
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
当然有可能。只需将缩略图作为锚标记的背景图像即可。请参阅此示例：http://jsfiddle.net/EyRFW/1
Sure it's possible. Just make the thumbnail a background image of the anchor tag. See this example: http://jsfiddle.net/EyRFW/1
有 CSS 属性：
它可能会帮助您，您需要为每个 li 定义一个单独的类，这可能并不理想，但它应该使您能够通过纯 css 将图像添加到列表中。
作为一个例子，你会像这样使用它
There is the CSS property:
which may help you, you'd need to define a seperate class for each
liwhich might not be ideal, but it should enable you to add images to the list via purely css.You'd use it like this, as an example
1) 设计 A 标签的样式（不是 LI，除了浮动和位置）。因此将其他声明移至 A 标签。
2) 在 A 标签上使用 padding-left 并使用背景图像。使内边距与图像宽度相同，并为文本留出一点喘息空间。
请参阅以下位置的“自定义项目符号”：
http://preview.moveable.com/JM/ilovelists/了解一些样式提示。1) Do your styling of the A tag (not the LI, except for float and position). So move the other declarations to the A-tag.
2) Use padding-left on the A-tag and use a background image. Make the padding the same width as the image plus a bit of breathing room for the text.
See "custom bullets" in:
http://preview.moveable.com/JM/ilovelists/for some styling tips.