@charset "utf-8";
/* CSS Document */

/* JS disabled styles */
.no-js nav li:hover ul { display:block; }

/* base nav styles */
nav { display:block; margin:0 auto 20px; border:0px solid #fff; position:relative; background-color: #09F; font-size: 80%; }
nav ul { padding:0; margin:0;}
nav li { position:relative; float:left; list-style-type:none;}
nav ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
nav li a { display:block; padding:10px 20px; border-left:0px solid #fff; border-right:1px solid #fff;  text-decoration:none; text-transform: uppercase; font-weight: bold; }
nav li a:visited {text-decoration:none; color:#fff;}
nav li a:focus { outline:none; text-decoration:none; color: #fff; text-shadow: #fff 0 0px 10px; }
nav li:first-child a { border-left:none; }
nav li.last a { border-right:none; }
nav a span { display:block; float:right; margin-left:5px;}
nav ul ul { display:none; width:100%; position:absolute; left:0; background:#00F;}
nav ul ul li { float:none; color:#fff;}
nav ul ul a { padding:10px 10px; border-left:none; border-right:none; font-size: 90%; text-transform:none; text-decoration:none; color:#fff; text-align: right;}
nav ul ul a:hover { background-color:#424242;}
Save this file in the css directory as nav.css. The first rule is purely for when JavaScript is disabled, and allows the hidden submenu to be displayed on hover purely with CSS. The rest of the code defines a set of base styles that format the <nav> menu in the way that we want without adding anything too decorative. Note that we’re using the :after pseudo-selector to clear the floated list items; normally this would be added using a class name to that it could be applied to the containers of any floated elements on the page. At this point our page should look like this:

/* CSS3 */
.borderradius nav { -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; }
.cssgradients nav { background-image:-moz-linear-gradient(0% 22px 90deg, #3198dd, #33acfc); background-image:-webkit-gradient(linear, 0% 0%, 0% 70%, from(#3198dd), to(#33acfc)); }


.boxshadow.rgba nav { -moz-box-shadow: 0px 3px 3px rgba(0,0,0,.3); -webkit-box-shadow:0px 3px 3px rgba(0,0,0,.3); box-shadow:0px 3px 3px rgba(0,0,0,.3);}

.cssgradients nav li:hover { background-image:-moz-linear-gradient(0% 100px 90deg, #6a6b6b, #424242); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#6a6b6b), to(#424242)); }
.borderradius nav ul ul { -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; }
.boxshadow.rgba nav ul ul { background-color:rgba(0,0,0,0.8); -moz-box-shadow:2px 2px 2px rgba(0,0,0,.8); -webkit-box-shadow:2px 2px 2px rgba(0,0,0,.8); box-shadow:2px 2px 2px rgba(0,0,0,.8); }
.rgba nav ul ul li { border-left:1px solid rgba(0,0,0,0.1); border-right:1px solid rgba(0,0,0,0.1); }
.rgba nav ul ul a:hover { background-color:rgba(255,255,255,.9); color:#424242}
.borderradius.rgba nav ul ul li.last { border-left:1px solid rgba(0,0,0,0.1); border-bottom:1px solid rgba(0,0,0,0.1); -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; }
.csstransforms ul a span { -moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg); }

/* ----- dient zur Markierung des gerade aktiven Links durch die Klasse .aktiv --------- */
.cssgradients nav li.aktiv { background-image:-moz-linear-gradient(0% 22px 90deg, #424242, #6a6b6b ); background-image:-webkit-gradient(linear, 0% 0%, 0% 70%, from(#424242), to(#6a6b6b)); }


/* fallbacks */
.no-cssgradients nav, .no-js nav { padding-bottom:4px; border:none; background:url(../images/fallbacks/nav_bg.gif) repeat-x 0 0; }
.no-borderradius nav ul, .no-js nav ul { background:url(../neu/fallback/navRight.gif) no-repeat 100% 0; }
.no-borderradius nav ul ul, .no-js nav ul ul { background:none; }
.no-borderradius nav li, .no-js nav li { height:44px; }
.no-cssgradients nav li:hover, .no-js nav li:hover { background:url(../images/fallbacks/nav_bg_hov.gif) repeat-x 0 0; }
.no-borderradius nav li li, .no-js nav li li { height:auto; width:98%; left:-2px; }
.no-borderradius nav li:first-child, .no-js nav li:first-child { background:url(../neu/fallback/navLeft.gif) no-repeat 0 0; }
.no-borderradius nav li:first-child:hover, .no-js nav li:first-child:hover { background:url(../neu/fallback/navOverLeft.gif) no-repeat 0 0; }
.no-borderradius nav li li:first-child, .no-js nav li li:first-child { background:none; }
.no-rgba nav ul ul, .no-js nav ul ul { left:1px; padding-left:2px; background-color: #06F; }
.no-rgba nav ul ul a, .no-js nav ul ul a { left:3px; }
.no-rgba nav ul ul a:hover { background:url(../neu/fallback/subOverBG.png) repeat 0 0; }
.no-csstransforms ul a span { height:7px; width:12px; margin-top:8px; text-indent:-5000px; overflow:hidden; background:url(../neu/fallback/indicator.png) no-repeat 0 0; }
.no-borderradius ul ul li.last { margin-bottom:10px; }
.no-cssgradients.boxshadow nav { box-shadow:none; }