zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Zu viel Abstand in Dropdown Menü

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.06.2009, 13:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.06.2009
Beiträge: 2
Fireflya befindet sich auf einem aufstrebenden Ast
Standard Zu viel Abstand in Dropdown Menü

Hi

ich habe mit meinen beschiedenen CSS-Kenntnissen versucht ein Drop-Down Menü zu basteln. Dafür habe ich einfach mal den CSS-Code meines Wordpress-Themes mit dem eines Dropdownmenüs verwurschtelt und dabei ist etwas schief gegangen.

Die Fraben, usw. anzupassen war kein Problem aber die Dropdowns stehen so weit unter dem Menü, dass man sie gar nicht anklicken kann.

Das ganze habe ich unter http://www.lerk.de/css/index.html online gestellt.

HTML-Code
Code:
	<div id="mainMenueArea">
  
		<ul id="mainMenueList">
 
		<li id="mainMenue_1"><a href="http://www.lerk.de/">Home</a></li>

		<li id="mainMenue_1"><a href="http://www.lerk.de/forum/">Community</a>
			<ul class="subMenueItems">
				<li><a href="http://www.lerk.de/forum/">Forum</a></li>
				<li><a href="http://www.lerk.de/server/teamspeak/">TeamSpeak</a></li>
			</ul>
		</li>
		
		<li id="mainMenue_1"><a href="http://www.lerk.de/ns2/">Natural Selection 2</a>

			<ul class="subMenueItems">
				<li><a href="http://www.lerk.de/ns2/">Natural Selection 2</a></li>
				<li><a href="http://www.lerk.de/ns2/faq/">FAQ</a></li>
				<li><a href="http://www.lerk.de/ns2/faq/pre-order/">Pre-Order FAQ</a></li>
			</ul>
		</li>
		
		<li id="mainMenue_1"><a href="http://www.lerk.de/tools/">Tools</a>

			<ul class="subMenueItems">
				<li><a href="http://www.lerk.de/natural_selection_search_engine.htm">Natural Selection Suchmaschine</a></li>
				<li><a href="http://www.lerk.de/2008/08/ventrilo-mix-v122-mit-mumble-support/">Ventrilo Mix</a></li>
				<li><a href="http://playerdb.lerk.de/">PlayerDB</a></li>
			</ul>
		</li>
		
		<li id="mainMenue_1"><a href="http://www.lerk.de/media/">Media</a>

			<ul class="subMenueItems">
				<li><a href="http://www.lerk.de/media/poster/">Poster</a></li>
				<li><a href="http://www.lerk.de/media/signatur-bilder/">Signaturbilder</a></li>
			</ul>
		</li>
		<li id="mainMenue_1"><a href="http://www.lerk.de/ns1/">Natural Selection 1</a>
			<ul class="subMenueItems">

				<li><a href="http://www.lerk.de/ns1/impulse-liste/">Impulse Liste</a></li>
				<li><a href="http://www.lerk.de/damage-calculator.htm">Damage Calculator</a></li>
				<li><a href="http://www.lerk.de/comm/">Commander Guide</a></li>
			</ul>
		</li>
		</ul>
	</div>
CSS-Code
Code:
#subMenue a {
	padding: 5px;
	font-weight: bold;
	color: #060;
	display: block;
	text-decoration: none;
	border-bottom: 1px solid #C4DFB5;
	margin-left: 10px;
	margin-right: 10px;
}
#subMenue a:hover {
	color: #060;
	background-color: #F5FFEF;
	padding-left: 14px;
}

#subMenue p {
	margin:0px;
	padding:0px;
}


#topMenue {
	float: right;
	margin-top: 51px;
	color: #A2A2A2;
	margin-right: -5px;
}




	
	
	
	
	/* common styling */
	#mainMenueArea ul li {position:relative;}
	#mainMenueArea ul li ul {display: none; background-color:#D3D3D3; padding: 0; width: 149px;}
	
	/* specific to non IE browsers */
	#mainMenueArea ul li:hover ul {display:block; position:absolute; top:45px; left:0; background-color:#D3D3D3; border: none;}
	
	
	/*alle*/
		
		ul#mainMenueList li#mainMenue_1 ul
		{
			background-color: #4E871C;	
		}


	
	ul#mainMenueList li ul {
		margin: 0px;
		padding: 0px;
	}
	
	ul#mainMenueList li ul li {		
		height: 22px;
		line-height: 22px;
		float:none;			
		padding: 0px;	
		border-top: 1px solid #FFFFFF;
	}
	
	ul#mainMenueList li#mainMenue_1 ul a
		{
		font-size:11px;
		text-align:left;
		margin:0px;
		padding:0px;
		height: 22px;
		line-height: 22px;
		color:#333333;
		font-weight:normal;
		padding-left:4px;		
	}
	
	ul#mainMenueList li#mainMenue_1 ul a:hover,
		{
		color:#000000;		
		background-image: url();
		padding-left:8px;
	}



#mainMenueList {
	height : 32.5px;
	background-color : #4E871C;
	padding-top : 7.5px;
	padding-left : 10px;
}
#mainMenueList li {
	list-style-type : none;
	background-position : 0 100%;
	height : 25px;
	line-height : 25px;
	float : left;
	margin-right : 7px;
	font-weight : bold;
	background-repeat : no-repeat;
	background-color : #92C135;
}
#mainMenueList .current_page_item {
	background-position : 0 0;
	background-repeat : no-repeat;
}
#mainMenueList li a {
	color : white;
	text-decoration : none;
	background-position : 100% 0;
	background-repeat : no-repeat;
	display : block;
	padding-left : 10px;
	padding-right : 10px;
}
#mainMenueList .current_page_item a {
	background-position : 100% 0;
	background-repeat : no-repeat;
	color : black;
}
#mainMenueList a:hover, #mainMenueList a:active, #mainMenueList a:focus  {
	color : black;
}
#mainMenueList  .current_page_item a:focus, #mainMenueList   .current_page_item a:active {
	text-decoration : underline;
}
Angehängte Grafiken
Dateityp: jpg css-fehler.JPG (16,6 KB, 3x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.06.2009, 13:56
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Du könntest top in #mainMenueArea ul li:hover ul anpassen. Oder etwas über CSS lesen.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.06.2009, 14:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.06.2009
Beiträge: 2
Fireflya befindet sich auf einem aufstrebenden Ast
Standard

Danke dir!

Und vernünftig CSS zu lernen steht auf meiner Todo-Liste...
Mit Zitat antworten
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
CSS Dropdown Menü: Hover-Effekt auch wenn Maus im Untermenü ist Sp33dy G0nz4l3s CSS 2 12.06.2010 18:38
Darstellungsproblem flohpapa CSS 3 16.12.2009 09:55
DropDown Menü verschwindet andre-ne CSS 2 18.11.2009 11:44
dropdown menü einbauen PatrickM CSS 6 07.01.2008 17:13
Mysteriöses in CSS Dropdown Menü ph!L CSS 3 21.07.2006 13:31


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:43 Uhr.