我试图用一些 z-index 的东西变得聪明。(父列表项与子 ul 重叠)但我认为一旦鼠标离开父列表项,它就会干扰我的子导航保持活动状态。我有一个小提琴来演示正在发生的事情。有任何想法吗?
http://jsfiddle.net/dv8withn8/8QCZk/
(占位符页脚用于证明导航之后的所有内容都应该像内容区域一样具有小于 -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%;
}