zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Drop Down Menu Positionsproblem

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.04.2008, 19:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.06.2007
Beiträge: 7
Schky befindet sich auf einem aufstrebenden Ast
Standard Drop Down Menu Positionsproblem

hallo alle,

ich habe ein kleines Problem mit meinem CSS Drop Down Menu. Folgendes Problem: Die ersten Punkte in jedem Menu bilden die erste Ebene (class="top") des Menus. Die sollen sich relativ zum Inhalt verhalten, bezüglich Breite. Dann die zweite Ebene (class="item") soll eine fixe Breite bekommen, z.B. 150px.

Der Code, einfach in eine Datei kopieren, ist komplett. Ich denke ihr seht dann meine Anliegen selbst.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"><title>css drop down</title>
<style type="text/css">

#menu {
	behavior: url('css/hover.htc');
}

#container {
	width:700px;
	margin:auto;
	font-size:11pt;
}

#menu {
	position: relative;
	z-index: 2;
	float: left;
}

#menu ul{
	height: 21px;
	cursor: pointer;
	float: left;
	list-style: none;
	background-color: darkred;
}

#menu ul .item{
	display: none;
	background-color: white;
	border: 1px solid black;
	z-index: 3;
	width: 130px;
}

#menu ul:hover .item {
	display: block;
}

#menu ul:hover .item a{
	position: relative;
	color: #000000;
	text-decoration: none;
	margin-left: 5px;
}

#menu ul:hover .item a:hover{
	color: #999999;
}

</style>
</head>
<body>
<div id="container">
	<div id="menu">
		<ul id="item1">
			<li class="top">menu</li>
			<li class="item"><a href="#">menu item 1</a></li>
			<li class="item"><a href="#">menu item 2</a></li>
			<li class="item"><a href="#">menu item 3</a></li>
		</ul>
		<ul id="item2">
			<li class="top">menu item</li>
			<li class="item"><a href="#">menu item 1</a></li>
		</ul>
		<ul id="item3">
			<li class="top">menu item</li>
			<li class="item"><a href="#">menu item 1</a></li>
			<li class="item"><a href="#">menu item 2</a></li>
		</ul>
		<ul id="item4">
			<li class="top">menu item</li>
			<li class="item"><a href="#">menu item 1</a></li>
			<li class="item"><a href="#">menu item 2</a></li>
			<li class="item"><a href="#">menu item 3</a></li>
			<li class="item"><a href="#">menu item 4</a></li>
		</ul>
	</div>
</div>
</body>
</html>
Danke!

Gruss Schky
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.04.2008, 20:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.06.2007
Beiträge: 7
Schky befindet sich auf einem aufstrebenden Ast
Standard Nachtrag:

Nachtrag: Mit position: absolute; unter #menu ul .item bekomm' ich zwar hin, dass sich die class="top" Zellen nicht automatisch vergrössern, jedoch wird mir dann nur der erste class="item" Eintrag angezeigt. Was muss ich denn machen damit bei position: absolute; die items untereinander dargestellt werden?

Hoffe jemand weiss Rat. Danke!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.04.2008, 22:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.06.2007
Beiträge: 7
Schky befindet sich auf einem aufstrebenden Ast
Standard

Ich denke, ohne Vorschau/Link bekomm' ich nie ne Antwort: css drop down
Mit Zitat antworten
  #4 (permalink)  
Alt 20.04.2008, 23:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.784
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Deine Struktur ist unpassend. Verwende eine verschachtelte Liste.
Dann hast du ein ul-Element um die Listenpunkte, dem du dein position:absolute verpassen kannst.
In den FAQ findest du jede Menge Dropdownmenüs -- zum Verstehen des Grundprinzips eignet sich A List Apart: Articles: Suckerfish Dropdowns
Mit Zitat antworten
  #5 (permalink)  
Alt 21.04.2008, 13:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.06.2007
Beiträge: 7
Schky befindet sich auf einem aufstrebenden Ast
Standard

hallo,

danke für den Link. Hab mich drangesetzt und es nach dem Tutorial gemacht. Jetzt läuft es im FF2+, IE6+ und Opera7+. Ich denke das genügt für den Anfang. Teilt mir bitte mit ob es mit eurem Browser auch funktioniert. Wenn etwas mit einem neuen Browser nicht funktioniert, bitte Browser und Version mitteilen. Zusätzlich wenn es mit einem einigermassen populären Browser funktioniert, den ich nicht aufgelistet hab. Danke euch!

Drop Down Menu

mfG
Skyline
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
Hilfe css Menu center xXcyberXx CSS 5 28.11.2010 19:51
Linkverhalten im IE6 ChOpSueY! CSS 19 19.05.2008 22:48
Drop Down Menu: focus Problem enoo CSS 8 20.03.2007 17:51
Ultimate Drop Down Menu Lestat Ressourcen 7 03.08.2005 16:21


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:27 Uhr.