Tolerance k přejetí mezi nabídkou a podnabídkou

Výsledek

<title>Tolerance k přejetí mezi nabídkou a podnabídkou</title>
<h1>Tolerance k přejetí mezi nabídkou a podnabídkou</h1>

<menu class=navigace>
	<li><a href='#'>Vyskakovací</a>
		<ul>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
		</ul>
	<li><a href='#'>Menu</a>
		<ul>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
		</ul>
	<li><a href='#'>Pomocí</a>
		<ul>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
		</ul>
	<li><a href='#'>CSS</a>
		<ul>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
			<li><a href='#'>Odkaz</a>
		</ul>
</menu>

HTML

Autoformát
Standardní režim
Mobilní zobrazení

.navigace a {border: 0}
.navigace a:hover {background: #81C1F5; color: #0D6AB7}

.navigace {width: 280px}
.navigace, ul {list-style: none; padding: 0; margin: 0}

.navigace li {display: block;}
.navigace li a {display: block; padding: .5em 10px; color: navy}
.navigace > li {position: relative; margin-bottom: .2em;  border: 1px solid transparent; height: 3em; background: #81C1F5}
.navigace > li:hover {border: 1px solid #0D6AB7; z-index: 1}
.navigace > li > a {position: absolute; top: 0; left: 0; width: 260px; line-height: 2em; background: #81C1F5}
.navigace > li:hover > a {z-index: 11}
.navigace li ul {display: none; position: absolute; left: 260px; top: -1px; width: 620px; padding-left: 20px; background: #81C1F5; border: 1px solid #0D6AB7; border-bottom-width: 3px; z-index: 10}
.navigace li:hover ul {display: block;}

.navigace ul li {display: block; float: left;}
.navigace ul a {float: left; width: 184px; text-align: center;}
.navigace ul a:hover {text-decoration: none; background: #0D6AB7; color: #fff}

.navigace > li > a:before,
.navigace > li > a:after {
    content: "";
    position: absolute;
    right: 0;
    top: 100%;
    width: 4em;
    height: 100%;
}
.navigace > li > a:after {
    right: 4em;
    height: 50%;
}

CSS

Autoformát
CSS reset
Až na konci

JS

Autoformát
jQuery
Umístění JS