SilverStripe 中的下拉菜单

Question

我在 SilverStripe 中有一个下拉菜单可以使用，尽管当您将鼠标悬停在 space 上时它会显示下拉部分，而我只希望它在您悬停在主菜单项上时显示。我真的不知道这是否有意义。我已经包含了我的代码，所以你可能会明白我的意思。

CSS

.menu, .menu ul, .menu li, .menu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
.menu {
    height: 40px;
    width: auto;
    padding: 0;
    margin: 0;
    float: left;
}
.menu li {
    position: relative;
    list-style: none;
    float: left;
    display: block;
}

/* Links 8*/
.menu li a {
    display: block;
    padding: 0 20px;
    margin: 6px 0;
    line-height: 28px;
    text-decoration: none;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #f3f3f3;
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
    text-transform: uppercase;
}
.menu li:first-child a {
    border-left: none;
}
.menu li:last-child a {
    border-right: none;
}
.menu li:hover > a {
    color: #D12D3C;
}
.menu li > a:hover {
    color: #D12D3C;
}
.menu li > a.current {
    color: #000;
    background-color: #fff;
}
.menu li > a.section {
    color: #000;
    background-color: #fff
}

/* Sub Menu */
.menu ul {
    position: absolute;
    top: 40px;
    left: 0;
    opacity: 0;
    background: #1f2024;
    text-transform: none;
    text-transform: none;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
    z-index: 9999;
}
.menu li:hover > ul {
    opacity: 1;
}
.menu ul li {
    height: auto;
    overflow: hidden;
    padding: 0;
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}
.sub-menu li:hover {
    height: auto;
    overflow: visible;
    padding: 0;
}
.menu ul li a {
    width: 210px;
    padding: 4px 0 4px 30px;
    margin: 0;
    border: none;
    border-bottom: 1px solid #353539;
}
.menu ul li:last-child a {
    border: none;
}

HTML

<div class="large-12 medium-12 header columns">
    <img src="themes/Connected/images/Connected-banner.png" alt="banner" />
</div>
<div class="large-12 medium-12 band columns">
    <ul class="menu">
        <% control ChildrenOf(Home) %>
        <li><a class="$LinkingMode" href="$Link" title="$Title.XML" alt="$Title.XML" style="text-transform:uppercase;">$MenuTitle</a>
            <% if Children %>
            <ul class="sub-menu">
                <!-- Sub Menu -->
                <% control Children %>
                <li><a class="$LinkingMode" href="$Link" title="$Title.XML" alt="$Title.XML">$MenuTitle</a></li>
                <% end_control %>
            </ul>
            <% end_if %>
        </li>
        <% end_control %>
    </ul>
    <img src="/themes/Connected/images/search-icon.png" alt="search-icon" />
</div>

Answer 1

尝试删除 "opacity 0;" 并将其更改为 "display: none;" 并将 "opacity: 1" 更改为 "display: block;"。因为子菜单实际上存在，即使您看不到它，所以它仍然悬停在上面。据我所知，这似乎是一个纯粹的 css 问题。希望有帮助

Answer 2

我们可以通过调整 top 值将子菜单移出屏幕直到悬停。

CSS

.menu ul {
    position: absolute;
    top: -100000px;
    left: 0;
    opacity: 0;
    background: #1f2024;
    text-transform: none;
    text-transform: none;
    border-radius: 0 0 5px 5px;
    -webkit-transition: opacity .25s ease .1s, top 0s .35s;
    transition: opacity .25s ease .1s, top 0s .35s;
    z-index: 9999;
}
.menu li:hover > ul {
    opacity: 1;
    top: 40px;
    -webkit-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}

Demo

这样做而不是使用 display: none 和 display: block 隐藏和显示菜单的好处是，这允许我们有一个很好的 css 过渡淡入和淡出菜单。

SilverStripe 中的下拉菜单

Dropdown menu in SilverStripe

html

css

menu

silverstripe