• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Spry-Menü mit mehr als 3 Unterkategorien

W

WeMa

Neues Mitglied
Hallo,

ist es irgendwie möglich, in Dreamweaver eine Spry-Menubar mit mehr als 3 Unterkategorien zu erstellen? Wenn ja wie?
 
Du musst einfach noch eine Ebene hinzufügen bei allen Angaben:
(Am Beispiel der horizontalen Navi):
Code: 
    div#menu ul ul,
    div#menu ul li:hover ul ul,
    div#menu ul ul li:hover ul ul
/* 4. ebene */
    div#menu ul ul ul li:hover ul ul
      {display: none;} 

    div#menu ul li:hover ul,
    div#menu ul ul li:hover ul,
    div#menu ul ul ul li:hover ul
/* 4. ebene */
    div#menu ul ul ul ul li:hover ul
      {display: block;}

Eventuell muss auch noch an anderen Stellen für die 4. Ebene etwas dazu.
 
Vielen Dank!! Das das so einfach geht hätte ich nicht gedacht!

Aber wenn ich das so mache, habe ich zwar eine vierte ebene, aber die wird gleich angezeigt und nicht vorher versteckt: Eduardo Jenaro- Startseite

wie bekomme ich das hin, dass es solange versteckt ist, bis ich mit der Maus über den entsprechenden Eintrag fahre?

Danke im Voraus!
 
Du hast die vierte Ebene nicht richtig eingebaut. die nächste Liste muss im <li>-Tag sein:
(ich mach sie dir mal bei 3 b iii rein)

HTML: 
<ul>
    <li>
      <ul>
        <li><a href="#">eins</a></li>
        <li><a href="#">zwei<img src="/pfeilrekl.png" border="0px" width="20" height="8" /></a>
          <ul>
            <li><a href="#">zwei a</a></li>

            <li><a href="#">zwei b</a></li>
            <li><a href="#">zwei c</a></li>
            <li><a href="#">zwei d</a></li>
          </ul>
        </li>
        <li><a href="#">drei ...</a>
          <ul>

            <li><a href="#">drei a</a></li>
            <li><a href="#">drei b ...</a>
              <ul>
                <li><a href="#">drei
                  b i</a></li>
                <li><a href="#">drei
                  b ii</a></li>
                <li><a href="#">drei
                  b iii</a>
                  <ul>
                     <li><a href="#">zwei a</a></li>
                     <li><a href="#">zwei b</a></li>
                     <li><a href="#">zwei c</a></li>
                     <li><a href="#">zwei d</a></li>
                 </ul>
                </li>
              </ul>

            </li>
            <li><a href="#">drei c</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
 
Das nene ich hilfsbereit!!! Vielen vielen Dank.

Ich habe nur noch eine Frage und zwar versuche ich gerade das gleiche auf eine vertikale Navi anzuwenden und es funktioniert nicht so richtig. wie lautet der auf 4 ebenen erweiterte CSS Code für die vertikale Navi?

Sry, dass ich so dumm frage aber mit CSS kenne ich mich einfach noch nicht so gut aus:oops:
 
Eigentlich ist es genau das gleiche. Du musst nur den Code für die Vertikale Navigation nehmen:

CSS-Code:
Code: 
#menu {
width: 80px;
background: #eee;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #FF8635;
background: #96D12C;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu li {
position: relative;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul,
div#menu ul ul ul li:hover ul ul 
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul,
div#menu ul ul ul ul li:hover ul
{display: block;}

Und der HTML-Code ist der gleiche. Zur Sicherheit noch einmal:

HTML: 
<div id="menu">
<ul>
  <li><h2>Titel 1</h2>
    <ul>
		<li><a href="#">eins</a></li>
		<li><a href="#">zwei ...</a>
			<ul>
       			<li><a href="#">zwei a</a></li>

       			<li><a href="#">zwei b</a></li>
       			<li><a href="#">zwei c</a></li>
				<li><a href="#">zwei d</a></li>
 			</ul>
		</li>
       <li><a href="#">drei ...</a>
	   		<ul>

       			<li><a href="#">drei a</a></li>
       			<li><a href="#">drei b ...</a>
					<ul>
       					<li><a href="#">drei b i</a></li>
       					<li><a href="#">drei b ii</a></li>
       					<li><a href="#">drei b iii ...</a>
       					     <ul>
       	                    		          <li><a href="#">drei b iii I</a></li>
            				          <li><a href="#">drei b iii II</a></li>
            				          <li><a href="#">drei b iii III</a></li>
       					          <li><a href="#">drei b iii IV</a></li>
       					          <li><a href="#">drei b iii V</a></li>
       					     </ul>
                                        </li>

					</ul>
					</li>
       			<li><a href="#">drei c</a></li>
 			</ul>
	   </li>
    </ul>
  </li>
 </ul>

</div>
 
Zuletzt bearbeitet von einem Moderator:
1. müssen in der 4. Ebene in allen li-Tags auch Links rein.
2. fehlt eine Angabe für die 4. Ebene im CSS.
3. lag das nicht an dir, sondern an meinem Code :D Ich hab den eben verbessert, jetzt sollte es funktionieren.
 
Irgendwie habe ich gedacht, ich hätte seit deinem letzten Post, mit dem Code, verstanden, wie das Ganze funktioniert. Aber ich verstehe nicht, warum die 4. Ebene gleich angezeigt wird und nicht erst wenn man mit der Maus über den entsprechenden Eintrag fährt.....
 
Dann muss dir ein Fehler beim Kopieren passiert sein oder im Code stimmt etwas nicht. Ich habe den Code oben mal ausprobiert und er funktioniert einwandfrei.

EDIT: Es fehlten noch zwei Kommas. Wenn du die zwei unteren Blöcke CSS nochmal kopierst, funktioniert es.
 
Tatsächlich. Dann liegt der Fehler irgendwo in meinem Code. Was aber heißt: Ich hab dank dir verstanden wie das "Script" funktioniert. Vielen, vielen herzlichen Dank!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben