Hallo habe Folgendes Problem, die Div Hauptmenueclass ist nicht inner halb meines header div's, trotzdem ich die Div relative gesetzt habe.
css:
Code:
<div id='header'> <h1>Titel</h1> <div class="Hauptmenueclass"><ul id="menu-hauptmenue" class="menu"><li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-9"><a href="">Startseite</a></li> <li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10"><a ">Beispiel-Seite</a></li> <li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="http://google.de">google</a></li> <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-14 current_page_item menu-item-16"><a href="">blabla</a></li> </ul></div> </div>
Code:
body {margin: 0px; padding: 0px; color: #333; background: #e5e5e5; } #wrapper {width: 850px; margin: auto; text-align: left; background: #fff;} #header {height: auto; padding: 20px; } #main {width: 520px; padding: 20px; float: left;} #sidebar {width: 270px; padding: 10px; padding-top: 20px; float: left;} #footer {clear: both; height: 100px; padding: 20px; } .Hauptmenueclass { margin-left:0px; ; margin-right:auto; border-left-width:0px; ; padding-left:0px; ; text-align:left; position: relative; } .menu { margin-left:0px; ; margin-right:auto; border-left-width:0px; ; padding-left:0px; ; text-align:left; } .Hauptmenueclass li { float: left; position: relative; } .Hauptmenueclass a { color: #eee; text-decoration: none; float: left; line-height: 40px; padding: 0 8px; margin: 0px; border-top-left-radius: 12px; border-top-right-radius: 12px; } .Hauptmenueclass a:first-child { margin-left: none; } .Hauptmenueclass a:hover, .Hauptmenueclass .current-menu-item a, .Hauptmenueclass .current-menu-parent a { background: #8b9b87 url(img/hover.png) repeat-x; color: #2B3A27; font-weight: normal; } .Hauptmenueclass li:hover { background: #8b9b87 url(img/hover.png) repeat-x; } .Hauptmenueclass .sub-menu { padding: 0 px 0; margin: 0; list-style: none; position: absolute; top: -999px; opacity: 0; background: #a1ad9e; } .sub-menu li { float: none; display: block; position: static; padding-bottom: 1px; } .Hauptmenueclass li:hover .sub-menu { background: #8b9b87; top: 40px; opacity: 1; transition: opacity .4s ease-in-out; } .Hauptmenueclass .sub-menu a { padding: 0px 10px; margin: 0; display: block; float: none; line-height: 1.5; background: none; color: #2b3a27; white-space: nowrap; } .Hauptmenueclass li ul a:hover { color: #eee; background: #425c3b; }
Kommentar