css - CSS Menu - submenu disappearing

Question

The submenu under story.php shows fine on the index.php and story.php pages. When I hover over story.php link from any other page (joinus.php, events.php, shop.php), the submenu shows but then disappears when I try to click on any of the submenu items.

<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;
}

I don't know if this is affecting anything, but I also have this 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;
}

Thanks.

UPDATE: I finally figured it out. It was due to the last bit of CSS {border-bottom:3px groove #909090} to highlight the current page/link. That was causing a 3px gap between the anchor and submenu. I added border-bottom:3px solid rgba(0,0,0,0) to .drop a and that solved the problem. I don't know if this is the right way, but it is working for me now so I will go with it.

score 0 · Accepted Answer

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

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

偷一份菜单可能会更快

希望这可以帮助。

score 0 · Accepted Answer

看起来像一个 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 */
}

css - CSS Menu - submenu disappearing

2 回答 2

Related

Reference