Question

我的网站标题如下：

.header-cont {
    width:100%;
    position:fixed;
    top:0px;
}
.header {
    height:50px;
    background:#F0F0F0;
    border:1px solid #CCC;
    width:950px;
    margin:0px auto;
}
.header-button {
    background: #73e3eb;
    background-image: -webkit-linear-gradient(top, #73e3eb, #5ec9d1);
    background-image: -moz-linear-gradient(top, #73e3eb, #5ec9d1);
    background-image: -ms-linear-gradient(top, #73e3eb, #5ec9d1);
    background-image: -o-linear-gradient(top, #73e3eb, #5ec9d1);
    background-image: linear-gradient(to bottom, #73e3eb, #5ec9d1);
    -webkit-border-radius: 13;
    -moz-border-radius: 13;
    border-radius: 13px;
    font-family: Lora;
    color: #6293ad;
    font-size: 20px;
    padding: 20px 15px 10px 15px;
    text-decoration: none;
}
.clearfix:after {
    display:block;
    clear:both;
}
.menu-wrap {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    background:#3e3436;
}
.menu {
    width:1000px;
    margin:0px auto;
}
.menu li {
    margin:0px;
    list-style:none;
    font-family:'Ek Mukta';
}
.menu a {
    transition:all linear 0.15s;
    color:#919191;
}
.menu li:hover > a, .menu .current-item > a {
    text-decoration:none;
    color:#be5b70;
}
.menu .arrow {
    font-size:11px;
    line-height:0%;
}
.menu > ul > li {
    float:left;
    display:inline-block;
    position:relative;
    font-size:19px;
}
.menu > ul > li > a {
    padding:10px 40px;
    display:inline-block;
    text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
    background:#2e2728;
}
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}
.sub-menu {
    width:150px;
    padding:5px 0px;
    position:absolute;
    top:100%;
    left:0px;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background:#2e2728;
}
.sub-menu li {
    display:block;
    font-size:16px;
}
.sub-menu li a {
    padding:10px 30px;
    display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
    background:#3e3436;
}

<html>
    <head></head>
    <body>
        <div class="header-cont">
            <div class="header">
                <div class="menu-wrap">
                    <nav class="menu">
                        <ul class="clearfix">
                            <li class="current-item"><a href="#">Home</a></li>
                            <li><a href="#"><span class="arrow">&#9660;</span>Sites</a>
                                <ul class="sub-menu">
                                    <li><a href="#">Site A</a></li>
                                    <li><a href="#">Site B</a></li>
                                    <li><a href="#">Site C</a></li>
                                    <li><a href="#">Site D</a></li>
                                </ul>
                            </li>
                            <li><a href="#">About</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </body>
</html>

对于长代码感到抱歉，但确实如此。我的问题是，当您将鼠标悬停在“网站”项下方的区域时，显示下拉列表中的div。我想改变它，以便它只显示你在“网站”上悬停，但我不知道如何。那里有人知道吗？

Answer 1

您应该使用opacity属性，而不是使用visibility属性。 opacity属性只是使元素透明化。 visibility属性完全隐藏了元素，但保留了元素在文档正常流程中的间距。

<强> JSFiddle Example

.menu li:hover .sub-menu {
    visibility: visible;
}

.sub-menu {
    width:150px;
    padding:5px 0px;
    position:absolute;
    top:100%;
    left:0px;
    visibility: hidden;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background:#2e2728;
}

您也不需要z-index财产。

或者，您也可以使用display: none;和display: block;，这与visibility属性的作用相同，只是它不会保留文档中的间距＆＃39;正常流量。

如何在悬停时隐藏div？

1 个答案: