Question

CSS+DIV 导航菜单 菜鸟求解！~

<style type="text/css">

#vertmenu {
font-family: "宋体";
font-size: 12px;
width: 220px;
overflow: hidden;
}

#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#vertmenu ul li {
margin: 0px;
padding: 0px;
}
#vertmenu ul li a {
font-size: 12px;
display: block;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:220px;
}

#vertmenu ul li a:hover, #vertmenu ul li a:focus {
color: #FF6600;
background-image: url(pic/zc/bj_03.gif);
background-repeat: no-repeat;
}

</style>
<table width="220" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div id="vertmenu">

<ul>
<li><a href="#" tabindex="1">Web Sites</a></li>
<li><a href="#" tabindex="2">Web Sites</a></li >
<li><a href="#" tabindex="3">Computing</a></li>
<li><a href="#" tabindex="4">Web Sites</a></li>
<li><a href="#" tabindex="5">Games</a></li>
<li><a href="#" tabindex="6">Links</a></li>
</ul>
</div></td>
</tr>
</table>

如何在文字前加上图标？
望能给出详解，胜感！~~~

Answer 1

一种：
<style>
img{vertical-align:middle;}
li{margin-top:5px;}
</style>
<ul>
<li><img src="图片" /><a href="#">1111111111111</a></li>
<li><img src="图片" /><a href="#">222222222</a></li>
<li><img src="图片" /><a href="#">33333333333</a></li>
</ul>

二种：(css写不好的话容易出问题)
<style>
li{ list-style-image:url(图片)"}
<ul>
<li><img src="图片" /><a href="#">1111111111111</a></li>
<li><img src="图片" /><a href="#">222222222</a></li>
<li><img src="图片" /><a href="#">33333333333</a></li>
</ul>
</style>

Answer 2

1、a链接前插入图标图片
2、li给背景

追问

1、a链接前插入图标图片
插入后会另起一行

2、li给背景
加背景后，鼠标经过显示的图片将覆盖图标

追答

1、display: block;去掉就不会了。。li本身就是块级的。没必要给a再加
2、给li背景后。就不要给A前面插入图片了。而且display: block也去掉。。再给li一个左padding。。a就不要给padding了。给li一个行高。

追问

先感谢你的耐心解答不好意思，菜鸟问题多了点。。。
可能我之前描述的问题很正确？

追答

那种就给你的li和你的a:hover背景吧。li的背景只有前面的小图标。。a:hover的背景是前面小图标加那一条经过的背景图或者颜色
a给一个display:block和padding-left给个值。。就行了

Answer 3

le">
<ul>
<li><a href="#">首页</a></li>
<li>
<a href="#">衬衫</a>
<ul>
<li><a href="#">长袖衬衫</a></li>
<li><a href="#">短袖衬衫</a></li>
<li><a href="#">无袖衬衫</a></li>
</ul>
</li>
<li>
<a href="#">裤子</a>
<ul>
<li><a href="#">休闲裤</a></li>
<li><a href="#">卡其裤</a></li>
<li><a href="#">牛仔裤</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
css
#title{
margin:10px auto;
width:800px;
height:25px;
border:1px solid black;
}
#title ul{
margin:5px;
}
#title ul li{
float:left;
margin-right:14px;
position:relative;
z-index:100;
}

#title ul li a{
display:block;
padding:0 8px;
background-color:white;
font-weight:700;
}

#title ul li a:hover{
background:none;
color:white;
}

#title ul li ul{
margin:0px;
background-color:white;
position:absolute;
width:70px;
display:none;
}

#title ul li:hover ul{
margin:0px;
background-color:white;
position:absolute;
width:70px;
display:block;
}

#title ul li ul li{
background-color:#88c366;
border-bottom:1px solid #bbb;
text-align:left;
width:100%;
}

Answer 4

这么简单的事情啊！