Thema: Dropdownmenü
Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 05.09.2015, 21:55
DonChillo DonChillo ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.09.2015
Beiträge: 1
DonChillo befindet sich auf einem aufstrebenden Ast
Standard 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:
Code:
nav{ height:37px; display:block; padding:0; margin:0px auto;  border:0px solid; border-radius:0px;  } 
nav > ul {list-style:inside none; padding:0; margin:0; } 
nav > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 
nav> ul > li > a{ outline:none; display:block; position:relative; padding:12px 13px; font: 13px/100% Verdana; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } 

nav {
  box-sizing: border-box;
  float: left;
  width: 100%;
  background: #000000;
  border-bottom: 2px solid #ff0000;
  border-radius: 5px 5px 0 0;
  height: 39px;
 background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; 
  background: -moz-linear-gradient(top, #242424 50%, #000000 50%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #242424), color-stop(50%, #000000));
  background: -webkit-linear-gradient(top, #242424 50%, #000000 50%);
  background: -o-linear-gradient(top, #242424 50%, #000000 50%);
  background: -ms-linear-gradient(top, #242424 50%, #000000 50%);
  background: linear-gradient(to bottom, #242424 50%, #000000 50%);
}

nav ul {
  margin: 0;
  padding: 0;
}

nav a {  
  display: block;
  color: #fff;
  text-decoration: none;   
}

nav ul li {
  position: relative;
  float: left;
  list-style: none;
  height: 39px;
}

nav ul li li:hover {
  background: #4096ee;
}

nav > ul > li> a:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  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 ul {
  position: absolute;
  top: -9999px;
  left: -9999px;
  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 ul li a {
  padding: 10px 20px;
      height: 39px;  
}
nav ul li:hover > ul {
  top: 100%;
  left: 0;
}
nav ul ul li:hover > ul {
  top: 0;
  left: 200px;
}

nav ul li.submenu > a:after {
  position: relative;
  float: right;
  content: '';
  margin-left: 10px;
  margin-top: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  border-bottom: 5px solid transparent;
}
nav ul ul li.submenu a:after {
  margin-left: auto;
  margin-right: -10px;
  border-left: 5px solid #fff;
  border-right: 5px solid transparent;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
nav ul ul li:last-child {
  border-bottom: none;
}
Und das ist mein HTML Code ...

Zitat:
HTML-Code:
<nav>
  <ul>
    <li><a href="?path=start"><span>Startseite</span></a></li> 
    <li><a href="?path=news"><span>News</span></a></li> 
    <li><a href="?path=forumsdisplay"><span>Forum</span></a></li> 
    <li><a href="?path=content&contentid=2"><span>Freie Teams</span></a></li> 
    <li><a href="?path=content&contentid=11"><span>Gef&auml;hrdete Teams</span></a></li> 
    <li><a href="?path=content&contentid=6"><span>FAQ</span></a></li> 
    <li class="submenu"><a href="?path=content&contentid=3"><span>Regeln</span></a>
      <ul>
        <li><a href="?path=content&contentid=3"><span>PS4</span></a></li>
		<li><a href="?path=content&contentid=3"><span>PC</span></a></li>
	  </ul>
	</li>	
		<li class="submenu"><a href="?path=content&contentid=5"><span>Transfermarkt</span></a>
      <ul>
        <li><a href="?path=content&contentid=5"><span>PS4</span></a></li>
		<li><a href="?path=content&contentid=5"><span>PC</span></a></li>
	  </ul>
	</li>
	<li class"last"><img src="/content/images/since.png"></li> 
  </ul>
</nav>
Mein eigentliches Problem habe ich auf diesem Bild kenntlich gemacht:

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.
Mit Zitat antworten
Sponsored Links