CSS menu... ik geeft het op!

Ik geef het echt op!! Na meerdere dagen #&$)(#@$ hiermee zie ik het echt niet meer zitten... Ik hoef geen eens uitleg meer, kan iemand dit fixen voor me...

Uitklapje moet horizontaal net als de eerste rij… Verder functioneel met uitklapje bij rollover.

Daarna moet ik nog een downstate met desecent selcetors gaan doen… :cry: :cry: :cry:

[code:1:39afa7d9c4]<!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>Untitled Document</title>
<style type="text/css">
<!–
#menu {
background: #FFFFFF;
float: left;
margin-left: 6em;
width: 75%;
z-index: 500;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 6em;
float: left;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
margin: 0px;
padding: 4px 6px;
border: solid #FFFFFF 1px;
}

#menu h2 {
color: #fff;
background: #FEC50B;
text-transform: uppercase;
font: bold 14px/16px arial, helvetica, sans-serif;
padding: 4px 6px;
}

#menu a {
color: #000;
background: #EAEFE0;
text-decoration: none;
}

#menu a:hover {
color: #5F8717;
background: #FFFFCC;
}

#menu li {
position: relative;
}

#menu ul ul {
position: absolute;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{
display: none;
}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{
display: block;
}

</style>
</head>

<body>
<div id="menu">

<ul>
<li><h2>KOP</h2>
<ul>
<li><a href="#">Blablabla </a></li>
<li><a href="#">Blablabla </a></li>
<li><a href="#">Blablabla </a></li>
<li><a href="#">Blablabla </a></li>
</ul>
</li>
</ul>

<ul>
<li><h2>NOG EEN KOP</h2>
<ul>
<li><a href="#">Blablabla </a></li>
<li><a href="#">Blablabla </a></li>
<li><a href="#">Blablabla </a></li>
</ul>
</li>
</ul>

<ul>
<li><h2>LAATSTE KOP</h2>
<ul>
<li><a href="#">Blablabla </a></li>
<li><a href="#">Blablabla</a></li>
</ul>
</li>
</ul>

</div></body>
</html>
[/code:1:39afa7d9c4]

Je hebt de ul op 6em gezet, dus dat worden ze allemaal en dan passen de li in de tweede ul niet meer naast elkaar. Verder moeten deze nog worden gefloat.

Denk dat je rest wel weer zelf kan doen. Succes

[code:1:598e98a172]
<!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>Untitled Document</title>
<style type="text/css">
<!–
#menu {
background: #FFFFFF;
float: left;
margin-left: 6em;
width: 75%;
z-index: 500;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 6em;
float: left;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
margin: 0px;
padding: 4px 6px;
border: solid #FFFFFF 1px;
}

#menu h2 {
color: #fff;
background: #FEC50B;
text-transform: uppercase;
font: bold 14px/16px arial, helvetica, sans-serif;
padding: 4px 6px;
}

#menu a {
color: #000;
background: #EAEFE0;
text-decoration: none;
}

#menu a:hover {
color: #5F8717;
background: #FFFFCC;
}

#menu li {
position: relative;
}

#menu ul ul {
position: absolute;
width: 20em; // TOEGEVOEGD
}

#menu li li {
float: left; // TOEGEVOEGD
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{
display: none;
}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{
display: block;
}

</style>
</head>

<body>
<div id="menu">

<ul>
<li><h2>KOP</h2>
<ul>
<li><a href="#">Blablabla </a></li>
<li><a href="#">Blablabla </a></li>
<li><a href="#">Blablabla </a></li>
<li><a href="#">Blablabla </a></li>
</ul>
</li>
</ul>

<ul>
<li><h2>NOG EEN KOP</h2>
<ul>
<li><a href="#">Blablabla </a></li>
<li><a href="#">Blablabla </a></li>
<li><a href="#">Blablabla </a></li>
</ul>
</li>
</ul>

<ul>
<li><h2>LAATSTE KOP</h2>
<ul>
<li><a href="#">Blablabla </a></li>
<li><a href="#">Blablabla</a></li>
</ul>
</li>
</ul>

</div></body>
</html> [/code:1:598e98a172]

Voor de zekerheid misschien bij [code:1:ba18d14eda]#menu h2 { white-space: nowrap; //TOEVOEGEN }[/code:1:ba18d14eda] dan kun je [code:1:ba18d14eda]#menu ul { width: 6em; //VERWIJDEREN } [/code:1:ba18d14eda] Zodat de button breedte zich aanpast aan de inhoud (indien gewenst).

Verder werkt dit script sowieso niet in Internet Explorer (Win) omdat IE :hover op andere elementen dan <a> niet ondersteunt. Dus er klapt niks uit.

(Het CSS commentaar moet natuurlijk tussen /* en */ staan :wink: )

Wel als je de [url=http://www.xs4all.nl/~peterned/csshover.html]Whatever:hover[/url] techniek gebruikt...

[quote:d845eab52c="Jack4ya"]Ik geef het echt op!! Na meerdere dagen #&$)(#@$ hiermee zie ik het echt niet meer zitten... Ik hoef geen eens uitleg meer, kan iemand dit fixen voor me... [/quote:d845eab52c]

ehm,… ik denk dat mensen je hier wel goed kunnen sturen, maar als je de volgende
keer ergens niet uitkomt laat je het dan weer iemand anders oplossen?

prima hoor, maar dan schrijf ik ook een factuurtje :stuck_out_tongue:

nee zonder dollen, het is natuurlijk juist wel handig als je uitleg krijgt, dan heb niet
alleen jij er wat aan, maar is het ook nuttig voor anderen, daar is het forum juist voor :slight_smile:

[quote:acad383464="Henkie"]Verder werkt dit script sowieso niet in Internet Explorer (Win) omdat IE :hover op andere elementen dan <a> niet ondersteunt. Dus er klapt niks uit.[/quote:acad383464]

…dan verander je de <h2> tags in de eerste <li> in <a> tags…

wel even het volgende in de CSS toevoegen:
#menu a {
display: block
…plus de rest van de formattering van “menu h2”…
}

[quote:7e4063f9ac="madmax"][quote:7e4063f9ac="Henkie"]Verder werkt dit script sowieso niet in Internet Explorer (Win) omdat IE :hover op andere elementen dan <a> niet ondersteunt. Dus er klapt niks uit.[/quote:7e4063f9ac]

…dan verander je de <h2> tags in de eerste <li> in <a> tags…
[/quote:7e4063f9ac]

Ow? en de semantische betekenis van HTML tags dan.

Syndic heeft het correcte antwoord al gegeven.

[quote:3e8e0fd7f8="tennapel"]Ow? en de semantische betekenis van HTML tags dan. Syndic heeft het correcte antwoord al gegeven.[/quote:3e8e0fd7f8]

Dan zet je dus wel de link van je eerste submenuitem erin. Werkt dan gewoon in IE, zonder (bloated) scripting in tegenstelling tot de whatever:hover methode.

Ik irriteer me aan je reactie… alsof er maar één juist antwoord is?