Question

我有下面的菜单，我想在左侧添加缩略图，如下所示：

enter image description here
http://i.imgur.com/aK5EJ.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>

Answer 1

当然有可能。只需将缩略图设为锚标记的背景图像即可。请参阅此示例：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;
}

Answer 2

有CSS属性：

list-style-image: { };

可能对您有所帮助，您需要为每个li定义一个单独的类，这可能不太理想，但它应该可以让您通过纯粹的CSS将图像添加到列表中。

你可以像这样使用它作为一个例子

li.myimage { list-style-image: url("img/myimage.png"); }

Answer 3

1）做你的A标签样式（不是LI，浮动和位置除外）。所以将其他声明移到A标签。

2）在A-tag上使用padding-left并使用背景图像。使填充与图像的宽度相同，加上文本的一些喘息空间。

有关样式提示，请参阅：http://preview.moveable.com/JM/ilovelists/中的“自定义项目符号”。

CSS下拉菜单 - 如何添加缩略图

3 个答案: