Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Listen NAvigation“

Messiahs

Aktives Mitglied

Hallo , ich möchte gerne mit Listen Elemente eine Nvigation schreiben.

Ich einen Großteil der Arbeit bereits hinter mit , jedoch scheitere ich an einen kleinen Problem was ich nicht erkennen "möchte" xD

Wenn ich über die Kategorien mit der Maus gehe soll sich darunter das "submenü" ausklappen , jedoch bleibt alles in der linken ecke kleben und ich weis nicht warum.

Hier ist der Link zum betrachten


CSS Code
Code:
*,
html,
body{  
    margin:0;
    padding:0;
}

body{
    color:#000000;
    background-color:#EFEFEF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}

h1{
    font-size:24px;
}

h2{
    font-size:20px;
}

#wrapper{
    margin:50px auto 0 auto;
    width:800px;
    height:100px;
}


.navi{
    display:inline;
    background:#97E1FD;
    font-size:16px;
    border:#66FFFF 2px dotted;
    margin-left:20px;
}

.submenu{
    display:none;
}

.navi:hover .submenu{
    display:block;
    position:absolute;
    z-index:2;
    margin-left:1px;
}

.navi:hover .submenu li{
    display:inline;
    background-color:#6699FF;
    border:#66FFFF 1px dotted;
    list-style-position:inside;
}


#footer{
       background:#f4fcff;
       border:2px dashed #92c6e8;
       width:98%;
       margin: 100px auto 0 auto;
       height:60px;
       botton:3px;
       left:1%;
       position:absolute;
}

Htm Code
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
  <ul>
    <li class="navi">Kategorie 1
      <ul class="submenu">
        <li>link1</li>
        <li>link1</li>
        <li>link1</li>
      </ul>
    </li>
    <li class="navi">Kategorie 2
      <ul class="submenu">
        <li>link2</li>
        <li>link2</li>
        <li>link2</li>
      </ul>
    </li>
    <li class="navi">Kategorie 3
      <ul class="submenu">
        <li>link3</li>
        <li>link3</li>
        <li>link3</li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

Ich hoffe das ihr mich wieder auf de, richtigen Pfad bringt :)
Euer Messiahs
 

cebito

undefined

AW: Listen NAvigation

Code:
.navi{
[COLOR=Blue]position:relative;[/COLOR]
display:inline;
background:#97E1FD;
font-size:16px;
border:#66FFFF 2px dotted;
margin-left:20px;
}
.submenu{
display:none;
}
.navi:hover .submenu{
[COLOR=Blue]position:absolute;
top:20px;
left:0;[/COLOR]
display:block;
z-index:2;
margin-left:1px;
}
.navi:hover .submenu li{
[COLOR=Blue]list-style-type:none;[/COLOR]
background-color:#6699FF;
border:#66FFFF 1px dotted;
}

Mein Vorschlag, mach mal die gepünktelten Rahmen weg oder in einer deutlich anderen Farbe, so sieht es aus wie ein stark verpixeltes jpeg oder gif...
 

xyzutschixyz

Besserwisser

AW: Listen NAvigation

Was mir jetzt spontan einfällt beim safari (mac) geht dein Code überhaupt nicht, aber ich guckma heut mittag beim firefox. Lustigerweise sehe ich dein Codebeispiel nur zur hälfte
wie gesagt ich seh ja fast gar nix, benutzt du js oder css für die platzierung?

Grüße
 

Messiahs

Aktives Mitglied

AW: Listen NAvigation

Danke sehr crebito hat alles wunderbar geklappt.Was ich jedoch noch wünschen würde ist es das die subnavi koplett nach rechts ausklappt und nicht untereinander wenn zu viele Links sind ^^

Ps.: Die Navi ist ein test , die Finale schaut natürlich meiner Page angepasst aus <3
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.223
Neuestes Mitglied
Desiree
Oben