zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Dropdownmenü

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.09.2015, 21:55
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
  #2 (permalink)  
Alt 06.09.2015, 21:47
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von DonChillo Beitrag anzeigen
Ich weiß nicht wie ich das fixieren kann.
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>
Edit fiddle - JSFiddle

______________
MfG Roland
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:26 Uhr.