✔ ul li Dropdown menü - IE problem

[socke999]

Hallo, ich möchte mit CSS und Listen ein Dropdown Menü machen.

Ich versuche es ohne jeglichen JavaScript auszukommen, jedoch weiß ich nicht ganz genau ob das überhaupt mit IE6 kompatibel ist. ich habe nur IE 7.

HTML:

<div id="navcontainer">
<ul class="navlist">
	<li><a href="#">Item one</a>
	<ul class="subnavlist">
	    <li><a href="#">Subitem 1.1</a></li>
            <li><a href="#">Subitem 1.2</a></li>
            <li><a href="#">Subitem 1.3</a></li>
            <li><a href="#">Subitem 1.4</a></li>
        </ul>
	</li>

	<li><a href="#">Item two</a>
    	<ul class="subnavlist">
	    <li><a href="#">Subitem 2.1</a></li>
            <li><a href="#">Subitem 2.2</a></li>
            <li><a href="#">Subitem 2.3</a></li>
            <li><a href="#">Subitem 2.4</a></li>
        </ul>
    </li>
    <li><a href="#">Item three</a>
    	<ul class="subnavlist">
	    <li><a href="#">Subitem 3.1</a></li>
            <li><a href="#">Subitem 3.2</a></li>
            <li><a href="#">Subitem 3.3</a></li>
        </ul>
    </li>
    <li><a href="#">Item four</a>
    	<ul class="subnavlist">
	    <li><a href="#">Subitem 4.1</a></li>
            <li><a href="#">Subitem 4.2</a></li>
        </ul>
     </li>
</ul>
</div>

Das CSS sieht so aus:

ul.navlist { font-family: sans-serif; }

ul.navlist a
{
font-weight: bold;
text-decoration: none;
}

ul.navlist, ul.navlist ul, ul.navlist li
{
margin: 0px;
padding: 0px;
list-style-type: none;
}

ul.navlist li { float: left; }

ul.navlist li a
{
color: #ffffff;
background-color: #003366;
padding: 3px;
border: 1px #ffffff outset;
}

ul.navlist li a:hover
{
color: #ffff00;
background-color: #003366;
}

ul.navlist li a:active
{
color: #cccccc;
background-color: #003366;
border: 1px #ffffff inset;
}

ul.subnavlist { display: none; }
ul.subnavlist li { float: none; }

ul.subnavlist li a
{
padding: 0px;
margin: 0px;
}

ul.navlist li:hover ul.subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
}

ul.navlist li:hover ul.subnavlist li a
{
display: block;
width: 70px;
border: none;
padding: 2px;
}

Allerdings hab ich im moment noch Fehler im Code, finde diese aber nicht:
- Im IE7: Alles wird angezeigt, nur die Subitems werden nicht unterhalb des "hauptmenüs" dargestellt, sondern rechts daneben.


Hier der Link zum Beispiel:
http://www.spg-axams-goetzens.com/menutest.html

 

[Maik]

Hi,

entweder entfernst du in diesem Regelblock die position:absolute-Deklaration:

ul.navlist li:hover ul.subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
}

oder du erweiterst das Stylesheet folgendermaßen:

ul.navlist li { float: left; position:relative; }

ul.navlist li:hover ul.subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
left:0;
top:18px;
}

Was die mangelnde Funktionalität im IE6 betrifft (die Submenüs werden nicht geöffnet), empfehle ich dir Suckerfish Dropdowns, oder du schaust dich bei Stu Nicholls' Dropdown-Menüs um, wenn's in ihm ohne Javascript funktionieren soll.

mfg Maik

 

[socke999]

ah, ja , danke!