CSS3 Multi Menu Levels.txt

(6 KB) Pobierz
<style>
.cssplayMenu {position:relative; width:750px; margin:0 auto; text-align:center;}

.cssplayMenu ul {margin:0; list-style:none; white-space:nowrap; text-align:left; display:inline-block; background:#000; padding:10px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background: rgb(174,188,191);
background: -moz-linear-gradient(top,  rgba(174,188,191,1) 0%, rgba(110,119,116,1) 50%, rgba(10,14,10,1) 51%, rgba(10,8,9,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(174,188,191,1)), color-stop(50%,rgba(110,119,116,1)), color-stop(51%,rgba(10,14,10,1)), color-stop(100%,rgba(10,8,9,1)));
background: -webkit-linear-gradient(top,  rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);
background: -o-linear-gradient(top,  rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);
background: -ms-linear-gradient(top,  rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);
background: linear-gradient(top,  rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#aebcbf&#39;, endColorstr=&#39;#0a0809&#39;,GradientType=0 );
}
.cssplayMenu ul ul {filter:0; *background:rgb(174,188,191);}

.cssplayMenu ul {display:inline;}

.cssplayMenu li {margin:0; padding:0; list-style:none;}
.cssplayMenu li {display:inline-block; display:inline;}
.cssplayMenu ul ul {position:absolute; left:0; display:none;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.cssplayMenu ul ul ul { 
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.cssplayMenu &gt; ul {display:table; margin:0 auto;}
.cssplayMenu &gt; ul &gt; li {float:left; display:block; position:relative;}
.cssplayMenu &gt; ul &gt; li:hover {display:inline-block; z-index:10;}

.cssplayMenu ul a {display:block; font:15px/30px &quot;Ubuntu Condensed&quot;, arial,sans-serif; color:#fff; text-decoration:none; padding:0 20px; text-shadow:0 -1px 2px rgba(0, 0, 0, 0.6);}
.cssplayMenu &gt; ul &gt; li &gt; a {
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.cssplayMenu &gt; ul &gt; li:first-child &gt; a,
.cssplayMenu &gt; ul &gt; li:last-child &gt; a {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.cssplayMenu ul ul a {padding:0 10px; margin:5px 0; line-height:25px; border:1px solid #000; border-color:rgba(255,255,255,0.4) rgba(80,80,80,0.8) rgba(80,80,80,0.8) rgba(255,255,255,0.3); text-shadow:0 -1px 2px rgba(0, 0, 0, 0.6);}

.cssplayMenu ul li:hover &gt; ul {display:block; top:30px; z-index:-1;}
.cssplayMenu ul ul li:hover &gt; ul {left:100%; top:auto; margin-top:-47px; margin-left:-10px; z-index:10; display:block;}
.cssplayMenu ul ul li:hover &gt; ul {*margin-top:-42px;}

.cssplayMenu &gt; ul &gt; li.left:hover &gt; ul {left:auto; right:0; top:30px; z-index:-1; text-align:right;}

.cssplayMenu &gt; ul &gt; li.left ul li:hover &gt; ul {left:auto; right:100%; top:auto; margin-top:-47px; margin-right:-10px; z-index:10; text-align:right;}
.cssplayMenu &gt; ul &gt; li.left ul li:hover &gt; ul {*margin-top:-42px;}

.cssplayMenu ul ul li:hover &gt; a {color:#ff0;}

.cssplayMenu &gt; ul &gt; li:hover &gt; a {background-color:#aebcbf; color:#ff0;}

.cssplayMenu img {position:fixed; left:0; top:0; width:100%; height:100%; display:none; z-index:-1;}
.cssplayMenu ul:hover + img {display:block;}
</style>

<div class='cssplayMenu'>
	<ul>
		<li><a href='index.html'>Home</a></li>
		<li><a href='index.html'>Contact Us &#8250;</a>
			<ul>
				<li><a href='index.html'>Email</a></li>
				<li><a href='index.html'>Telephone</a></li>
				<li><a href='index.html'>Online Form</a></li>
				<li><a href='index.html'>Snail Mail Address</a></li>
			</ul>
		</li>
		<li><a href='index.html'>Resort &#8250;</a>
			<ul>
				<li><a href='index.html'>Ski Hire Facilities</a></li>
				<li><a href='index.html'>Main Ski Slopes &#8250;</a>
					<ul>
						<li><a href='index.html'>Beginners Slopes</a></li>
						<li><a href='index.html'>Intermediate Slopes</a></li>
						<li><a href='index.html'>Advanced Skill Levels &#8250;</a>
							<ul>
								<li><a href='index.html'>Local</a></li>
								<li><a href='index.html'>Nearby</a></li>
								<li><a href='index.html'>With instructor</a></li>
								<li><a href='index.html'>Snow boarding</a></li>
							</ul>
						</li>
						<li><a href='index.html'>Expert</a></li>
					</ul>
				</li>
				<li><a href='index.html'>Night Life</a></li>
				<li><a href='index.html'>Restaurants &#8250;</a>
					<ul>
						<li><a href='index.html'>Snow Hotel</a></li>
						<li><a href='index.html'>The Snowman</a></li>
						<li><a href='index.html'>Ice Cavern</a></li>
						<li><a href='index.html'>Ski Inn</a><b/></li>
					</ul>
				</li>
				<li><a href='index.html'>Car Hire &#8250;</a>
					<ul>
						<li><a href='index.html'>From Airport</a></li>
						<li><a href='index.html'>In Resort</a></li>
						<li><a href='index.html'>Multiple Resorts</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href='index.html'>Surrounding Area &#8250;</a>
			<ul>
				<li><a href='index.html'>Where to go</a></li>
				<li><a href='index.html'>What to do</a></li>
				<li><a href='index.html'>Places of interest</a></li>
				<li><a href='index.html'>National parks &amp; Museums</a></li>
			</ul>
		</li>
		<li class='left'><a href='index.html'>Information &#8250;</a>
			<ul>
				<li><a href='index.html'>Money Exchange</a></li>
				<li><a href='index.html'>&#8249; Resort Essential Information</a>
					<ul>
						<li><a href='index.html'>Lift Passes</a></li>
						<li><a href='index.html'>Insurance</a></li>
						<li><a href='index.html'>&#8249; Gear Rental</a>
							<ul>
								<li><a href='index.html'>Boots</a></li>
								<li><a href='index.html'>Skis</a></li>
								<li><a href='index.html'>Ski Wear</a></li>
								<li><a href='index.html'>Goggles</a></li>
							</ul>
						</li>
						<li><a href='index.html'>Ski Schools</a></li>
						<li><a href='index.html'>Snow Report</a></li>
					</ul>
				</li>
				<li><a href='index.html'>&#8249; Language</a>
					<ul>
						<li><a href='index.html'>Austrian</a></li>
						<li><a href='index.html'>German</a></li>
						<li><a href='index.html'>French</a></li>
						<li><a href='index.html'>English</a></li>
					</ul>
				</li>
				<li><a href='index.html'>Short Breaks</a></li>
			</ul>
		</li>
		<li><a href='index.html'>Privacy</a></li>
	</ul>

</div>
Zgłoś jeśli naruszono regulamin