Listen NAvigation

Messiahs · 10.06.2009

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 · 10.06.2009

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 · 10.06.2009

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 · 10.06.2009

AW: Listen NAvigation

Ist alles auf css basis

Messiahs · 10.06.2009

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