Question

我想使用这种风格

Site＆gt;然后选择Zerus主题。

Zerus的CSS如下：

@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');

/* Fonts */
body {
    font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6, #content a, ul.lw-hmenu a, .lw-hmenu li span.nav-header, #lw-topnav ul a, #lw-topnav ul li span.nav-header {
    font-weight: 600;
}

#content a::after {
    content: "→";
    padding-left: 5px;
}

#content div.pagination ul li a::after {
    content: "";
    padding-left: 0;
}
/* End Fonts */

/* Colors */
:root{
  --primary: #24b47e;
  --accent: #6772e5;
  --accent2: #b76ac4;
  --ux: rgba(255, 255, 255, 0.95);
  --ux-border: #6b7c93;
}

.lw_svg_logo {
    fill: var(--primary);
}

#masterPage {
    background-color:#F6F9FC;
}

#contentPage {
    background-color: #F6F9FC;
}

body {
    color:#6b7c93;
}

a, span.nav-header {
    color: var(--accent);
}
/* End Colors */

@media screen and (min-width: 768px) {
    #lw-topnav {
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
        border-bottom: 9px solid var(--ux-border);
    }

    #lw-topnav ul>li:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }

    #lw-topnav ul li ul {
        border-radius: 15px;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
        margin-top:15px !important;
    }

    #lw-topnav ul li ul::before {
        display:block;
        content: "";
        width:20px;
        height:20px;
        background-color: var(--ux);
        position:relative;
        left:50%;
        margin-top:5px;
        transform: translateX(-50%) rotateZ(45deg);
        z-index:1;
        top:-15px;
    }

    #lw-topnav ul li ul::after {
        display:block;
        content: "";
        height:9px;
        background-color: var(--ux-border);
        z-index:1;
        border-bottom-right-radius: 15px;
        border-bottom-left-radius: 15px;
    }   

    #lw-topnav ul li ul li ul {
        border-radius: 8px;
        margin-top: 0px !important;
    }

    #lw-topnav ul li ul li ul::before {
        display:none;
    }

    #lw-topnav ul>li:hover:after{
        content:"";
        position:absolute;
        left:0;
        right:0;
        top:0px;
        height:120%;
        z-index:-1;
    }
}

我想降低当您将鼠标悬停在顶部导航上时显示的菜单大约15px。但是，如果我这样做，那么我实际上无法进入子菜单，因为鼠标离开了包含悬停效果的<li>以使其可见，因此菜单消失。

您可以通过添加以下内容来查看我想要的效果：

#lw-topnav ul li ul {
    margin-top:15px !important;
}

我认为这可以通过使用transition-delay来实现，但无论我把它放在哪里，它似乎都没有任何效果。如果必须，我想避免使用javascript。任何人都可以帮助添加转换延迟的位置吗？

由于

Answer 1

您遇到的问题是，您的鼠标离开了顶部列表的<li>，因此悬停事件不再起作用。您必须单独显示子列表以及列表项被视为“悬停”的区域。

这是两件事，当您看到列表本身时，您无法看到程序接受该项目的区域为“悬停”。

我通过复制和修改SelfHTML中的代码创建了一个小例子，我指出了你面临的问题。如果您修改我突出显示的值，您会看到差异。

<html>  
<head>
<style>
nav {
border: 1px solid black;
height: 2em;
padding: 0.8em;
width: 50em;
}

nav ul {
margin: 0;
padding: 0;
text-align: center;
}

nav li {
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}

/* important here */

nav ul ul {
font: 0/0 serif;
margin-top: 40px;  /*this changes the display of the sublist*/
padding: 0;
position: absolute;
top: 0em;
/*change this to shift the space where your cursor stays with the sublist*/
z-index: -1;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}

nav ul li:hover ul {
font: inherit;
z-index: auto;
color: red;
}

nav ul ul li {
float: none;
margin-bottom: 0.2em;
}

nav a,
nav span {
background-color: royalblue;
border: 1px solid blue;
border-radius: 10px 10px 0 0;
box-shadow: 0px 5px 10px white inset;
color: gold;
display: block;
font-weight: bold;
margin: 0.6em 0 0 0;
padding: 0.4em;
width: 6.4em;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}

nav ul ul a,
nav ul ul span {
border-radius: 10px;
}

nav a:focus,
nav a:hover,
nav span
 {
color: royalblue;
background-color: gold;
}

nav a:focus,
nav a:hover {
margin-top: 0;
padding: 1em 0.4em 0.4em;
}

nav ul ul a:hover {
margin: 0.6em 0 0 0;
padding: 0.4em;
}

nav ul ul span {
background-color: maroon;
color: gold;
}
</style>
</head>
<body>  
<nav>
<ul>
    <li><a href="#">Seite 1</a></li>
    <li><a href="#">Seite 2</a>
       <ul> 
            <li><a href="#">Seite 2a</a></li>
            <li><a href="#">Seite 2b</a></li>

       </ul>
    </li>
    <li><a href="#">Seite 3</a></li>
    <li><a href="#">Seite 4</a>
       <ul>
            <li><a href="#">Seite 4a</a></li>
            <li><span>aktuelle Seite</span></li>            
            <li><a href="#">Seite 4c</a></li>   
       </ul>            
    </li>
    <li><a href="#">Seite 5</a></li>
</ul>   
</nav>
</body>
</html>

通过将top:0em修改为0甚至低于0，确保鼠标始终悬停在所选列表项上。为了平衡菜单向上移动的事实，只需调整margin-top in相同的框架！这一切都必须发生在子列表本身nav ul ul中，当然还有另一个深度，如果您创建这样的列表！：）

Answer 2

我通过在其后面添加一个不可见的div来修复它。

#lw-topnav ul>li:hover:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0px;
    height:120%;
    z-index:-1;
}

话虽如此。我认为S.M。的解决方案更好。我会更多地玩弄它。

延迟菜单

2 个答案: