body { background-color: yellow; width: 100%; } table, th, td { width: 90%; margin: 0px auto; border: 2px solid; } .layout { width: 980px; margin: 0px auto; } .kopf { font-size: 24px; color: #996633; text-align: center; background: rgba(33, 32, 47, 0.9); -webkit-box-shadow:1px 10px 50px #09202f; -moz-box-shadow: 1px 10px 50px #09202f; box-shadow: 1px 10px 50px #09202f; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; border-top-right-radius: 50px; border-top-left-radius: 50px; } .inhalt { color: black; margin-top: 22px; background: rgba(200,200,60,0.70); -webkit-box-shadow: 1px 10px 50px #09202f; -moz-box-shadow: 1px 10px 50px #09202f; box-shadow: 1px 10px 50px #09202f; padding: 20px 20px 20px 20px; font-size: 1.2em; } .fuss { margin-top: 22px; font-size: 24px; line-height: 40px; color: #6699AA; text-align: center; background: rgba(33,32,47,0.90); -webkit-box-shadow: 1px 10px 50px #09202f; -moz-box-shadow: 1px 10px 50px #09202f; box-shadow: 1px 10px 50px #09202f; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; border-top-right-radius: 0px; border-top-left-radius: 0px; } .navigation { display: inline-block; width: 100%; margin-top: 0; } a { text-decoration: none; font-weight: bold; color: #6699AA; display:block; } nav { position: relative; font-size: 16px; width: 100%; margin: 1px auto; background: rgba(33,32,47,0.90); text-align: center; letter-spacing: 1px; -webkit-box-shadow: 1px 10px 50px #09202f; -moz-box-shadow: 1px 10px 50px #09202f; box-shadow: 1px 10px 50px #09202f; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; border-top-right-radius: 50px; border-top-left-radius: 50px; } ul.hauptkategorie { list-style: none; position: relative; } ul.hauptkategorie li { float:left; } ul.hauptkategorie:after, ul.hauptkategorie:before{ content: ""; display: table; } ul.hauptkategorie li span:after { width: 0; height: 0; border: 0.513em solid transparent; border-bottom: none; border-top-color: #336699; content: ''; vertical-align: middle; display: inline-block; position: relative; right: -0.313em; } ul.hauptkategorie li a { display: block; padding: 10px 20px 10px 5px; border-right: 1px solid #3D3D3D; } ul.hauptkategorie li:last-child a { border-right: none; } ul.hauptkategorie li a:hover { color: #000; } ul.unterkategorie { position: absolute; z-index: 200; box-shadow: 20px 20px rgba(50,100,150,0.90); width: 25%; display: none; border-bottom-right-radius: 50px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; border-top-left-radius: 5px; } ul.unterkategorie li { float: none; margin: 0; margin-left: -20px; } ul.unterkategorie li a { border-bottom: 1px dotted rgba(33,32,47,0.90); border-right: none; border-left: 5px solid rgba(33,32,47,0.90); color: #6699AA; padding: 15px 30px; } ul.unterkategorie li:last-child a { border-bottom: none; } ul.unterkategorie li a:hover { border-left: 5px solid red; } ul.hauptkategorie li:hover ul { display: block; background: rgba(50,100,150,0.90); } ul.hauptkategorie li:hover a { background: rgba(44,44,44,0.90); color: #FFFFFF; text-shadow: none; } ul.hauptkategorie li:hover > a{ background: rgba(150,100,50,0.9); border-bottom-right-radius: 15px; } ul.hauptkategorie li:hover span:after { width: 0; height: 0; border: 0.513em solid transparent; border-bottom: none; border-top-color: red; content: ''; vertical-align: middle; display: inline-block; position: relative; right: -0.313em; }