CSS 菜单 - 子菜单消失

Question

story.php 下的子菜单在 index.php 和 story.php 页面上显示良好。当我将鼠标悬停在任何其他页面（joinus.php、events.php、shop.php）的 story.php 链接上时，子菜单会显示，但当我尝试单击任何子菜单项时会消失。

<ul id="navbar" class="drop">
    <li><a href="story.php">ABOUT US</a>
        <ul>
            <li><a id="storynav" href="story.php">OUR STORY</a></li>
            <li><a id="meetusnav" href="meetus.php">MEET US</a></li>
            <li><a id="valuesnav" href="values.php">MISSION & VALUES</a></li>
            <li><a id="faqnav" href="faq.php">FAQs</a></li>
            <li><a id="contactnav" href="contact.php">CONTACT</a></li>
        </ul>
    </li>
    <li><a id="joinusnav" href="joinus.php">JOIN US</a></li>
    <li><a id="eventsnav" href="events.php">EVENTS</a></li>
    <li><a id="shopnav" href="shop.php">SHOP</a></li>
</ul>

CSS：

#navbar {
    position: relative;
    top: 60px;
    left: 60px;
    width: 600px;
}

.drop {
    position: relative;
    z-index: 597;
    float: left;
}

.drop a {
    display: block;
    font: bold 15px verdana;
    color: #383838;
    text-align: center;
    textshadow: 0 1px 3px #808080;
}

.drop li {
    display: inline;
    float: left;
}

.drop ul {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 598;
}

.drop li ul:hover, .drop li ul.hover {
    position: relative;
    display: inline;
    width: 100%;
    z index: 599;
    cursor: default;
}

.drop ul a {
    font-size: 13px;
}

.drop li:hover > ul {
    visibility: visible;
}

我不知道这是否会影响任何东西，但我也有这个 css：

body#home a#homenav, body#story a#storynav, body#meetus a#meetusnav, 
body#values a#valuesnav, body#faq a#faqnav, body#contact a#contactnav,
body#joinus a#joinusnav, body#events a#eventsnav, body#shop a#shopnav {
    border-bottom: 3px groove #909090;
}

body#story .drop ul, body#meetus .drop ul, body#values .drop ul, 
body#faq .drop ul, body#contact .drop ul {
    visibility: visible;
}

谢谢。

更新：我终于想通了。这是由于 CSS {border-bottom:3px groove #909090} 的最后一点突出当前页面/链接。这导致锚点和子菜单之间存在 3px 的间隙。我在 .drop a 中添加了border-bottom:3px solid rgba(0,0,0,0) 并解决了这个问题。我不知道这是否是正确的方法，但它现在对我有用，所以我会继续使用它。

Answer 1

我建议它是某处的 z-index 属性，或者是你的“可见性：可见”规则。如果没有 jsfiddle，我真的不知道。

否则，我会检查文件之间的不同之处。 'DiffMerge' 是一个很酷的工具，可以快速查看文件之间的差异。

steal a menu 可能会更快

希望这会有所帮助。

Answer 2

看起来像 z-index 问题，我个人总是将菜单放在绝对位置，并在 z-index 中给它们一些“9”，尝试检查您是否有任何靠近此菜单的绝对位置 无论如何，这是我的旧 CSS 菜单：

<div id="menu">
<ul id="mainm">
<li class="clas">Home<ul><li class="cc">Header 1</li><li class="dd">Header 2</li><li class="cc">Header 3</li><li class="dd">Header 4</li><li class="cc">Header 5</li>
<li id="bottomend"  class="dd">Header 6</li></ul></li>
<li class="clas">About<ul><li class="cc">Header 1</li><li class="dd">Header 2</li><li class="cc">Header 3</li><li class="dd">Header 4</li><li class="cc">Header 5</li><li id="bottomend" class="dd">Header 6</li></ul></li>
<li class="clas">FAQ<ul><li class="cc">Header 1</li><li class="dd">Header 2</li><li class="cc">Header 3</li><li class="dd">Header 4</li><li class="cc">Header 5</li><li id="bottomend" class="dd">Header 6</li></ul></li>
<li class="clas">Site Design's<ul><li class="cc">Header 1</li><li class="dd">Header 2</li><li class="cc">Header 3</li><li class="dd">Header 4</li><li class="cc">Header 5</li><li id="bottomend" class="dd">Header 6</li></ul></li>
<li class="clas" id="boright">Sign Up !<ul><li class="cc">Header 1</li><li class="dd">Header 2</li><li class="cc">Header 3</li><li class="dd">Header 4</li><li class="cc">Header 5</li><li id="bottomend" class="dd">Header 6</li></ul></li>
</ul>
</div>

风格：

@font-face {
    font-family: 'Finger Paint', cursive;
    font-family: 'Mr Dafoe', cursive;
    font-family: 'Fjalla One', sans-serif;

     }
    body { font-family:'Fjalla One'; color:#fff}
#mainm{list-style-type:none; text-align: center;}
.clas ul { list-style-type:none; padding:0px;display:none; background-color:#903; }

.clas { float:left; width:90px; background-color:#2872DF;  border:0px; height:30px; font-family:'Fjalla One'; font-weight:300; line-height:30px; 
    border-left:1px solid #7C99E4;
         background: rgb(59,103,158); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(59,103,158,1) 0%, rgba(43,136,217,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(59,103,158,1)), color-stop(50%,rgba(43,136,217,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
#boright {border-right:1px solid #7C99E4;}
.main:hover {background-color:#78A3F1;}
.clas:hover {background-color:#78A3F1;
background: rgb(126,204,234); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(126,204,234,1) 0%, rgba(11,176,226,1) 50%, rgba(121,206,234,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(126,204,234,1)), color-stop(50%,rgba(11,176,226,1)), color-stop(100%,rgba(121,206,234,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(126,204,234,1) 0%,rgba(11,176,226,1) 50%,rgba(121,206,234,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(126,204,234,1) 0%,rgba(11,176,226,1) 50%,rgba(121,206,234,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(126,204,234,1) 0%,rgba(11,176,226,1) 50%,rgba(121,206,234,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(126,204,234,1) 0%,rgba(11,176,226,1) 50%,rgba(121,206,234,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7eccea', endColorstr='#79ceea',GradientType=0 ); /* IE6-9 */
}


.clas:hover ul { display:block; border:0px solid black; width:120px; height:180px; line-height:30px; padding:0px 0px 0px 0px; background-color:#78A3F1; margin-top:0px;}
.imgfl {float:right; top: 70px; box-shadow:5px 5px 5px #003;  margin-right:70px;}
li ul li.cc {background-color:#78A3F1; width:150px; text-align:center; border-bottom: 3px #7C99E4 solid;}
 li ul li.dd {background-color:#5582D5; width:150px; text-align:center; border-bottom: 3px #7C99E4 solid;}
 li ul .cc:hover , .dd:hover  {background-color:#F96;}
#bottomend {  border-bottom:1px solid #000;}
#border { position:absolute; border:2px solid #FFF; width:200px; height:200px; z-index:20;}
#clas:hover ul{ 
    display:block; 
    border:0px solid black; 
    width:300px; height:150px; 
    line-height:30px; 
    padding:00px 0px 0px 00px; 
    background-color:#78A3F1; 
    margin-top:0px;
}
#menu {  
    height:30px; 
             box-shadow:5px 1px 5px #666;
    width:700px;
    padding:0px 160px;
    background: rgb(59,103,158); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(59,103,158,1) 0%, rgba(43,136,217,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(59,103,158,1)), color-stop(50%,rgba(43,136,217,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}