html - 将 li 导航菜单文本替换为图像并保持悬停 + 下拉菜单效果？

标签 html image drop-down-menu css

我目前正在开发一个使用 <li> 的导航菜单构建酒吧。目前，我的菜单运行良好，但我想用我在 Photoshop 中设计的实际图像按钮实际替换菜单上的文本(即元素、合规性、摘要等)，以使其更具美感。

我尝试过的:

#cssmenu .active {
    background: url("images/DropDown-Design2_02.jpg") no-repeat top left;
}

这实际上使我的图像显示在所需的位置，但是您仍然可以在图像上方看到菜单文本，并且当您将鼠标悬停在图像的可见部分上时，没有像菜单那样的悬停效果元素文本。

See this image

我的代码:

<!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;
}

如有任何建议，我们将不胜感激!谢谢!

最佳答案

我相信你需要做一个 display:none在 <span>Projects</span> 上元素。您可以使用 JQuery将鼠标悬停在文本上时将其移出 View 。我希望这能回答您的问题。

关于html - 将 li 导航菜单文本替换为图像并保持悬停 + 下拉菜单效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30402657/

上一篇：html - 使用位置 :fixed on tumblr 时链接将不起作用

下一篇：Table Angular js中的HTML链接

相关文章：

html - Flex/Grid 布局不适用于按钮或字段集元素

html - 我应该在 CSS 中选择哪个标签以及我应该暗示哪些 css 规则以便元素将出现在列中(大型菜单)

HTML 对齐图像

javascript - 如何让我的下拉菜单保持下拉状态？

twitter-bootstrap - 在 Firefox 中单击选择会立即导致选项下拉菜单关闭

html - DIV 更改页面缩放位置

html - 无法从网站下载自定义字体以供离线使用

android - 来自 url 的 LinearLayout setBackgroundDrawable 位图

python - 如何检测所有矩形框python opencv而不会遗漏任何东西

javascript - 从 html 下拉列表中获取值，传递给 javascript 函数

©2024 IT工具网  联系我们