tutorials.de Buch-Aktion 05/2012
Seite 1 von 2 12 LetzteLetzte
ERLEDIGT
JA
ANTWORTEN
16
ZUGRIFFE
2704
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 15.07.10 12:02 #1
    Hans0001 Tutorials.de Gastzugang
    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
     
    Zitieren Zitieren
  2. 15.07.10 12:15 #2
    Maik Tutorials.de Gastzugang
    Hi,

    je nachdem, wie die drei Untermenüpunkte ausgerichtet sein sollen, schau mal hier: http://www.cssplay.co.uk/menus/flyoutt.html , oder hier: http://www.cssplay.co.uk/menus/flyout_horizontal.html

    mfg Maik
     
    Zitieren Zitieren
  3. 15.07.10 12:27 #3
    Hans0001 Tutorials.de Gastzugang
    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
     
    Zitieren Zitieren
  4. 15.07.10 12:36 #4
    Maik Tutorials.de Gastzugang
    Den Überschuß an Menüebenen kannst du ja aus dem Code entfernen.

    HTML-Code:
    <!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
    Code css:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

    /* ================================================================ 
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)
    Code css:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    /* ================================================================ 
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
     
    Zitieren Zitieren
  5. 15.07.10 13:28 #5
    Hans0001 Tutorials.de Gastzugang
    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
     
    Zitieren Zitieren
  6. 15.07.10 13:46 #6
    Maik Tutorials.de Gastzugang
    Zitat Zitat von Hans0001 Beitrag anzeigen
    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.
    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
     
    Zitieren Zitieren
  7. 15.07.10 14:12 #7
    Maik Tutorials.de Gastzugang
    Für das Stylesheet flyout.css hab ich hier mal die relevanten Regelangaben aus deinem Stylesheet übernommen, womit dein CSS-Code entfällt:
    Code css:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    /* 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-Code:
    <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
     
    Zitieren Zitieren
  8. 15.07.10 17:06 #8
    Hans001 Tutorials.de Gastzugang
    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-Code:
    ...
<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):
    Code css:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    /* 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:
    Code css:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14

    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
    Geändert von Maik (15.07.10 um 17:19 Uhr) Grund: [html][/html]- und [css][/css]-Tag eingebettet
     
    Zitieren Zitieren
  9. 15.07.10 17:11 #9
    Hans001 Tutorials.de Gastzugang
    Ach sorry, geht jetzt doch er hat es nicht richtig aktualisiert im Browser.
     
    Zitieren Zitieren
  10. 15.07.10 17:17 #10
    Maik Tutorials.de Gastzugang
    Zitat Zitat von Hans001 Beitrag anzeigen
    hab das jetzt noch mal versucht. Das Menü sieht jetzt wieder so aus wie es seien soll, aber der flyout kommt nicht.
    Bei mir zeigt er sich mit deinem CSS.

    Wenn, dann wäre die Ursache an anderer Stelle zu suchen.

    In welchem Browser erscheint das Submenü nicht?

    mfg Maik
     
    Zitieren Zitieren
  11. 15.07.10 17:23 #11
    Maik Tutorials.de Gastzugang
    Zitat Zitat von Hans001 Beitrag anzeigen
    Ach sorry, geht jetzt doch er hat es nicht richtig aktualisiert im Browser.
    Sag ich doch

    Und verwende doch bitte zukünftig für deine Code-Präsentationen die Highlight-Tags (z.B. [code][/code], [html][/html], [css][/css]), um den Beitrag etwas übersichtlicher zu gestalten, und uns das Lesen zu erleichtern - vielen Dank

    mfg Maik
     
    Zitieren Zitieren
  12. 16.07.10 08:45 #12
    Hans0001 Tutorials.de Gastzugang
    Ok werd ich machen. hab noch mal ne Frage.
    Ich habe unter Kontakt eine Google-Karte einbebaut. Wenn ich auf der Seite Kontakt bin und dann auf den Menüpunkt Technik gehe, dann sind die Punkte, die nach rechts ausfahren unter der Karte.
    Man kann sie also nicht sehen. Wie kann ich das machen, das die Punkte über der Karte angezeigt werden?

    Gruß
    Hans
     
    Zitieren Zitieren
  13. 16.07.10 08:55 #13
    Avatar von Jan-Frederik Stieler
    Jan-Frederik Stieler Jan-Frederik Stieler ist offline JFS - aka DirtyWorld
    tutorials.de Moderator
    Registriert seit
    Nov 2003
    Ort
    Darmstadt
    Beiträge
    4.934
    Blog-Einträge
    1
    Moin,
    ohne das ich mir jetzt hier alles durchgelesn habe, schau dir mal die CSS Eigenschaft Z-Index an.
    Damit kannst du Elemente auf Layern (Ebenen) anordnen.

    Gruß
     
    Dirt is my World
    www.janstieler.de coming soon!
    Xing Profil (OpenBC)
    del.icio.us Profil
    flickr Profil

    Portfolio

    Bitte bewerte mich wenn ich dir weitergeholfen habe. Und makiere dein Beitrag als erledigt wenn das Problem geklärt wurde.
    Information zum neuen Bewertungsmodell.
    Zitieren Zitieren
  14. 16.07.10 08:55 #14
    Maik Tutorials.de Gastzugang
    Moin,

    versuch es mal für das umschliessende DIV des Menüs mit einer Schichtpositionierung z-index (siehe http://de.selfhtml.org/css/eigenscha...ng.htm#z_index):

    Code css:
    1
2
3
4
5
6
7
8
9
10

    .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;
z-index:999; /* Schichtposition */
}


    mfg Maik
     
    Zitieren Zitieren
  15. 16.07.10 09:27 #15
    Hans0001 Tutorials.de Gastzugang
    Ok hat soweit funktioniert. Bis auf die Leiste zum Zoomen. Obwohl die mit in der Karte bleibt Sie im Vordergrund.
     
    Zitieren Zitieren
« Mitwachsende Divs innerhalb eines Containers | CSS Navigation »

Ähnliche Themen

  1. Dropdown-Menü
    Von -Raid- im Forum CSS
    Antworten: 2
    Letzter Beitrag: 08.07.08, 18:52
  2. Menü wie dropdown nur bei senkrechtem Menü
    Von Merbi im Forum CSS
    Antworten: 3
    Letzter Beitrag: 20.07.07, 00:04
  3. dropdown-Menü
    Von mediaroad im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 16.04.07, 11:55
  4. Dropdown-Menü
    Von RalfHeinz im Forum Flash Plattform
    Antworten: 5
    Letzter Beitrag: 23.02.07, 17:07
  5. Dropdown Menü zeigt falsches Menü
    Von Blattspinat im Forum Javascript & Ajax
    Antworten: 4
    Letzter Beitrag: 05.11.04, 09:42