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

double navi

H

html001

Neues Mitglied
huhu

ich habe eine listen navigationsleiste erstellt.
allerdings hätte ich gerne in der navigation eine andere navigation.
hier ist mein code.
Code: 
<style type="text/css">

* {
margin: 0;
padding: 0;
}

#menu {
width: 100%;
padding: 0 20px;
background: #003366;
font-family: Verdana;
font-size: 1em;
line-height: 1.5;
float: left;
}

#menu {
width: 140px;
height: 600px;
padding: 0 20px;
background: #003366;
font-family: Verdana;
font-size: 1em;
line-height: 1.5;
float: left;
}

#menu ul {
width: 140px;
list-style-type: none;
} 

#menu h3 {
font-size: 1em;
text-align: center;
color: #000;
border: 1px solid #003366;
background: #ff8000;
}

#menu a {
text-decoration: none;
display: block;
border: 1px solid #ccc;
text-align: center;
background: #ff9224;
color: #003366;
}

#menu a:hover {
color: #ff9224;
background: #003366;
}


#menu li {
position: relative;
}

#menu ul ul {
position: absolute;
top: 0;
left: 140px;
z-index: 2;
display: none;
} 

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

* html #menu ul li{
float: left;
width: 100%;
}

*+ html #menu ul li {
float: left;
width: 100%;
}

*html body {
behavior: url(csshover3-source.htc);
font-size: 100%;
}

*html #menu ul li a {
height: 1%;
}


#menu a.direkt:link {
font-size: 1em;
font-weight: bold;
text-align: center;
color: #000;
border: 1px solid #003366;
background: #ff8000;
}


#menu a.direkt:hover {
color: #ff9224;
background: #003366;
border: 1px solid #ccc;
}

#oben1{
position:absolute;top:0px;left:180px;
width:990px;
height:10px;
background: #003366;
}
#oben2{
position:absolute;top:10px;left:0px;
width:1349px;
height:10px;
background: #ff8000;
}
#oben3{
position:absolute;top:20px;left:180px;
width:990px;
height:10px;
background: #003366;
}

#unten1{
position:absolute;top:570px;left:180px;
width:990px;
height:10px;
background: #003366;
}
#unten2{
position:absolute;top:580px;left:0px;
width:1349px;
height:10px;
background: #ff8000;
}
#unten3{
position:absolute;top:590px;left:180px;
width:990px;
height:10px;
background: #003366;
}
#right{
position:absolute;top:0px;left:1169px;
width:180px;
height:600px;
background: #003366;
}
    

  #link1{ font-family:Arial; font-size:8pt; }
 a:link { color:#AFAEAE; text-decoration:none; font-weight:bold; }
 a:visited { color:#AFAEAE; text-decoration:none; font-weight:bold; }
 a:focus { color:#AFAEAE; text-decoration:none; font-weight:bold; }
 a:hover { color:#AFAEAE; text-decoration:underline; font-weight:bold; }
 a:active { color:#AFAEAE; text-decoration:none; font-weight:bold; } 

#pos1{position:absolute;top:500px;left:500px;}

</style>

<body>
<iframe src="Startseite.html" name="iframe" width="1165" height="600"
  marginheight="10" marginwidth="10" align="right" frameborder="0" scrolling="no">
<p>Ihr Browser kann leider keine eingebetteden Frames Anzeigen</p>
</iframe>
<div id="right">
</div>
<div id="oben1">
<p id="pos1"><a href="" target="iframe" id="link1">Impressum</a> | <a href="" target="iframe" id="link1">Kontakt</a></p>
</div>
<div id="oben2">
</div>
<div id="oben3">
</div>
<div id="unten1">
</div>
<div id="unten2">
</div>
<div id="unten3">
</div>
<div id="menu">
<br><br>
<ul>

<li>

<h3><a href="#">Thema1</a></h3>

<ul>

<li><a href="" target="iframe">Thema 1.1</a></li>

<li><a href="#" target="iframe">Thema 1.2</a></li>

<li><a href="#" target="iframe">Thema 1.3</a></li>


</ul>


</li>


</ul>

</li>

</ul>


<ul>

<li>

<h3><a href="#">Thema 2</a></h3>

<ul>

<li><a href="#" target="iframe">Thema 2.1</a></li>

<li><a href="#" target="iframe">Thema 2.2</a></li>

<li><a href="#" target="iframe">Thema 2.3</a></li>

</ul>

</li>

</ul>
<ul>

<li>

<h3><a href="#">Thema 3</a></h3>

<ul>

<li><a href="#" target="iframe">Thema 3.1</a></li>

<li><a href="#" target="iframe">Thema 3.2</a></li>

<li><a href="#" target="iframe">Thema 3.3</a></li>

</ul>

</li>

</ul>
<ul>

<li>

<h3><a href="#">Thema 4</a></h3>

<ul>

<li><a href="#" target="iframe">Thema 4.1</a></li>

<li><a href="#" target="iframe">Thema 4.2</a></li>

<li><a href="#" target="iframe">Thema 4.3</a></li>

</ul>

</li>



<h3><a href="#" target="iframe">Thema5</a></h3>

<h3><a href="#" target="iframe">Thema6</a></h3>

<h3><a href="#" target="iframe">Thema 7</a></h3>


</li>
</ul>
</div>

hoffe ihr wist was ich meine

gruß html001
 
Hallo.

Ich weiss nicht was dein Problem ist.
Kannst du deine Frage bitte anders formulieren.

Gruss
Elroy
 
Ich glaube er meint eine Unternavigation a la

Code: 
<ul>
<li><a href="#">Hauptmenüpunkt</a>
 <ul>
  <li><a href="#">Untermenüpunkt</a></li>
  <li><a href="#">Untermenüpunkt</a></li>
 </ul>
</li>
<li><a href="#">Noch ein Hauptmenüpunkt</a></li>
</ul>

Was jetzt allerdings das Problem ist, kann ich auch nicht sehen.
 
ok. also ich habe eine navigation (nav1)die sich ausklapt und da sind drei unterpunkte(nav1.1,nav1.2,nav1.3).
jetzt will ich das wenn ich auf einen der drei unterpunkte gehe sich ein neuer unterpunkt ausklappt also unterpunkt nav 1.1.1.
 
Das dachte ich mir schon fast. Aber dein Menü ist, was das angeht, eher ungünstig aufgebaut. Momentan hast Du nur eine Reihe <ul> hintereinander. Besser wäre wenn Du es so aufbaust wie von mir beschrieben. Dann hättest Du einfacher Zugriff auf die CSS-Eigenschaften und es wäre semantisch auch korrekter (für Suchmaschinen z.B.).

Und genau dazu gibt es dann einige Anleitungen:
Vertikales Ausklapp-Menü
Horizontales Dropdown-Menü
und auch hier im Forum viele Beiträge.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben