Beiträge von DonChillo

DonChillo · 6. September 2015

bin leider nicht so fit mit der ganzen Sache ... hat da noch einer einen Tipp?

DonChillo · 6. September 2015

Habe leider noch ein anderes Problem, vielleicht kann ich dafür auch noch eine kleine Hilfe bekommen.

Betrifft nochmal den kleinen Weißen Pfeil für die Submenüs.
Und zwar wird der im Internet Explorer irgendwie nicht richtig dargestellt. Bei Firefox & Chrome ist alles top.

Betrifft dann diesen Teil des Codes:

CSS

nav ul li.submenu > a:after {  position: relative;  float: right;  content: '';  display: inline-block;  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;}

Um das ganze in Firefox richtig zu positionieren habe ich noch display:inline-block; hinzugefügt ... Für den Internet Explorer hat das nicht gereicht. Gibt es noch etwas dass ich da einstellen kann?

Vielen Dank im Voraus.

DonChillo · 6. September 2015

funktioniert perfekt.

Vielen Dank !

DonChillo · 6. September 2015

Hallo, danke fürs erste.

Ja nur leider wird dann der Rote Pfeil von unten nicht richtig mittig angezeigt ... gibt es da noch eine andere Möglichkeit?

DonChillo · 6. September 2015

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

CSS

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; }

Alles anzeigen

Und das ist mein HTML Code:

Zitat

HTML

<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>

Alles anzeigen

Mein eigentliches Problem habe ich auf diesem Bild kenntlich gemacht:

#mce_temp_url#

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.

#mce_temp_url#

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.