html - CSS Subnav 未保持活动状态

Question

我试图用一些 z-index 的东西变得聪明。（父列表项与子 ul 重叠）但我认为一旦鼠标离开父列表项，它就会干扰我的子导航保持活动状态。我有一个小提琴来演示正在发生的事情。有任何想法吗？

（占位符页脚用于证明导航之后的所有内容都应该像内容区域一样具有小于 -1 的 z-index。）

标记：

<!DOCTYPE html>

<html>
<head>
    <title>Header Test</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
    <div id="global-header" class="header">
        <div id="secondary-nav" class="nav" role="toolbar" aria-label="User Tools">
            <div class="wrapper">
                <ul class="group">
                    <li><a href="">Item 1</a></li>

                    <li><a href="">Item 2</a></li>

                    <li><a href="">Item 3</a></li>

                    <li><a href="">Item 4</a></li>

                    <li><a href="">Item 5</a></li>

                    <li><a href="">Item 6</a></li>
                </ul>
            </div><!-- /.wrapper -->
        </div><!-- /#secondary-nav -->

        <div id="page-top" class="group">
            <div class="wrapper">
                <hgroup id="branding" class="group">
                    <h1 class="logo">Name!</h1>

                    <h2 class="slogan">Memorable slogan!</h2>
                </hgroup><!-- /#branding -->

                <div id="global-nav" class="nav" role="navigation" aria-label="Main Site Navigation">
                    <ul>
                        <li class="1"><a href="">Item 1</a></li>

                        <li class="2"><a href="">Item 2</a></li>

                        <li class="3"><a href="">Item 3</a></li>

                        <li class="4"><a href="">Item 4</a></li>

                        <li class="5"><a href="">Item 5</a></li>

                        <li class="expand user">
                            <a href="">Hi, <span class="user-name">John</span></a><a class="message-count">3</a>

                            <ul class="user-menu sub-nav" role="menu" aria-label="User Menu">
                                <li><a href="">Item 1</a></li>

                                <li><a href="">Item 2</a></li>

                                <li><a href="">Item 3</a></li>

                                <li><a href="">Item 4</a></li>

                                <li><a href="">Item 5</a></li>

                                <li><a href="">Item 6</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!-- /#global-nav -->
            </div><!--- /.wrapper -->
        </div><!-- /#page-top -->
    </div><!-- /#global-header -->

    <div id="content">
        <p>Hello, World!</p>
    </div>

    <div id="footer">
        <p>I'm a footer, lol!</p>
    </div>
</body>
</html>

款式：

* {
    box-sizing:border-box;
}

html {
    font-size:100%;
}

body {
    margin:0 auto;
    font:1em/1 Helvetica,Arial,sans-serif;
    width:100%;
}

#global-header {
    width:100%;
}

.wrapper {
    margin:0 auto;
    max-width:960px;
}

.nav ul {
    list-style:none;
}

.nav ul > li {
    display:block;
    float:left;
}

.nav li a {
    display:block;
}

[role=toolbar] {
    display:block;
    margin:0 auto;
    width:100%;
    background:url(grey_diagnol.png) repeat;
    overflow:hidden;
}

[role=toolbar] ul {
    display:block;
    margin:0 auto;
    font-size:.625em;
    float:right;
}

[role=toolbar] li {
    margin:.5em 0;
}

[role=toolbar] li:not(:last-child) {
    border-right:1px solid #436394;
}

[role=toolbar] ul li > a {
    color:#436394;
    text-decoration:none;
    padding:.25em .72em;
}

[role=toolbar] a:hover {
    color:#a1c336;
}

#page-top {
    border-top:2px solid #32568F;
    background-color:#172842;
    color:#fff;
    width:100%;
    overflow:visible;

}

#branding {
    display:inline;
    float:left;
    line-height:2em;
    vertical-align:middle;
    padding-top:.9em;
}

#branding h1.logo {
    display:inline-block;
    margin:0;
    padding:0;
    float:left;
    text-indent:100%;
    overflow:hidden;
    background:url(logo.png) no-repeat left top;
    width:124px;
    height:27px;
    vertical-align:bottom;
    margin-right:.4em;
}

#branding h2 {
    display:inline-block;
    font-size:.625em;
    font-style:oblique;
    font-weight:400;
    float:left;
    margin:0;
    padding:0;
}

[role=navigation] ul {
    display:block;
    margin:0;
    padding:0;
    float:right;
}

[role=navigation] li {
    display:block;
    position:relative;
    margin-bottom:-5px;
    font-family:'MuseoSlab500',Georgia,'Times New Roman',serif;
    font-weight:700;
    font-size:1.2em;
    text-transform:lowercase;
}

[role=navigation] li:hover {
    background:#b4df5b;
    background:-moz-linear-gradient(top,#a1c336 0%,#88a13d 100%);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#a1c336),color-stop(100%,#88a13d));
    background:-webkit-linear-gradient(top,#a1c336 0%,#88a13d 100%);
    background:-o-linear-gradient(top,#a1c336 0%,#88a13d 100%);
    background:-ms-linear-gradient(top,#a1c336 0%,#88a13d 100%);
    background:linear-gradient(to bottom,#a1c336 0%,#88a13d 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1c336',endColorstr='#88a13d',GradientType=0);
    box-shadow:0 1px 4px #000;
    text-shadow:1px 1px 1px #3D4427;
    color:#fff;
}

[role=navigation] a {
    color:#fff;
    text-decoration:none;
    padding:1em;
}

[role=navigation] .user-name {
    position: relative;
    text-transform:uppercase;
    font:.64em Helvetica,Arial,sans-serif;
    color:#a2bf39;
    text-shadow:none;
    /* max-width: 5em;
    overflow: hidden;
    text-overflow: clip;
    display: inline-block; */
}

[role=navigation] li:hover .user-name {
    color:#172842;
}

a.message-count {
    display: block;
    position: absolute;
    top: -2px;
    right: -2px;
    box-shadow: 0px 1px 4px black;
    border: 2px solid #fff;
    border-radius: 50px;
    padding: .25em .5em;
    background-color: #d52424;
    font: .75em Helvetica, Arial, sans-serif;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
}
a.message-count:hover {
    background-color: red;
    box-shadow: 0px 1px 4px white;
}

[role=navigation] li ul.sub-nav {
    display:none;
    position:absolute;
    top:2.5em;
    left:-.75em;
    z-index:-1;
    box-shadow:0 1px 8px rgba(23,40,66,.5);
    border-right:1px solid #172842;
    border-bottom:1px solid #172842;
    border-left:1px solid #172842;
    padding-top:.5em;
    background-color:#ededf4;
}

[role=navigation] li:hover ul.sub-nav {
    display:block;
}

.sub-nav li {
    float:none;
    display:list-item;
    font-size:14px;
    font-size:.82rem;
    font-family:Helvetica,Arial,sans-serif;
    font-weight:400;
    min-width:150px;
    margin:0;
    text-shadow:none;
}

.sub-nav li:hover {
    background:#a1c336;
    text-shadow:none;
    box-shadow:none;
}

.sub-nav li a {
    padding:.5em .75em;
    color:#172842;
}

.sub-nav li a:hover {
    color:#fff;
}

#content {
    width: 100%;
    background-color: red;
    height: 100%;
    z-index: -2;
    position: relative;
}

#footer {
    width: 100%;
    background-color: blue;
    height: 100%;
}


/* group */
.group:after {
    content:".";
    display:block;
    clear:both;
    visibility:hidden;
    line-height:0;
    height:0;
    overflow:hidden;
    font-size:0;
}

.group {
    display:inline-block;
}

html[xmlns] .group {
    display:block;
}

* html .group {
    height:1%;
}

html - CSS Subnav 未保持活动状态

标记：

款式：

0 回答 0

Related

Reference