Jegördülő menü jQuery nélkül. Minimális szélessége 700px, azon felül igazodik a böngésző szélességéhez.

A működő kódot ide kattintva tudod megnézni.

HTML forráskód


<html>
<head>
<meta charset="utf-8"/>
<title>CSS3</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<section id="wrapper">
<nav>
<ul>
<li><a href="">elso</a></li>
<li>
<a class="dropdown" href="">masodik</a>
<ul>
<li><a href="">almenu 1</a></li>
<li><a href="">almenu 2</a></li>
<li><a href="">almenu 3</a></li>
</ul>
</li>
<li><a href="">harmadik</a></li>
<li><a href="">negyedik</a></li>
<li><a href="">otodik</a></li>
</ul>
</nav>
<section id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultricies tellus ut turpis consequat, porta eleifend risus luctus. Quisque vel fringilla nisl. Proin ut eros feugiat, hendrerit diam a, facilisis lectus. Vestibulum vel velit vitae erat blandit sagittis eu vestibulum urna. Ut vestibulum suscipit ipsum in venenatis. Donec adipiscing sagittis mauris, eget pharetra massa interdum pulvinar. Duis feugiat, justo vitae aliquet blandit, risus purus tempus lorem, a ultrices sapien dui ut felis. Cras non mi tellus. Pellentesque rutrum purus at interdum aliquam.</p>
<p>Quisque rutrum, nunc eget ultrices elementum, dui nisl posuere dui, at gravida lectus est vel arcu. Nunc consectetur pharetra nulla id vehicula. Proin in aliquam neque. Aliquam consequat, dui a condimentum mollis, libero mauris rhoncus eros, vitae pulvinar tortor tortor eget dui. In vel adipiscing quam, ut laoreet metus. Donec ut aliquam nisi, eget iaculis velit. Donec rhoncus tincidunt nisi ac consequat. Nulla interdum nec orci eu faucibus. Curabitur sed dui ac metus iaculis tempus varius sit amet nisi. Proin tincidunt diam eget arcu semper, in consectetur turpis cursus. Sed sit amet ipsum quam. Fusce eget nulla consectetur, laoreet urna eget, feugiat ipsum. Maecenas elementum, urna eget porttitor interdum, augue mauris mattis mauris, at ullamcorper lorem massa sit amet sapien.</p>
<p>Morbi eget lectus vitae mauris posuere commodo sit amet vel purus. Sed semper libero quis neque placerat, ac fermentum justo suscipit. Nulla erat est, ultrices a odio eu, tempus malesuada metus. Aenean leo lacus, fermentum vel sodales eu, sagittis ut sem. Nulla pulvinar vulputate hendrerit. Integer facilisis, metus eu sagittis tincidunt, justo nisl iaculis nibh, mattis ornare urna eros sit amet massa. Aenean facilisis malesuada lorem, id vestibulum metus feugiat a. Pellentesque molestie scelerisque libero nec dictum. Sed commodo rutrum facilisis. Proin eleifend, sapien ut molestie aliquam, est elit congue tortor, vitae varius lacus neque blandit erat. Aenean in tincidunt felis, non feugiat nisl. Integer porta enim tortor, sed congue quam facilisis eu. Vestibulum vitae tortor magna. Fusce sit amet purus convallis, ornare metus ut, ultricies diam. Sed eleifend, dui ut bibendum mattis, augue mauris sagittis dolor, eget aliquam est lacus vel nisi.</p>
</section>
</section>
</body>
</html>

CSS forráskód


* {
padding: 0;
margin: 0;
border: 0
}
body {
font: 13px arial;
color: #bbbbbb;
background: #373737;
margin: 40px;
background: linear-gradient(to bottom, #373737 0%,#606060 100%) fixed
}
a { text-decoration: none }
section#wrapper {
min-width:700px;
}
nav {
margin: 0 0 40px 0;
font-size: 20px;
font-weight: bold
}
nav ul {
list-style: none;
width: 100%
}
nav li {
float: left;
position: relative;
min-width: 20%;
}
nav li:first-child a {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
nav li:last-child a {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
nav ul li ul li:first-child a { border-radius: 0 }
nav ul li ul li:last-child a {
border-radius: 0;
border: 0
}
nav a {
background: #ffa84c;
background: linear-gradient(to bottom,  #ffa84c 0%,#ff7b0d 100%);
text-shadow: 1px 1px 2px rgba(255,255,255,0.5);
color: #444;
display: block;
padding: 10px 20px;
text-align: center;
transition: all .25s ease;
border-right: 2px solid #000
}
nav li:hover a {
background: #8fc400;
background: linear-gradient(to bottom,  #8fc400 0%,#80aa00 100%);
color: #fff;
text-shadow: 1px 1px 2px rgba(1,1,1,0.5);
}
nav li ul {
float: left;
left: 0;
opacity: 0;
position: absolute;
top: 30px;
visibility: hidden;
transition: all .25s;
}
nav li:hover ul {
opacity: 1;
top: 45px;
visibility: visible
}
nav li ul li {
float: none;
width: 100%;
background: #202020;
font-weight: normal;
font-size: 15px;
}
nav li ul li a {
border: 0;
background: #000 !important
}
nav li ul li a:hover {
background: #4f4f4f !important
}
section#content {
line-height: 18px;
}
section#content p {
margin: 0 0 20px 0;
text-align: justify
}
nav ul:first-child:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}