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

# body {background: url(DSCN1110.jpg) no-repeat center center fixed;background-size:cover;}

	div#menu { margin:10em auto; max-width:960px; }
	div#body-center { margin:10em auto; margin-top:1em; max-width:960px; }
	.contentbox { display: block; background: CCCCCC; padding: 0em; font-size: 1em; margin: 1.3em 0; max-width:960px; }

#slideshow {
	margin: 50px auto;
	position: relative;
	width: 960px;
	height: 300px;
	padding: 0px;
	text-align: center;
	vertical-align: middle;
    		}

#slideshow > div { 
			position: absolute; 
			top: 0px; 
			left: 0px; 
			right: 0px; 
			bottom: 0px; 
			}

a {
	font-size: 15px;
	font-family: Verdana, Geneva, sans-serif;
}

nav {
    width: 690px;
}
nav ul {
    padding: 0px;
    margin: 0px;
}
nav ul:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}
    nav ul,nav ul li{
    background-color: #000000;
}
    nav ul li {
    list-style: none;
    float:left;
}
nav ul li a {
    text-decoration: none;
    display: block;
    color: #333;
    padding: 14px 34px 14px 34px;
}
nav ul li:hover > ul {
    visibility: visible;
}
nav ul li ul{
    display: inline;
    visibility: hidden;
    position: absolute;
    padding:0px;
}
nav ul li ul li{
    float: none;
}
nav ul li ul li a:hover{
    color: #333;
}

Zu beachten ist hier, dass die Listen auf zweiter Ebene nicht angezeigt werden dürfen. Dies wird über visibility: hidden erreicht. Bei Mouse hover wird die Liste daraufhin über nav ul li:hover > ul wieder sichtbar gemacht. Die restlichen Statements dienen dem Design des Dropdown Menus.

Dropdown Menu Struktur mit basic CSS Styling
Effekte mit CSS3

Nun ergänzen wir den Code um ein paar Effekte:
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
	
nav ul {
    padding: 0px;
    margin: 0px;

    box-shadow: 2px 2px 2px #dfdfdf;
    -moz-box-shadow: 2px 2px 2px #dfdfdf;
    -webkit-box-shadow: 2px 2px 2px #dfdfdf;
}
nav ul li {
list-style: none;
    float:left;
    border-right: 1.5px solid #FFFFFF;
}
nav ul li a {
    text-decoration: none;
    display: block;
    color: #FFF;
    padding: 14px 34px 14px 34px;
 
    -webkit-transition: background 0.3s ease-out 0s;
    -moz-transition: background 0.3s ease-out 0s;
    -o-transition: background 0.3s ease-out 0s;
    transition: background 0.3s ease-out 0s;
}
nav ul li.cat1:hover a, nav ul li.cat1:hover > ul li a  {
    background-color: #1B92CD;
}
nav ul li.cat2:hover a, nav ul li.cat2:hover > ul li a  {
    background-color: #B71173;
}
nav ul li.cat3:hover a, nav ul li.cat3:hover > ul li a {
    background-color: #EADA19;
}
nav ul li.cat4:hover a, nav ul li.cat4:hover > ul li a {
    background-color: #000000;
}
nav ul li.cat5:hover a, nav ul li.cat5:hover > ul li a {
    background-color: #332B40;
}
nav ul li:hover > a {
    color: #FAFAFA;
}
nav ul li ul li a {
    color: #FAFAFA;
}
nav ul li ul li a:hover{
    color: #333;
    background-color: #FAFAFA !important;
}