✔ CSS DropDown Menü

H

Hans0001

Hallo Zusammen,

ich habe ein menü mit 6 punkten. Wenn man auf den dritten Punkt geht soll er nach rechts ausfahren und drei weitere Punkte anzeigen.
Kann mir jemand helfen wie ich das anstelle ohne java.

CSS:
#button { width:200px; height:926px; font-family:Verdana, Helvetica, Arial, sans-serif; background:url(../img/bg01.jpg) repeat-x #e2e3e3; color:#333; float:left; }
#button ul { list-style: none; margin: 0; padding: 0; border: none; }
#button li { border-bottom: 1px solid #ffffff; margin: 0; }
#button li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #545858; background-color: #717878; color: #fff; text-decoration: none; width: 100%; }
html>body #button li a { width: auto; }
#button li a:hover { border-left: 10px solid #940d20; background-color: #b5152b; color: #fff; }
#button #currentpage a { text-decoration:none; color:#ffffff; border-left: 10px solid #940d20; background:#b5152b; }

Navi:
<div id="button">
<ul>
<li<?php if ($thisPage=="001.php") echo " id=\"currentpage\""; ?>><a href="001.php">Startseite</a></li>
<li<?php if ($thisPage=="002.php") echo " id=\"currentpage\""; ?>><a href="002.php">Produkte</a></li>
<li<?php if ($thisPage=="003.php") echo " id=\"currentpage\""; ?>><a href="003.php">Technik</a></li>
<li<?php if ($thisPage=="004.php") echo " id=\"currentpage\""; ?>><a href="004.php">Partner</a></li>
<li<?php if ($thisPage=="005.php") echo " id=\"currentpage\""; ?>><a href="005.php">Kontakt</a></li>
<li<?php if ($thisPage=="006.php") echo " id=\"currentpage\""; ?>><a href="006.php">Impressum</a></li>
</ul>
</div>

Bei Technik sollen die drei weiteren Punkte kommen.

Vielen Dank für die Hilfe.

Gruß
Hans
 
Genau so wie das von Stu Nicholls. Nur das ich nur eine Ebene nach rechts brauche und die drei dann auch so untereinander stehen.

Gruß
Hans
 
Den Überschuß an Menüebenen kannst du ja aus dem Code entfernen.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | A CSS flyout menu that works in IE</title>

<link rel="stylesheet" media="all" type="text/css" href="css/flyout.css" />

<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/flyout_ie.css" />
<![endif]-->

</head>
<body>

<div class="menu">

<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>

<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>

<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;</a>

<!--[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="index.html">MENUS</a>

<!--[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]-->

<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>

</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>

<!--[if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>

<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../boxes/index.html">BOXES</a>

<!--[if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif]-->

<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>

<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>

<!--[if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>

<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../ie/index.html">EXPLORER</a>

<!--[if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../opacity/index.html">OPACITY</a>

<!--[if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
<li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
<li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
<li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

</ul>
</div>

</body>
</html>
flyout.css
CSS: 
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyoutt.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* common styling */
.menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:104px; height:20px; text-align:center; border:1px solid #fff; border-width:1px 1px 0 0; background:#c9c9a7; line-height:19px; font-size:11px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#b3ab79;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li:hover ul li a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover a.hide {width:150px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#b3ab79; color:#000; width:150px;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:151px; top:0; color:#000;}
.menu ul li:hover ul li:hover ul li a {display:block; width:200px; background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}
flyout_ie.css (Für IE6)
CSS: 
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyoutt.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
table {border-collapse:collapse; border:0; margin:0; padding:0;}

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff; background:#b3ab79;}
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li a:hover ul li a.sub {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff; width:150px;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:151px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul li a {display:block; width:200px; background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}

mfg Maik
 
Funktioniert irgendwie nicht wirklich.

html:
.....
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" media="all" type="text/css" href="css/flyout.css" />

<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/flyout_ie.css" />
<![endif]-->
<link rel="shortcut icon" href="img/icon.ico">
</head>


navi.php:

<div id="button" class="menu">
<ul>
<li<?php if ($thisPage=="001.php") echo " id=\"currentpage\""; ?>><a href="001.php">Startseite</a></li>
<li<?php if ($thisPage=="002.php") echo " id=\"currentpage\""; ?>><a href="002.php">Produkte</a></li>
<li<?php if ($thisPage=="003.php") echo " id=\"currentpage\""; ?>><a class="hide" href="003.php">Technik</a>
<!--[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]-->
<ul>
<li<?php if ($thisPage=="008.php") echo " id=\"currentpage\""; ?>><a href="008.php" title="Druckvorstufe">Druckvorstufe</a></li>
<li<?php if ($thisPage=="009.php") echo " id=\"currentpage\""; ?>><a href="009.php" title="Druckerei">Druckerei</a></li>
<li<?php if ($thisPage=="010.php") echo " id=\"currentpage\""; ?>><a href="010.php" title="Buchbinderei">Buchbinderei</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li<?php if ($thisPage=="004.php") echo " id=\"currentpage\""; ?>><a href="004.php">Partner</a></li>
<li<?php if ($thisPage=="005.php") echo " id=\"currentpage\""; ?>><a href="005.php">Kontakt</a></li>
<li<?php if ($thisPage=="006.php") echo " id=\"currentpage\""; ?>><a href="006.php">Impressum</a></li>
</ul>
</div>

jetzt steht das Hauptmenü nebeneinander und das was nach rechts gehen soll steht zu weit weg.

Meine CSS-Datei ist so geblieben hab nur die andern beiden mit verlinkt.

Gruß
Hans
 
Hans0001 hat gesagt.:
Funktioniert irgendwie nicht wirklich.


jetzt steht das Hauptmenü nebeneinander und das was nach rechts gehen soll steht zu weit weg.

Meine CSS-Datei ist so geblieben hab nur die andern beiden mit verlinkt.
Zum Vergrößern anklicken....
Naja, die beiden hinzugekommenen Stylesheets (flyout.css und flyout_ie.css) mußt du selbstverständlich deinen Gegebenheiten anpassen, denn ich hab hier vorhin ihre Originalfassung des Beispiels gepostet.

Am einfachsten übernimmst du das Stylesheet flyout.css und überarbeitest es, damit es deiner Formatierung (Menübreite, daraus resultierender left-Positionswert für das Submenü, Hintergrund-/Schriftfarben) entspricht, und so nicht weiterhin die beiden Selektoren (#button ... {} und .menu ... {}) aus den Stylesheets gemeinsam verwendet werden, sondern nur einer von ihnen für das Menü zum Einsatz kommt.

Dies dürfte hier wohl auch die Ursache dafür sein, dass die Hauptmenüpunkte bei dir nun nicht mehr korrekt untereinander ausgerichtet werden.

mfg Maik
 
Für das Stylesheet flyout.css hab ich hier mal die relevanten Regelangaben aus deinem Stylesheet übernommen, womit dein CSS-Code entfällt:
CSS: 
/* common styling */
.menu {font-family:verdana, helvetica, arial, sans-serif; width:200px; height:926px; position:relative; margin:0; background:url(../img/bg01.jpg) repeat-x #e2e3e3; color:#333;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:180px; height:20px; text-align:center; padding:5px; border-left: 10px solid #545858; background-color: #717878; color: #fff; text-decoration: none;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative; border-bottom: 1px solid #ffffff;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {border-left: 10px solid #940d20; background-color: #b5152b; color: #fff;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:200px; width:200px;}
.menu ul li:hover ul li a.hide {border-left: 10px solid #545858; background-color: #717878; color: #fff;}
.menu ul li:hover ul li:hover a.hide {width:200px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; border-left: 10px solid #545858; background-color: #717878; color: #fff; width:190px;}
.menu ul li:hover ul li a:hover {border-left: 10px solid #940d20; background-color: #b5152b; color: #fff;}

Auf die gleiche Weise gehst du im zweiten Stylesheet flyout_ie.css vor, um darin das Erscheinungsbild zu überarbeiten.

Dein genutzter ID-Bezeichner button in dem umschließenden <div>-Element entfällt somit gänzlich:
HTML: 
<div class="menu">
...
</div>

Oder du belässt es bei deinem ID-Bezeichner, und gleichst dies in den Selektoren an - aus .menu ... {} wird #button ... {}.

mfg Maik
 
Hi Maik,

hab das jetzt noch mal versucht. Das Menü sieht jetzt wieder so aus wie es seien soll, aber der flyout kommt nicht.
Hab die flyout.css jetzt in meine main.css geändert.
Hier noch mal meine codes:

Head-Bereich:
HTML: 
...
<meta name="content-language" content="de" />
<link rel="stylesheet" type="text/css" href="css/main.css" />

<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/flyout_ie.css" />
<![endif]-->
<link rel="shortcut icon" href="img/icon.ico">
</head>


navi.php:
<div class="menu">
<ul>
<li<?php if ($thisPage=="001.php") echo " id=\"currentpage\""; ?>><a href="001.php">Startseite</a></li>
<li<?php if ($thisPage=="002.php") echo " id=\"currentpage\""; ?>><a href="002.php">Produkte</a></li>
<li<?php if ($thisPage=="003.php") echo " id=\"currentpage\""; ?>><a class="hide" href="003.php">Technik</a>
<!--[if lte IE 6]>
<a href="003.php">MENUS
<table><tr><td>
<![endif]-->
<ul>
<li<?php if ($thisPage=="008.php") echo " id=\"currentpage\""; ?>><a href="008.php" title="Druckvorstufe">Druckvorstufe</a></li>
<li<?php if ($thisPage=="009.php") echo " id=\"currentpage\""; ?>><a href="009.php" title="Druckerei">Druckerei</a></li>
<li<?php if ($thisPage=="010.php") echo " id=\"currentpage\""; ?>><a href="010.php" title="Buchbinderei">Buchbinderei</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li<?php if ($thisPage=="004.php") echo " id=\"currentpage\""; ?>><a href="004.php">Partner</a></li>
<li<?php if ($thisPage=="005.php") echo " id=\"currentpage\""; ?>><a href="005.php">Kontakt</a></li>
<li<?php if ($thisPage=="006.php") echo " id=\"currentpage\""; ?>><a href="006.php">Impressum</a></li>
</ul>
</div>


der teil aus der main.css (flyout.css):
CSS: 
/* common styling */
.menu {font-family:verdana, helvetica, arial, sans-serif; width:200px; height:926px; position:relative; margin:0; background:url(../img/bg01.jpg) repeat-x #e2e3e3; color:#333;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:180px; height:20px; text-align:center; padding:5px; border-left: 10px solid #545858; background-color: #717878; color: #fff; text-decoration: none;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative; border-bottom: 1px solid #ffffff;}
.menu ul li ul {display: none;}
 
/* specific to non IE browsers */
.menu ul li:hover a {border-left: 10px solid #940d20; background-color: #b5152b; color: #fff;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:200px; width:200px;}
.menu ul li:hover ul li a.hide {border-left: 10px solid #545858; background-color: #717878; color: #fff;}
.menu ul li:hover ul li:hover a.hide {width:200px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; border-left: 10px solid #545858; background-color: #717878; color: #fff; width:190px;}
.menu ul li:hover ul li a:hover {border-left: 10px solid #940d20; background-color: #b5152b; color: #fff;}
#button #currentpage a	{ text-decoration:none; color:#ffffff; border-left: 10px solid #940d20; background:#b5152b; }


Und hier noch die flyout_ie.css:
CSS: 
table {border-collapse:collapse; border:0; margin:0; padding:0;}
 
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
 
.menu ul li a:hover {color:#fff; background:#b5152b;}
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:200px; width:200px;}
.menu ul li a:hover ul li a.sub {background:#b5152b; color:#000;}
.menu ul li a:hover ul li a {display:block; background:#b5152b; color:#fff; width:200px;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#b5152b; color:#fff;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:200px; top:0; color:#fff;}
.menu ul li a:hover ul li a:hover ul li a {display:block; width:200px; background:#b5152b; color:#fff;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#b5152b; color:#fff;}

Gruß
Hans
 
Zuletzt bearbeitet von einem Moderator:
Ach sorry, geht jetzt doch er hat es nicht richtig aktualisiert im Browser.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück