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的差距。我将border-bottom：3px solid rgba（0,0,0,0）添加到.drop a，并解决了问题。我不知道这是否是正确的方式，但它现在为我工作，所以我会去用它。

Answer 1

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

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

它可能会更快只是steal a menu

希望这有助于。

Answer 2

看起来像一个z-index问题，personaly我总是把菜单放在绝对位置，并给它们一些'9'在z-索引中，试着检查是否有任何绝对位置靠近这个菜单 无论如何heres my old 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 */ 
}