類似導向牌的懸停菜單CSS3 html5導航菜單示例源代碼是小編為大家整理的一款由HTML5 css3 技術實現的導航菜單，看上去就像是路上的標示牌那樣，也像是一些旅游景區的導向牌，具有立體感，當鼠標懸停于上面的時候，就會顯示出二級子菜單，與主菜單形成互應效果，一樣具有立體感，主菜單文字變色，所以這款菜單創意性還是非常不錯的，維維小編覺得挺高大上，雖然只是純文字的，有興趣的朋友別錯過了，一塊來詳細了解下吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D側躺CSS3菜單-維維源碼下載</title>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
font: 14px/120% "Source Sans Pro", sans-serif;
color: #999999;
background: #111111;
transition: all 0.2s;
}
h1, h2, h3 {
font-family: "Oswald", "Arial Narrow", sans-serif;
}
.logo {
margin: 1em auto;
text-align: center;
}
.logo h1 {
font-size: 2em;
}
.menu_wrapper {
padding: 1em;
perspective: 500px;
}
nav {
width: 230px;
max-width: 360px;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateY(20deg) rotateX(36deg) rotateZ(-6deg);
transition: transform 1s;
}
nav > ul {
list-style: none;
padding: 1em;
transform: translateZ(-100px);
transform-style: preserve-3d;
transition: all 0.2s;
}
nav > ul > li {
margin: 0 0 0.5em 0;
position: relative;
color: #222222;
font-family: "Oswald", "Arial Narrow", sans-serif;
transition: all 0.2s;
transform-style: preserve-3d;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.7);
border-radius: 6px;
background-color: #ffac05;
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFAC05', endColorstr='#FFD96404');
background-image: -moz-linear-gradient(top, #ffac05 0%, #d96404 100%);
background-image: -webkit-linear-gradient(top, #ffac05 0%, #d96404 100%);
background-image: linear-gradient(to bottom, #ffac05 0%, #d96404 100%);
}
nav > ul > li:hover {
background: white;
transform: translateZ(16px) rotateY(4deg);
}
nav > ul > li:hover a {
color: #222222;
}
nav > ul > li:hover ul {
opacity: 1;
visibility: visible;
transform: translateZ(60px) rotateY(-25deg);
}
nav > ul > li:hover ul li {
margin-left: 0.325em;
transition: all 0.4s;
}
nav > ul > li a {
display: block;
padding: 0.5em;
min-height: 2.5em;
line-height: 2.5em;
color: white;
font-size: 1.5em;
text-decoration: none;
transition: all 0.2s;
}
nav > ul > li a:hover {
color: #222222;
}
nav > ul > li ul {
opacity: 0;
visibility: hidden;
position: absolute;
left: 83%;
top: 0;
padding-left: 2em;
min-width: 300px;
transition: all 0.2s;
transform: translateZ(-5px) rotateY(-10deg);
}
nav > ul > li ul li {
display: inline-block;
width: 45%;
margin: 0 0 0.325em -3em;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.7);
transform-style: preserve-3d;
}
nav > ul > li ul li a {
color: black;
font-size: 1.325em;
line-height: 120%;
background: white;
border-radius: 4px;
}
nav > ul > li ul li a:hover {
background: #ff9922;
}
nav > ul > li ul div {
font-family: "Source Sans Pro", sans-serif;
color: #dddddd;
}
</style>
</head>
<body>
<div class="menu_wrapper">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#"><h3>Service Page One</h3></a>
<div>Some additional content</div>
</li>
<li><a href="#"><h3>Service Page Two</h3></a>
<div>Some additional content</div>
</li>
<li><a href="#"><h3>Service Page Three</h3></a>
<div>Some additional content</div>
</li>
</ul>
</li>
<li><a href="#">About</a>
<ul>
<li><a href="#"><h3>About Page One</h3></a>
<div>Some additional content</div>
</li>
<li><a href="#"><h3>About Page Two</h3></a>
<div>Some additional content</div>
</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</body>
</html>