SilverStripe中的下拉菜单

我在SilverStripe中有一个下拉式菜单，虽然当您将鼠标悬停在显示的下降部分的空间上时，我只希望它在您将鼠标悬停在主菜单项上时显示。我真的不知道这是否合理。我已经包含了我的代码，所以你可以看看我的意思。SilverStripe中的下拉菜单

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>

来源

2016-01-07 Jackgrif

请更改您的问题，我很难理解这个问题.... –

您可以发布它在运行时产生的源代码（纯HTML）。 – LOTUSMS

尝试删除 “不透明度0;”并将其更改为“display：none;”和“不透明：1”到“显示：块”。因为子菜单实际上存在，即使你看不到它，所以它仍然在被徘徊。这似乎是一个纯粹的CSS问题，我可以看到。希望有帮助

来源

2016-01-07 04:50:06

谢谢你完美的作品 – Jackgrif

我们可以通过调整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过渡淡出菜单进进出出。

来源

2016-01-07 10:27:46 3dgoo

SilverStripe中的下拉菜单

回答

相关问题