crofthunter
New member
Hallo ich versuche gerade eine verschachtelte Menüstruktur zu bauen die absolutpositioniert werden soll. In Opera 7 scheinen listenpunkte in verbindung mit position:absolute und keinen festen breiten nicht floaten zu wollen
hier mal der snippet:
CSS:
/** Begin Hauptnavigation**/
#hauptnavigation{ position: absolute; top: 111px; left: 35px; font-size: 10px; margin: 0px; padding: 0px; list-style: none; height: 14px; line-height: 14px; white-space: nowrap; }
#hauptnavigation li{ float: left; display: block; }
#hauptnavigation li.closed ul{ display: none; visibility: hidden; }
#hauptnavigation li.open ul{ display: block; visibility: visible; }
#hauptnavigation li a{ display: block; padding-left: 33px; background-repeat: no-repeat; background-position: 16px; }
#hauptnavigation li a.folderinactive{ background-image: url(../images/folder_inactive.gif); }
#hauptnavigation li a.folderactive{ background-image: url(../images/folder_active.gif); font-weight: bold; color: #000; background-color: transparent; }
#hauptnavigation li a.paperinactive{ background-image: url(../images/paper_inactive.gif); }
#hauptnavigation li a.paperactive{ background-image: url(../images/paper_active.gif); font-weight: bold; color: #000; background-color: transparent; }
#hauptnavigation li.impressum{ position: relative; left: 649px; width: 79px; }
#hauptnavigation li ul{ margin: 0px; position: absolute; top: 15px; left: 0px; }
#hauptnavigation li ul#agentursub{ padding: 0px 0px 0px 17px; }
#hauptnavigation li ul#kontaktsub{ padding: 0px 0px 0px 162px; }
#hauptnavigation li ul#karrieresub{ padding: 0px 0px 0px 223px; }
#hauptnavigation li ul#karrieresub a.paperinactive{ color: #000; background-color: transparent; background-image: url(../images/paper_active.gif); }
HTML:
<ul id="hauptnavigation">
<li class="open"><a class="folderactive" href="#"><span>agentur</span></a>
<ul id="agentursub">
<li class="closed"><a class="paperinactive" href="#"><span>kompetenzen</span></a></li>
<li class="closed"><a class="folderinactive" href="#"><span>projekte</span></a></li>
<li class="open"><a class="folderactive" href="#"><span>karriere</span></a>
<ul id="karrieresub">
<li class="closed"><a class="paperinactive" href="#"><span>programmierung</span></a></li>
<li class="closed"><a class="paperinactive" href="#"><span>design</span></a></li>
<li class="closed"><a class="paperinactive" href="#"><span>projektmanagement</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="closed"><a class="paperinactive" href="#"><span>presse</span></a></li>
<li class="closed"><a class="folderinactive" href="#"><span>kontakt</span></a>
<ul id="kontaktsub">
<li class="closed"><a class="paperinactive" href="#"><span>formular</span></a></li>
<li class="closed"><a class="paperinactive" href="#"><span>anfahrt</span></a></li>
</ul>
</li>
<li class="impressum"><a class="paperinactive" href="#"><span>impressum</span></a></li>
</ul>
Vielleicht hat ja jemand DEN Workaround dafür....
CSS:
/** Begin Hauptnavigation**/
#hauptnavigation{ position: absolute; top: 111px; left: 35px; font-size: 10px; margin: 0px; padding: 0px; list-style: none; height: 14px; line-height: 14px; white-space: nowrap; }
#hauptnavigation li{ float: left; display: block; }
#hauptnavigation li.closed ul{ display: none; visibility: hidden; }
#hauptnavigation li.open ul{ display: block; visibility: visible; }
#hauptnavigation li a{ display: block; padding-left: 33px; background-repeat: no-repeat; background-position: 16px; }
#hauptnavigation li a.folderinactive{ background-image: url(../images/folder_inactive.gif); }
#hauptnavigation li a.folderactive{ background-image: url(../images/folder_active.gif); font-weight: bold; color: #000; background-color: transparent; }
#hauptnavigation li a.paperinactive{ background-image: url(../images/paper_inactive.gif); }
#hauptnavigation li a.paperactive{ background-image: url(../images/paper_active.gif); font-weight: bold; color: #000; background-color: transparent; }
#hauptnavigation li.impressum{ position: relative; left: 649px; width: 79px; }
#hauptnavigation li ul{ margin: 0px; position: absolute; top: 15px; left: 0px; }
#hauptnavigation li ul#agentursub{ padding: 0px 0px 0px 17px; }
#hauptnavigation li ul#kontaktsub{ padding: 0px 0px 0px 162px; }
#hauptnavigation li ul#karrieresub{ padding: 0px 0px 0px 223px; }
#hauptnavigation li ul#karrieresub a.paperinactive{ color: #000; background-color: transparent; background-image: url(../images/paper_active.gif); }
HTML:
<ul id="hauptnavigation">
<li class="open"><a class="folderactive" href="#"><span>agentur</span></a>
<ul id="agentursub">
<li class="closed"><a class="paperinactive" href="#"><span>kompetenzen</span></a></li>
<li class="closed"><a class="folderinactive" href="#"><span>projekte</span></a></li>
<li class="open"><a class="folderactive" href="#"><span>karriere</span></a>
<ul id="karrieresub">
<li class="closed"><a class="paperinactive" href="#"><span>programmierung</span></a></li>
<li class="closed"><a class="paperinactive" href="#"><span>design</span></a></li>
<li class="closed"><a class="paperinactive" href="#"><span>projektmanagement</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="closed"><a class="paperinactive" href="#"><span>presse</span></a></li>
<li class="closed"><a class="folderinactive" href="#"><span>kontakt</span></a>
<ul id="kontaktsub">
<li class="closed"><a class="paperinactive" href="#"><span>formular</span></a></li>
<li class="closed"><a class="paperinactive" href="#"><span>anfahrt</span></a></li>
</ul>
</li>
<li class="impressum"><a class="paperinactive" href="#"><span>impressum</span></a></li>
</ul>
Vielleicht hat ja jemand DEN Workaround dafür....