我目前正在使用<li>构建栏的导航菜单。目前，我的菜单工作正常，但我想用我在Photoshop中设计的实际图像按钮来实际替换菜单上的文本（即项目，合规性，摘要等），以使其具有更美观的吸引力。 / p>
我尝试过：
#cssmenu .active {
background: url("images/DropDown-Design2_02.jpg") no-repeat top left;
}
这实际上使我的图像显示在所需的位置，但是您仍然可以看到图像上方的菜单文本，当您将鼠标悬停在图像的可见部分上时，没有悬停效果用于菜单项文本。
我的代码：
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<title>UC Client Login</title>
</head>
<body>
<div id='cssmenu'>
<ul>
<a href="https://www.insurancetrackingservices.com/ITSLive/livehelp.php?department=1" target="_blank"><img border="0" alt="Live Chat" src="images/DropDown-Design2_10.jpg" width="134" height="50"
onmouseover="this.src='images/livechathover.png'"
onmouseout="this.src='images/DropDown-Design2_10.jpg'"></a>
<li class="space1">Space Gap</li>
<li class="space2">Space Gap</li>
<li class='active'><a href='#'><span>Projects</span></a>
<ul>
<li><a href='#'><span>Select Project</span></a></li>
<li class='last'><a href='ActiveVendorBranchRpt.asp'><span>Status By Project</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Compliance</span></a>
<ul>
<li><a href='ProblemsSpecificRpt.asp'><span>Insured Search</span></a></li>
<li><a href='NoProblemsRpt.asp'><span>Compliant</span></a></li>
<li><a href='DeficiencyRpt.asp'><span>Non-Compliant</span></a></li>
<li><a href='CancellationRpt.asp'><span>Cancelled</span></a></li>
<li class='last'><a href='InsRateRpt.asp'><span>AM Best</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Contracts</span></a>
<ul>
<li><a href='../ITSContracts/SummaryOfContracts.aspx'><span>Summary of Contracts</span></a></li>
<li><a href='AddContract.asp'><span>Add a Contract</span></a></li>
<li class='last'><a href='../ITSContracts/ContractReport.aspx'><span>Locate a Contract</span></a></li>
</ul>
</li>
<li class='last'><a href='#'><span>Summary</span></a>
<ul>
<li><a href='SummaryProblemsRpt.asp'><span>Summary Problems</span></a></li>
<li><a href='ImproperCoverRpt.asp'><span>Coverages</span></a></li>
<li><a href='ExpiredCertificatesRpt.asp'><span>Expirations</span></a></li>
<li><a href='BasicComplRpt.asp'><span>Special Issues</span></a></li>
<li class='last'><a href='MissingPolicyRpt.asp'><span>Missing Policies</span></a></li>
</ul>
</li>
</ul>
</div>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (DropDown Design2.psd) -->
<div id="Table_01">
<div id="DropDown-Design2-11">
<img src="images/DropDown-Design2_11.jpg" width="347" height="166" alt="">
</div>
<div id="DropDown-Design2-12">
<img src="images/DropDown-Design2_12.jpg" width="103" height="142" alt="">
</div>
<div id="DropDown-Design2-13">
<img src="images/DropDown-Design2_13.jpg" width="223" height="166" alt="">
</div>
<div id="DropDown-Design2-14">
<img src="images/DropDown-Design2_14.jpg" width="191" height="166" alt="">
</div>
<div id="DropDown-Design2-15">
<img src="images/DropDown-Design2_15.jpg" width="103" height="24" alt="">
</div>
<div style="position:absolute; top:197px; left:374px;"><a target=Bottom href="LogOut.asp"><Font face = Verdana, Arial, Helvetica, sans-serif size = 1.5 color="1f497d"><b>LOG OUT</b></Font></a></div>
<a href="http://instracking.com/contact_insurance_tracking_services.html" target="_blank"><img border="0" alt="Contact Us" src="images/DropDown-Design2_01.jpg"
onmouseover="this.src='images/contactushover.png'"
onmouseout="this.src='images/DropDown-Design2_01.jpg'"></a> </a>
</body>
</html>
CSS：
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
/* Menu CSS */#cssmenu,
#cssmenu > ul {
background: url(images/highlight-bg.png) no-repeat;
padding-bottom: 3px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
left:0px;
top:0px;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
content: "";
display: table;
}
#cssmenu:after,
#cssmenu > ul:after {
clear: both;
}
#cssmenu {
width: auto;
zoom: 1;
}
li.space1{
visibility: hidden;
}
li.space2{
visibility: hidden;
}
#cssmenu > ul {
background: url(images/menu-bg.png) no-repeat;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li {
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li {
float: left;
position: relative;
}
#cssmenu > ul > li > a {
padding: 20px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #9e3825;
text-shadow: 0 -1px 0 rgba(116, 37, 2, 0.7);
line-height: 18px;
margin-right: 14px;
}
#cssmenu > ul > li:hover > a,#cssmenu > ul > li:hover.active > a {
background: url(images/hover.png) repeat;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
}
#cssmenu > ul > li > a > span {
line-height: 18px;
margin-right: 5px;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li > a:active {
background: url(images/active.png) no-repeat;
}
/* Childs */
#cssmenu > ul ul {
opacity: 1;
visibility: hidden;
position: absolute;
top: 120px;
background: url(images/highlight-bg.png) repeat;
margin: 0;
padding: 0;
z-index: -1;
}
#cssmenu > ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top: 52px;
left: 0;
}
#cssmenu > ul ul:before {
content: "";
position: absolute;
top: -10px;
width: 100%;
height: 20px;
background: transparent;
}
#cssmenu > ul ul li {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li a {
padding: 18px 26px;
display: block;
color: #393939;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
width: 150px;
border-left: 4px solid transparent;
text-shadow: 0 1px 0 white;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.01 ease-in-out;
}
#cssmenu > ul ul li a:hover {
border-left: 4px solid #de553b;
background: url(images/hover.png) repeat;
color: white;
text-shadow: 0 1px 0 black;
}
#cssmenu > ul ul li a:active {
background: url(images/menu-bg.png) no-repeat;
}
#cssmenu .active {
background: url("images/DropDown-Design2_02.jpg") no-repeat top left;
}
#Table_01 {
position:absolute;
left:0px;
top:1px;
width:864px;
height:1px;
visibility: inherit;
}
#DropDown-Design2-11 {
position:absolute;
left:0px;
top:50px;
width:347px;
height:166px;
}
#DropDown-Design2-12 {
position:absolute;
left:347px;
top:50px;
width:103px;
height:142px;
}
#DropDown-Design2-13 {
position:absolute;
left:450px;
top:50px;
width:223px;
height:166px;
}
#DropDown-Design2-14 {
position:absolute;
left:673px;
top:50px;
width:191px;
height:166px;
}
#DropDown-Design2-15 {
position:absolute;
left:347px;
top:192px;
width:103px;
height:24px;
}
任何建议将不胜感激！谢谢！