Hallo ihr da draußen 
Könnte bitte hilfe brauchen bei einer Navigation.
Es sollte so aussehen:
Und sieht noch zurzeit so aus:
Hier ist der HTML-Code:
HTML
<html>
<head>
<title>Navigation</title>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div class="container">
<div id="all">
<div id="halter">
<div id="vfx">
<ul class="using">
<li class="pad">
<li class="pad">
<div class="img"><img src="dcd70b33f9178a37d297714e2c5ae81f.jpg" height="150" width="200"
alt="Image Freizeit und Aktivität"></div>
<a
href="#"><span>Freizeit u. Aktivität ▾</span></a>
<ul class="unterpunkte">
<div class="sub-wrapper-all">
<div class="sub-con">
<div class="sub-hol">
<div class="sub-l">
<h3>Freizeit u. Aktivität</h3>
<ul>
<li><a href="#">Menüpunkt 1</a></li>
<li><a href="#">Menüpunkt 2</a></li>
<li><a href="#">Menüpunkt 3</a></li>
<li><a href="#">Menüpunkt 4</a></li>
<li><a href="#">Menüpunkt 5</a></li>
<li><a href="#">Menüpunkt 6</a></li>
</ul>
</div>
<div class="sub-m">
<h3>vfx sofware</h3>
<div class="sub-in-l">
<ul>
<li><a href="#">3DEqualizer</a></li>
<li><a href="#">After Effects</a></li>
<li><a href="#">boujou</a></li>
<li><a href="#">Composite</a></li>
<li><a href="#">Final Cut Pro</a></li>
<li><a href="#">Ftarck</a></li>
<li><a href="#">Fusion</a></li>
<li><a href="#">MatchMover</a></li>
</ul>
</div>
<div class="sub-in-r">
<ul>
<li><a href="#">mocha</a></li>
<li><a href="#">SNuke</a></li>
<li><a href="#">PFClean</a></li>
<li><a href="#">PFTrack</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Premiere Pro</a></li>
<li><a href="#">Red Giant Suites</a></li>
<li><a href="#">Smoke</a></li>
</ul>
</div>
</div>
<div class="sub-r">
<h3>More</h3>
<ul>
<li><a href="#">New Training</a></li>
<li><a href="#">Learning Paths</a></li>
<li><a href="#">CG101</a></li>
<li><a href="#">VFX News</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">All in VFX</a></li>
</ul>
</div>
</div>
</div>
</ul>
</div>
<div id="all">
<ul class="using">
<li class="pad">
<div class="img"><img src="index01a.jpg" height="150" width="200" alt="Image Mode und Wohnen">
</div>
<a href="#"><span>Mode und Wohnen ▾</span></a>
<ul class="using">
<div class="sub-wrapper-all">
<div class="sub-con">
<div class="sub-hol">
<div class="sub-l">
<h3>VFX subjects</h3>
<ul>
<li><a href="#">Compositing</a></li>
<li><a href="#">GettingStarted</a></li>
<li><a href="#">Matchmoving</a></li>
<li><a href="#">Motion Graphics</a></li>
<li><a href="#">Scripting</a></li>
<li><a href="#">Video editing</a></li>
</ul>
</div>
<div class="sub-m">
<h3>vfx sofware</h3>
<div class="sub-in-l">
<ul>
<li><a href="#">3DEqualizer</a></li>
<li><a href="#">After Effects</a></li>
<li><a href="#">boujou</a></li>
<li><a href="#">Composite</a></li>
<li><a href="#">Final Cut Pro</a></li>
<li><a href="#">Ftarck</a></li>
<li><a href="#">Fusion</a></li>
<li><a href="#">MatchMover</a></li>
</ul>
</div>
<div class="sub-in-r">
<ul>
<li><a href="#">mocha</a></li>
<li><a href="#">SNuke</a></li>
<li><a href="#">PFClean</a></li>
<li><a href="#">PFTrack</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Premiere Pro</a></li>
<li><a href="#">Red Giant Suites</a></li>
<li><a href="#">Smoke</a></li>
</ul>
</div>
</div>
<div class="sub-r">
<h3>More</h3>
<ul>
<li><a href="#">New Training</a></li>
<li><a href="#">Learning Paths</a></li>
<li><a href="#">CG101</a></li>
<li><a href="#">VFX News</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">All in VFX</a></li>
</ul>
</div>
</div>
</div>
</div>
</ul>
</ul>
</div>
<div id="all">
<ul class="using">
<li class="pad">
<div class="img"><img src="spielen-macht-schlau-kinder-lernen-mit-allen-sinnen.jpg" height="150"
width="200" alt="Image Image Spielen und Lernen"></div>
<a href="#"><span>Spielen und Lernen ▾</span></a>
<ul>
<div class="sub-wrapper-all">
<div class="sub-con">
<div class="sub-hol">
<div class="sub-l">
<h3>design Subjects</h3>
<ul>
<li><a href="#">2D Animation</a></li>
<li><a href="#">digital Painting</a></li>
<li><a href="#">GettingStarted</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">IIlustration</a></li>
<li><a href="#">Image Editing</a></li>
</ul>
</div>
<div class="sub-m">
<h3>Design Software</h3>
<div class="sub-in-l">
<ul>
<li><a href="#">Artrage</a></li>
<li><a href="#">Corel Painter</a></li>
<li><a href="#">IIlustration</a></li>
<li><a href="#">InDesign</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">SketchBook</a></li>
</ul>
</div>
<div class="sub-in-r">
<ul>
<li><a href="#">Toon Boom Animate Pro</a></li>
<li><a href="#">Toon Boom Harmony</a></li>
<li><a href="#">Toon Boom Storyboard Pro</a></li>
</ul>
</div>
</div>
<div class="sub-r">
<h3>More</h3>
<ul>
<li><a href="#">New Training</a></li>
<li><a href="#">Learning Paths</a></li>
<li><a href="#">CG101</a></li>
<li><a href="#">Design News</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">All in Design</a></li>
</ul>
</div>
</div>
</div>
</div>
</ul>
</ul>
</div>
<div id="all">
<ul class="using">
<li class="pad">
<div class="img">
<img src="iStock_000013112749Large_Mädchen_Blumenwiese-620x310.jpg" height="150" width="200"
alt="Image Beauty und Gesundheit">
</div>
<a href="#"><span>Beauty und Gesundheit ▾</span></a>
<ul>
<div class="sub-wrapper-all">
<div class="sub-con">
<div class="sub-hol">
<div class="sub-l">
<h3>Game Dev Subjects</h3>
<ul>
<li><a href="#">Game Art</a></li>
<li><a href="#">Game Design</a></li>
<li><a href="#">Game Programming</a></li>
<li><a href="#">GettingStarted</a></li>
</ul>
</div>
<div class="sub-m">
<h3>Game Dev Software</h3>
<div class="sub-in-l">
<ul>
<li><a href="#">3ds Max</a></li>
<li><a href="#">Blender</a></li>
<li><a href="#">CryENGINE</a></li>
<li><a href="#">marmoset Toolbag</a></li>
<li><a href="#">Massive</a></li>
<li><a href="#">Maya</a></li>
<li><a href="#">Modo</a></li>
<li><a href="#">Mudbox</a></li>
<li><a href="#">Photoshop</a></li>
</ul>
</div>
<div class="sub-in-r">
<ul>
<li><a href="#">Softimage</a></li>
<li><a href="#">Substance Designer</a></li>
<li><a href="#">Substance painter</a></li>
<li><a href="#">topoGun</a></li>
<li><a href="#">UDK</a></li>
<li><a href="#">Unity</a></li>
<li><a href="#">Unreal Engine</a></li>
<li><a href="#">XNA</a></li>
<li><a href="#">ZBrush</a></li>
</ul>
</div>
</div>
<div class="sub-r">
<h3>More</h3>
<ul>
<li><a href="#">New Training</a></li>
<li><a href="#">Learning Paths</a></li>
<li><a href="#">CG101</a></li>
<li><a href="#">Game Dev News</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">All in Game Dev</a></li>
</ul>
</div>
</div>
</div>
</div>
</ul>
</ul>
</div>
<div id="dev">
</div>
</div>
</div>
</div>
</body>
</html>
Hier der CSS Code:
Code
body{
margin: [COLOR=#0000ff]0[/COLOR];
padding: [COLOR=#0000ff]0[/COLOR];
font-family: arial;
font-size: [COLOR=#0000ff]12[/COLOR]px;
}
ul li{
list-style-type: none;
}
.wrapper{
width: [COLOR=#0000ff]980[/COLOR]px;
margin: [COLOR=#0000ff]0[/COLOR]px auto;
}
.vfx{
}
h3{
color: #[COLOR=#0000ff]000000[/COLOR];
font-weight: normal;
font-size: [COLOR=#0000ff]10[/COLOR]px;
margin: [COLOR=#0000ff]0[/COLOR];
padding: [COLOR=#0000ff]0 0 12 0[/COLOR];
}
ul{
margin: [COLOR=#0000ff]0[/COLOR];
padding: [COLOR=#0000ff]0[/COLOR];
}
li.pad{
float: left;
}
.holder li{
color: #fff;
text-decoration: none;
transition: [COLOR=#0000ff]0[/COLOR].[COLOR=#0000ff]1[/COLOR]s;
}
a{
color: #[COLOR=#0000ff]838080[/COLOR];
text-decoration: none;
display: block;
transition: [COLOR=#0000ff]0[/COLOR].[COLOR=#0000ff]1[/COLOR]s;
}
.pad a{
padding: [COLOR=#0000ff]18 17 22 17[/COLOR];
}
#halter ul{
width: [COLOR=#0000ff]100[/COLOR]%;
}
#halter ul li span{
padding: [COLOR=#0000ff]7 0[/COLOR];
}
.pad > a:hover, .using > li:hover > a {
background: #ffffff;
text-decoration:none;
}
#t-d ul li a:hover span, .using > li:hover > a > span{
border-bottom: [COLOR=#0000ff]2[/COLOR]px solid #ff4300;
transition: [COLOR=#0000ff]0[/COLOR].[COLOR=#0000ff]1[/COLOR]s;
text-decoration:none;
}
#all ul li a:hover span, #all .using > li:hover > a > span{
border-bottom: [COLOR=#0000ff]2[/COLOR]px solid #ff4300;
transition: [COLOR=#0000ff]0[/COLOR].[COLOR=#0000ff]1[/COLOR]s;
text-decoration:none;
}
.sub-wrapper-all{
border-bottom: [COLOR=#0000ff]1[/COLOR].[COLOR=#0000ff]5[/COLOR]px solid lightgray;
}
.sub-wrapper-all a:hover{
color: #ff4300;
transition: [COLOR=#0000ff]0[/COLOR].[COLOR=#0000ff]3[/COLOR]s;
}
#web ul li a:hover span, #web .using > li:hover > a > span{
border-bottom: [COLOR=#0000ff]2[/COLOR]px solid #C0BBBB;
transition: [COLOR=#0000ff]0[/COLOR].[COLOR=#0000ff]1[/COLOR]s;
text-decoration:none;
}
#cad ul li a:hover span, #cad .using > li:hover > a > span{
border-bottom: [COLOR=#0000ff]2[/COLOR]px solid #[COLOR=#0000ff]1[/COLOR]CA6E0;
transition: [COLOR=#0000ff]0[/COLOR].[COLOR=#0000ff]1[/COLOR]s;
text-decoration:none;
font-color: #[COLOR=#0000ff]7[/COLOR]D7B7B;
}
#dev ul li a:hover span{
border-bottom: [COLOR=#0000ff]2[/COLOR]px solid #F26621;
transition: [COLOR=#0000ff]0[/COLOR].[COLOR=#0000ff]1[/COLOR]s;
text-decoration:none;
}
#internettagebuch ul li a:hover span{
border-bottom: [COLOR=#0000ff]2[/COLOR]px solid #[COLOR=#0000ff]777777[/COLOR];
transition: [COLOR=#0000ff]0[/COLOR].[COLOR=#0000ff]1[/COLOR]s;
text-decoration:none;
}
.sub-wrapper-all{
width: [COLOR=#0000ff]100[/COLOR]%;
height: auto;
background: #ffffff;
position: absolute;
left: [COLOR=#0000ff]0[/COLOR];
padding: [COLOR=#0000ff]40 0[/COLOR];
}
#halter ul li > ul{
position: absolute;
left: -[COLOR=#0000ff]9000[/COLOR];
}
#halter ul li:hover ul{
left: [COLOR=#0000ff]0[/COLOR];
text-decoration:none;
}
.sub-con{
width: [COLOR=#0000ff]900[/COLOR]px;
margin: [COLOR=#0000ff]0[/COLOR]px auto;
}
.sub-l{
float: left;
width: [COLOR=#0000ff]250[/COLOR]px;
}
.sub-hol ul li a{
padding: [COLOR=#0000ff]8 0 8 0[/COLOR];
font size: [COLOR=#0000ff]13[/COLOR]px;
transition: [COLOR=#0000ff]0[/COLOR].[COLOR=#0000ff]3[/COLOR]s;
}
.sub-m{
padding-left: [COLOR=#0000ff]20[/COLOR]px;
float: left;
border-left: [COLOR=#0000ff]1[/COLOR]px solid #[COLOR=#0000ff]7[/COLOR]D7B7B;
border-right: [COLOR=#0000ff]1[/COLOR]px solid #[COLOR=#0000ff]7[/COLOR]D7B7B;
padding-right: [COLOR=#0000ff]240[/COLOR]px;
}
.sub-in-l{
float: left;
width: [COLOR=#0000ff]135[/COLOR]px;
}
.sub-in-r{
float: right;
width: [COLOR=#0000ff]135[/COLOR]px;
}
.sub-r{
float: right;
padding-left: [COLOR=#0000ff]20[/COLOR]px;
}
.sub-wrapper-all::before {
background-color: #fefefe;
border-color: #fefefe lightgray lightgray #fefefe;
border-style: solid;
border-width: [COLOR=#0000ff]0 1[/COLOR]px [COLOR=#0000ff]1[/COLOR]px [COLOR=#0000ff]0[/COLOR];
content: [COLOR=#008000][B]""[/B][/COLOR];
height: [COLOR=#0000ff]31[/COLOR]px;
left: [COLOR=#0000ff]12[/COLOR]px;
position: relative;
top: -[COLOR=#0000ff]14[/COLOR]px;
transform: rotate([COLOR=#0000ff]45[/COLOR]deg);
width: [COLOR=#0000ff]10[/COLOR]px;
}
.sub-wrapper-all {
display: block;
padding-top: [COLOR=#0000ff]8[/COLOR]px;
position: relative;
border-top: [COLOR=#0000ff]1[/COLOR]px solid lightgray;
font-size: [COLOR=#0000ff]12[/COLOR]px;
margin-top: [COLOR=#0000ff]1[/COLOR]px;
font-size: [COLOR=#0000ff]10[/COLOR]px;
}
.img {
border:[COLOR=#0000ff]10[/COLOR]px solid white
}
.unterpunkte {
}Wenn noch andere fehler gefunden werden könnt Ihr sie gerne und bitte verbessern.
Dankeschön schon im vorrauß :3
Mit freundlichen Grüßen