网站菜单栏下拉

Question

我正在为客户开发网站。对于菜单/导航栏，我为他们创建了一个下拉菜单（它们非常具体），但是有一个问题——当你将鼠标悬停在下拉菜单中的一个项目上时，它消失了——在这里查看 @987654321 @。

对于代码，我从 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> 之间的差距。即使是一个像素的间隙也会导致导航在光标到达子菜单之前消失。

例如，在您的 CSS 中将 padding: 0 0 10px; 添加到 .nav li，问题就会消失。

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

问题 #2：当光标在图像幻灯片上运行时菜单消失。

关于当您到达图像幻灯片和菜单冲突的点时菜单消失的问题，这是由于z-index 问题。

您应该将.nav 设置为z-index: 200（或任何大于100 的值，根据您的幻灯片显示——我试图过火）。这将确保它位于画廊上方。

Answer 2

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 已经是会员？

登录

成为会员？ 注册

• 陆军
• 海军
• 空军

Answer 3

我会使用Hover Intent plug-in。它专为这种用途而设计，有助于提供更强大的下拉菜单。