我正在为客户工作的网站。对于菜单/导航栏,我为它们创建了一个(它们非常具体)带有下拉列表,但有一个问题 - 当您将鼠标悬停在下拉列表中的某个项目上时,它会消失 - 请在此处查看{{ 3}}
代码,我从google API调用jquery,然后是javascript,CSS和实际内容(在无序列表中)。
使用Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("#nav-one li").hover(
function(){ $("ul", this).fadeIn("fast"); },
function() { }
);
if (document.all) {
$("#nav-one li").hoverClass ("sfHover");
}
});
$.fn.hoverClass = function(c) {
return this.each(function(){
$(this).hover(
function() { $(this).addClass(c); },
function() { $(this).removeClass(c); }
);
});
};
</script>
CSS:
<style type="text/css">
.nav, .nav ul {
list-style: none;
margin: 0;
padding: 0;
height:20px
}
.nav {
z-index: 100;
position: relative;
}
.nav li {
border-left: 0px solid #000;
float: left;
margin: 0;
padding: 0;
position: relative;
font-family: Arial, Helvetica, sans-serif;
font-style:normal;
font-size:12px;
}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
font:1.22em/25px "Arial Narrow", Arial, sans-serif letter-spacing:5px;
color: #FFFFFF;
display: block;
padding: 0 10px;
text-decoration: none;
text-style: narrow;
margin-right:26px;
}
.nav li a:hover {
margin-right:26px;
color: #FFFFFF;
}
#nav-one li:hover a,
#nav-one li.sfHover a {
color: #FFFFFF;
}
#nav-one li:hover ul a,
#nav-one li.sfHover ul a {
color: #FFFFFF;
height:20px;
background-image: url(menubar/transparent.png);
}
#nav-one li:hover ul a:hover,
#nav-one li.sfHover ul a:hover {
color:#FFFFFF;
background-image:url(menubar/transparent.png);
}
.nav ul {
border-bottom: 0px solid #FFFFFF;
list-style: none;
margin: 0;
width: 100px;
position: absolute;
top: -99999px;
left: 0px;
}
.nav li:hover ul,
.nav li.sfHover ul {
top: 22px;
}
.nav ul li {
border: 0;
float: none;
font-family: Arial, Helvetica, sans-serif;
font-style:normal;
font-size:10px;
}
.nav ul a {
border: 0px solid #000;
border-bottom: 0;
padding-right: 50px;
margin-bottom: 0px;
width: 130px;
white-space: nowrap;
}
.nav ul a:hover {
color: #FFFFFF;
}
</style>
<style type="text/css">
body {
width: auto;
height: auto;
background-color: #3A2C21;
}
</style>
HTML:
<td background="images/menu_bg.gif" height="25"><ul id="nav-one" class="nav">
<li>
<a href="">HOME</a>
</li>
<li>
<a href="">PROFILE</a>
<ul>
<li><a href="profile/about/about.html">ABOUT</a></li>
<li><a href="profile/people/people.html">PEOPLE</a></li>
<li><a href="profile/services/services.html">SERVICES</a></li>
<li><a href="profile/tradeshow/tradeshow.html">TRADE SHOWS</a></li>
</ul>
</li>
<li>
<a href="portfolio/overview/overview.html">PORTFOLIO</a>
<ul>
<li><a href="portfolio/artistictile/artistictile.html">ARTISTIC TILE</a></li>
<li><a href="portfolio/atlantis/atlantis.html">ATLANTIS</a></li>
<li><a href="portfolio/blanco/blanco.html">BLANCO</a></li>
<li><a href="portfolio/farhills/farhills.html">BUTLER"S OF FAR HILLS</a></li>
<li><a href="portfolio/hampton/hampton.html">HAMPTON FORGE</a></li>
<li><a href="portfolio/hht/hht.html">HILAND H. TURNER</a></li>
<li><a href="portfolio/miele/miele.html">MIELE</a></li>
<li><a href="portfolio/poggenpohl/poggenpohl.html">POGGENPOHL</a></li>
<li><a href="portfolio/thg/thg.html">THG FAUCETS</a></li>
<li><a href="portfolio/topknobs/topknobs.html">TOP KNOBS</a></li>
<li><a href="portfolio/vixenhill/vixenhill.html">VIXEN HILL</a></li>
</ul>
</li>
<li>
<a href="">PUBLIC RELATIONS</a>
<ul>
<li><a href="pr/attention/attention.html">PRESS ATTENTION</a></li>
<li><a href="pr/frankpr/frankpr.html">FRANK PR</a></li>
<li><a href="pr/hits1/hits1.html">HITS</a></li>
<li><a href="pr/hits2/hits2.html">MORE HITS</a></li>
<li><a href="pr/prfurther/prfurther.html">LEVERAGING PR</a></li>
</ul>
</li>
<li>
<a href="">CONTACT</a>
</li>
</ul>
答案 0 :(得分:2)
通常这是由于<li>
标记与子导航<ul>
之间存在差距。即使是一个像素的间隙也会导致导航在光标到达子菜单之前消失。
例如,在CSS中添加padding: 0 0 10px;
到.nav li
,问题就会消失。
您也可以为<li>
设置一个特定的高度来解决问题。
当您到达图像幻灯片和菜单发生碰撞的位置时,菜单消失的问题,这是由z-index
问题引起的。
您应该将.nav
设置为z-index: 200
(或根据您的幻灯片显示大于100的任何内容 - 我会尝试过火)。这将确保它位于画廊上方。
答案 1 :(得分:1)
Javascript
<script>
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
HTML 已经是会员?
答案 2 :(得分:0)
我会使用Hover Intent plug-in。它专为这种用途而设计,有助于提供更强大的下拉菜单。