javascript - 网站菜单栏下拉

Question

我正在为客户开发网站。对于菜单/导航栏，我为他们创建了一个带有下拉菜单的菜单/导航栏(它们非常具体)，但是有一个问题——当您将鼠标悬停在下拉菜单中的一项上时，它会消失——请在此处查看 http://www.brandonsdesigngroup.com/menu-expamle.html 。

对于代码，我从 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>

Answer 1

问题 #1:菜单在光标到达子菜单之前消失。

通常这是由于 <li> 之间的差距造成的标签和子导航 <ul> .即使是一个像素的间隙也会导致导航在光标到达子菜单之前消失。

例如，添加一个padding: 0 0 10px;至 .nav li在你的 CSS 中，问题就消失了。

您还可以为 <li> 设置特定高度也可以解决这个问题。

问题 #2:当光标滑过图像幻灯片时，菜单消失。

关于当您的图像幻灯片和菜单发生碰撞时菜单消失的问题，这是由于 z-index 引起的。问题。

您应该设置 .nav有一个z-index: 200 (或任何大于 100 的数字，根据您的幻灯片放映——我试图过火)。这将确保它位于画廊上方。