|
|||
Dropdownmenü
Hallo,
ich hoffe man kann mir hier helfen. Bin gerade dabei ein Dropdownmenü unserer Internetseite ein wenig zu ändern. Bin leider nicht so fit damit. Ich habe im Internet ein Tutorial gefunden und dieses mit unserem alten Dropdownmenü ein wenig kombiniert. Leider hat sich ein kleiner Fehler eingeschlichen. Hier mein CSS Code: Zitat:
Zitat:
Bilder-Hosting.info :: Bilderupload Es geht um den kleinen Weißen Pfeil nach unten. Wenn ich auf die Felder gehe, die kein Submenü haben, bleibt der Weiße Pfeil ganz normal fix stehen. Bilder-Hosting.info :: Bilderupload Wenn ich aber jetzt auf eines der Submenüfelder gehe, dann bewegt sich der kleine Weiße Pfeil nach rechts. Ich weiß nicht wie ich das fixieren kann. Kann mir dabei jemand helfen? Sorry für die blöde Frage. |
Sponsored Links |
|
|||
Siehe beispiel:
HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Titel</title> <style type="text/css"> * { margin: 0; padding: 0; } html { font-size: 110%; } body{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; } nav { background: #000000; border-bottom: 2px solid #ff0000; border-radius: 5px 5px 0 0; display : block; /* height: 39px; */ } nav ul { /* background : #e00f16 */ } nav ul:after { content: " "; display : block; clear : both; } nav ul li { list-style: none; float: left; position: relative; } nav ul li a { color: #fff; outline: none; display: block; padding: 12px 13px; /* font: 13px/100% Verdana; */ text-decoration: none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } nav ul li:hover a:after { content: " "; display: block; position: absolute; left: 50%; bottom: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #e00f16; margin-left: -10px; } nav ul li.submenu a:after { display: inline-block; vertical-align: middle; content: " "; margin-left: 10px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff; border-bottom: 5px solid transparent; } nav ul li.submenu:hover a:after { display: inline-block; position: relative; left: 0%; } nav ul ul { display: none; position: absolute; top: 100%; background: #333; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6); } nav ul ul li { float: none; width: 200px; border-bottom: 1px solid #555; } nav ul li:hover ul { display: block; } nav ul li li:hover a { background: #4096ee; } nav ul li.submenu ul li a:after { border: 0; } </style> </head> <body> <nav> <ul> <li><a href="#">Startseite</a></li> <li><a href="#">News</a></li> <li class="submenu"><a href="#">Regeln</a> <ul> <li><a href="#">PS4</a></li> <li><a href="#">PC</a></li> </ul> </li> <li><a href="#">Transfermarkt</a></li> </ul> </nav> </body> </html> ______________ MfG Roland |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Dropdownmenü geht in einigen Browsern nicht richtig/garnicht. | Testtifikal | CSS | 0 | 03.05.2015 19:51 |
Hovereffekt verschwindet im Dropdownmenü | Korasu | CSS | 3 | 04.12.2011 18:34 |
Dropdownmenü richtig ausrichten. | Lost | CSS | 25 | 20.01.2011 14:11 |
IE 6 und Dropdownmenü - Problem | wirdnix | CSS | 7 | 15.11.2010 21:24 |
Dropdownmenü Problem | Massacre | CSS | 10 | 15.12.2009 15:49 |