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

我有下面的菜单中，和我想的缩略图图像添加到左侧，像这样：CSS下拉菜单 - 如何添加缩略图

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>

来源

2011-10-07 BobJIII

确定这是可能的。只需将缩略图制作为锚标记的背景图像即可。看到这个例子：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; 
}

来源

2011-10-07 14:58:00

谢谢您的回答！ – BobJIII

1）做你的A标签（不是李的造型，除了浮动和位置）。所以将其他声明移到A标签。 2）在A-标签上使用填充 - 左侧并使用背景图像。使填充与图像的宽度相同，并为文本增加一点呼吸空间。

请参阅http://preview.moveable.com/JM/ilovelists/中的“自定义项目符号”，了解一些造型技巧。

来源

2011-10-07 14:52:10

有CSS属性：

list-style-image: { };

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

你会使用这样的，作为一个例子

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

来源

2011-10-07 15:28:01 dougajmcdonald

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

回答

相关问题