Jag lade ner mitt försök att implementera en css drop down-meny eftersom den renderades så pass olika i IE och Firefox och mest ställde till med problem.
Nu har jag börjat på en helt egen meny som är enklare i i sin funktion och är uppbyggd med följande HTML-kod:
<ul id="nav" style="position: relative; top: -10px; left: -43px;">
<li><a href="#">Min sida</a></li>
<ul>
<li><a href="#">Inställningar</a></li>
<li><a href="#">Test</a></li>
</ul>
<li><a href="#">Flygutbildning</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Artiklar</a></li>
</ul>
CSS-kod:
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
/*line-height: 1;*/
font-size: 12px;
}
#nav a {
/*display: block;*/
width: auto;
padding: 2px 4px 2px 4px;
font-weight: none;
color: #000;
text-decoration: none;
font-weight: bold;
}
#nav li {
float: left;
padding-right: 10px;
width: auto;
list-style-type: none;
}
#nav li ul { /* second-level lists */
/*position: relative;*/
/*float: left;*/
/*top: 20px;*/
background: #fff;
width: auto;
list-style-type: none;
text-align: left;
}
#nav li a:hover, #nav li:active {
background-color: #00A0DB;
font-weight: bold;
color: #fff;
}
Jag har valt att använda mig av <li>- och <ul>-taggarna för att skapa min meny. Huvudnivån är <li> varpå det kommer en nivå under som är <ul><li>.
Mitt problem nu är att positionera <ul><li>-nivån som jag vill ha under nivå 1 och placerat längst till vänster. Underrubrikerna "inställningar" och "test" skall exempelvis dyka upp när jag för musen över "min sida" som finns på första nivån. Hur skriver man detta i CSS-koden? Har inte själv lyckats hitta några bra och enkla exempel på detta förfarande. Sedan har jag inte lärt mig så bra hur man nästlar CSS-satser vilket gör det hela ännu lite svårare.
:e
