Css 带有文本和图片的网站标题菜单

Css 带有文本和图片的网站标题菜单,css,html,html-lists,Css,Html,Html Lists,请帮我解决我的问题。 我需要用图片制作头像菜单。 现在我有: 我需要做的是: 我的HTML代码在这里: <div id="head"> <div class="site_info"> <div id="tabs"> <ul id="tabMenu"> <li class="dropdown"> <div

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

我需要做的是:

我的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>

只需更改


如果你想让它成为一个链接:

给每个菜单指定一个高度和宽度。然后添加以图像为背景的样式。将背面图像放置在顶部中间

HTML

您可以使用图像而不是文本,并使用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  }

是否将图像添加到列表中?还是作为背景???
<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>
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;
}
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  }