horizontales Menü in horizontales Pulldown-Menü ändern

Stephan1958 · #1 (**permalink**) 03.01.2012, 13:23

Hallo zusammen,
als CSS-Laie habe ich ein paar kurze Fragen an die Experten, da ich nach schier endloser Sucherei und Tests mit meinen Versuchen gescheitert bin.

Problem: Ich habe in meiner HP ein horizontales Menü und möchte die css-datei, die Master.dwt und die default.html so umwandeln, dass aus dem horizontalen Menü ein horizontales Pulldown-Menü wird. Ich habe den Code der entsprechenden Dateien mal hier angefügt.

1.master.dwt:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!-- #BeginEditable "doctitle" -->
<title></title>
<!-- #EndEditable -->
<link href="styles/style1.css" media="screen" rel="stylesheet" title="CSS" type="text/css" />
</head>

<body>

<!-- Begin Container -->
<div id="container">
	<!-- Begin Masthead -->
	<div id="masthead">
		<img alt="Logo" height="66" src="images/logo.gif" width="150" /><p>
		Telefon (XXXXX) XXXXXX<br />
		mobil (0XXX) XXXXXX<br />
		e-Mail: XXXXXX.XXXXXX@gmail.com</p>
	</div>
	<!-- End Masthead -->
	<!-- Begin Navigation -->
	<div id="navigation">
		<ul>
			<li><a href="default.html">Home</a></li>
			<li><a href="about/about.htm">Über</a></li>
			<li><a href="news/news.htm">Nachrichten</a></li>
			<li><a href="products/products.htm">Produkte</a></li>
			<li><a href="services/services.htm">Dienste</a></li>
			<li><a href="haftung/haftung.htm">Haftung</a></li>
			<li><a href="contact/contact.htm">Kontakt</a></li>
		</ul>
	</div>
	<!-- End Navigation -->
	<!-- Begin Page Content -->
	<div id="page_content">
		<!-- Begin Left Column -->
		<div id="column_l">
			<!-- #BeginEditable "content" -->
			<h2>Schlagzeile 2</h2>
			<p>Geben Sie Inhalt hier ein</p>
			<!-- #EndEditable --></div>
		<!-- End Left Column -->
		<!-- End Right Column --->
		<div id="column_r">
			<!-- #BeginEditable "sidebar" -->
			<h3>Schlagzeile 3</h3>
			<p>Geben Sie Inhalt hier ein</p>
			<!-- #EndEditable --></div>
		<!-- End Right Column --></div>
	<!-- End Page Content -->
	<!-- Begin Footer -->
	<div id="footer">
		<p><a href="default.html">Home</a> | <a href="about/about.htm">Über</a> |
		<a href="calendar/calendar.htm">Kalender</a> |
		<a href="contact/contact.htm">Kontakt</a> |
		<a href="employees/employees.htm">Mitarbeiter</a> |
		<a href="employment/employment.htm">Beschäftigung</a> |
		<a href="faq/faq.htm">FAQ</a> |
		<a href="information_links/information_links.htm">Informationshyperlinks</a> 
		| <a href="news/news.htm">Nachrichten</a> |
		<a href="photo_gallery/photo_gallery.htm">Fotosammlung</a> |
		<a href="press/press.htm">Presse</a> | <a href="products/products.htm">Produkte</a> 
		| <a href="promotions/promotions.htm">Promotion</a> |
		<a href="services/services.htm">Dienste</a> |
		<a href="site_map/site_map.htm">Sitemap</a></p>
		<p>Copyright &copy; Stephan Stadtmüller </p>
	</div>
	<!-- End Footer --></div>
<!-- End Container -->

</body>

</html>

2.style1.css

Code:

@import url(layout.css);
body {
	color: #000;
	font-size: small;
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	font-style: normal;
	background-color: #abc;
}
#container {
	width: 670px;
	margin: 0 auto;
	background: #fff url(../images/bkgd_tile.gif) top;
	background-repeat: repeat-y;
}
#masthead {
	text-align: right;
	margin-right: 10px;
	margin-left: 10px;
	width: 650px;
	padding: 0;
	background-color: #cde;
}
#navigation {
	margin-right: 10px;
	margin-left: 10px;
	background-color: #d3d3d3;
	overflow: hidden;
}
#column_l {
	width: 420px;
	margin: 0 0 0 10px;
	padding: 0 10px 10px 10px;
}
#column_r {
	width: 193px;
	margin: 0;
	float: right;
	background-color: #eef;
	position: relative;
	right: 10px;
	padding-right: 5px;
	padding-left: 5px;
}
#footer {
	text-align: center;
	background-color: #89a;
	margin-right: 10px;
	margin-left: 10px;
	overflow: hidden;
	padding: 2px;
}
/* Formatvorlagen für Mastertitel */
#masthead img {
	float: left;
}
#masthead p {
	color: #000;
	font-size: x-small;
	text-align: right;
	margin: 10px 10px 0 10px;
}
/* Formatvorlagen für die Navigation */
#navigation ul {
	list-style-type: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
#navigation li {
	float: left;
}
#navigation a {
	color: #000;
	text-decoration: none;
	margin: 0 1px;
	padding: 5px;
	display: block;
	border: 1px solid #d3d3d3;
}
#navigation a:hover {
	background-color: #f2f2f2;
	border: 1px solid #f2f2f2;
}
/* Inhaltsformatvorlagen */
h1 {
	color: #965;
	font-size: 2.0em;
}
h2 {
	color: #965;
	font-size: 1.75em;
}
h3 {
	color: #965;
	font-size: 1.5em;
}
h4 {
	color: #965;
	font-size: 1.25em;
}
h5 {
	color: #965;
	font-size: 0.75em;
}
h6 {
	color: #965;
	font-size: 0.5em;
}
big {
	color: #965;
	font-size: medium;
}
#column_r p {
	color: #000;
	font-size: x-small;
	text-align: left;
	margin: 0;
	padding: 5px;
}
#column_r h4 {
	margin-bottom: 0;
}
#column_r ul {
	margin-left: 5px;
	padding-top: 0;
	padding-left: 10px;
}
#column_r ul li {
	font-size: x-small;
	display: list-item;
	list-style-position: outside;
}
/* Formatvorlagen für Fußzeile */
#footer p {
	color: #fff;
	font-size: x-small;
	margin-top: 2px;
	margin-bottom: 6px;
}
#footer a {
	color: #fff;
	text-decoration: underline;
}
#footer a:hover {
	color: #000;
	text-decoration: none;
}
/* Formatvorlagen für Hyperlinks */
a {
	color: #456;
	text-decoration: underline;
}
a:hover {
	color: #965;
	text-decoration: underline;
}
.style_bold {
	font-weight: bold;
}
.style_italic {
	font-style: italic;
}

Wer kann mir bei der Lösung des Problems helfen oder mir sagen, was ich falsch mache, da meine css-Kenntnisse sehr gering sind.

Vielen Dank im Voraus.
Stephan

dazzle89 · #2 (**permalink**) 03.01.2012, 14:04

Was genau meinst du mit Pulldown-Menü? Kannst du mir eine Beispielseite nennen?

Ich kenne nur Dropdown-Menüs, also wenn ein Listenpunkt Unterpunkte besitzt, so werden diese Unterpunkt erst sichtbar, wenn man mit der Maus (hover) über den Listenpunkt fährt.

Stephan1958 · #3 (**permalink**) 03.01.2012, 14:27

Sorry, genau das Dropdown-Menü meine ich.

Ich will aber nicht ein neues erstellen, sondern das bestehende in ein Dropdown-Menü umwandeln.

dazzle89 · #4 (**permalink**) 03.01.2012, 14:45

Dein Markup macht kein Sinn. Du hast nur eine Liste, du benötigst aber eine weitere Liste, damit überhaupt etwas vorhanden ist, das sich beim Hovern öffnen kann.

Dein HTML muss so aussehen:

Code:

<ul>
     <li>Punkt 1</li>
     <li>Punkt 2</li>
     <li>Punkt 3
          <ul>
               <li>Punkt 3.1</li>
               <li>Punkt 3.2</li>
               <li>Punkt 3.3</li>
               <li>Punkt 3.4</li>
          </ul>
     </li>
     <li>Punkt 4</li>
     <li>Punkt 5</li>
     <li>Punkt 6</li>
</ul>

Die zweite ul muss sich im li-Tag befinden, damit es semantisch korrekt ist.

Wenn man mit der Maus über den Punkt 3 fährt, so öffnet sich die Liste, die sich darin befindet. Das kannst du mit CSS folgendermaßen realisieren:

Code:

ul ul {
display: none;
}
ul li:hover ul {
display: block;
}

Darüber hinaus würde ich die Listenpunkte mit position:relative und die Unterliste mit position: absolute versehen.

Stephan1958 · #5 (**permalink**) 05.01.2012, 15:24

Danke für die tolle Hilfe, ich komm der Sache so langsam näher.
Ich habe im HTML ein zweite Liste so wie beschrieben angefügt > hat geklappt.
Ich habe den Code in die CSS-Datei kopiert > hat geklappt.

Problem: Wenn ich mit der Maus über das Menü fahre, öffnen sich die Unterpunkte nebeneinander + das Menü wir erweitert mit der gleichen Farbe der 1.Menüzeile.
Hier mal ein Screenshot in der beigefügten Anlage.

Wie kann ich das lösen ??

Danke im Voraus + Gruß

Stephan1958 · #6 (**permalink**) 11.01.2012, 13:37

So, dank der tollen Hilfe von euch habe ich das Pulldown-Menü (Bild siehe oben)
jetzt fehlerfrei hinbekommen.

Ein kleines Problem habe ich allerdings noch:
Das Pulldown-Menü (eine Zeile) hat einen grauen Hintergrund.
Wenn ich mit der Maus auf einen Menübutton mit Unterpunkten gehe, wird
der Zeilenhintergrund gleich mit vergrößert.

Ich möchte aber, das die Zeile fix ihren Hintergrund behält und sich sich bei Menü-Unterpunkten nicht vergrößert/erweitert.

Hab schon einiges in der Style.css probiert. komme aber leider nicht weiter.

Hat jemand eine Lösung parat ?

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fliesendes horizontales Menü 100% Breite	Overtone	CSS	0	01.05.2010 16:19
Darstellungsproblem	flohpapa	CSS	3	16.12.2009 08:55
horizontales Menü	sarahg	CSS	9	10.02.2009 14:25
CSS Menü mit Pulldown in Pulldown	Dragon	CSS	2	26.09.2008 17:39
Ueber PullDown Menue Datei oeffnen	chrism	Javascript & Ajax	6	26.01.2007 23:42