css - 带有文字和图片的网站主菜单

Question

请帮我解决我的问题。我需要用图片制作头部菜单。我现在有：

我需要做什么：

我的 HTML 代码在这里：

   <div id="head">
      <div class="site_info">
         <div id="tabs">
            <ul id="tabMenu">
               <li class="dropdown">
                  <div><a class="tab1">поиск по производителю</a></div>
               </li>
               <li class="dropdown">
                  <div><a class="tab2">поиск по назначению</a></div>
               </li>
               <li class="dropdown">
                  <div>
                     <span id="more_search"></span>
                     <a class="tab4" href="/emarket/cart/">покупки</a>
                  </div>
               </li>
               <li class="dropdown">
                  <div><a class="tab3">сравнение</a></div>
               </li>
               <li class="dropdown">
                  <div><a class="tab3">кабинет</a></div>
               </li>
            </ul>
         </div>
      </div>
      <div class="work" umi:element-id="40">
         <div umi:field-name="order_info_top"></div>
      </div>
   </div>

CSS：

    #main #head div.site_info {
       padding-top: 45px;
    }

    #main #head div.site_info ul {
       width: 50%;
       margin: 0 auto;
       min-width: 1024px;
    }
    #main #head div.site_info ul li {
       display: inline;
       margin-right: 18px;
    }
    #main #head div.site_info ul li a.tab1 a.tab2 a.tab3 a.tab4 {
      float: left;
      margin-left: 89px;
    }

Answer 1

为单个菜单指定高度和宽度。然后添加以您的图像为背景的样式。定位背景图像顶部中心。

HTML

<div>
    <ul>
       <li class="dropdown"><div><a class="tab1">Menu 1</a></div></li>       
        <li class="dropdown"><div><a class="tab2">Menu 2</a></div></li>
        </li>
    </ul>
</div>

CSS

li
{
    list-style: none;
    float: left;
    width :100px;
}

.dropdown .tab1
{
    background : url('http://www.indievisionmusic.com/wp-content/themes/indievisionmusic/images/at_symbol_10x10.gif') no-repeat top center;
        padding-top: 10px;

}
.dropdown .tab2
{
    background : url('http://www.gigabyte.us/images/icon_blue.png') no-repeat top center;
    padding-top: 10px;
}

演示

Answer 2

只需将您的文字更改为<img src="images/image.jpg">

如果您希望它成为链接：<a href="index.html"><img src="images/image.jpg" width="100" height="100"/></a>

Answer 3

您可以只使用图像而不是文本，并使用 CSS 背景功能添加图像

li a.tab1 { background: url(); width:XXpx; height: XXpx }
li a.tab2 { background: url(); width:XXpx; height: XXpx }
li a.tab3 { background: url(); width:XXpx; height: XXpx  }