Problemen met uitlijnen/plaatsen submenu
Het probleem is alsvolgt kijk op: http://www.mthomas.nl/temp/ en gaat met uw muis over home.
Dan verschijnen er onder de grijze balk nu twee items, echter deze items zouden als simpele tekst gewoon in het vak onder home moeten komen dus op de grijze balk, alleen dat wil nu juist niet lukken.
Het onderscheid in de css van lever 1 en level 2 is van de laatste poging daarvoor viel alles onder #menu.
Naar optimalisatie in IE heb ik nog niet gekeken, enkel naar FireFox (IE komt later).
Het stuk css voor dat deel/menu:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
/* ----------------- *
* Menu *
* ----------------- */
#menuBar {
height: 125px;
width: 840px;
margin: 0 auto;
}
/*Removing bullets*/
#menu ul {
list-style: none;
padding: 0;
margin: 0;
}
/*All in one line*/
#menu li {
float: left;
margin: 0px;
}
/*In a box*/
#level1 li a:link, #level1 li a:visited {
float: left;
padding: 5px;
width: 110px;
height: 84px;
display: block;
color: #000000;
border-top: 3px solid #25469a;
text-decoration: none;
text-align: center;
}
#level1 li a:hover {
border-top: 3px solid #A72083;
border-bottom: 3px solid #a72083;
}
#level1 li a:active {
border-top: 3px solid #A72083;
border-bottom: 3px solid #a72083;
}
#menu ul ul {
display: none;
}
#menu ul li:hover ul#level2 {
display: block;
}
#level2 li a:link {
width: 50px;
height: 100px;
border: 0px;
}
* Menu *
* ----------------- */
#menuBar {
height: 125px;
width: 840px;
margin: 0 auto;
}
/*Removing bullets*/
#menu ul {
list-style: none;
padding: 0;
margin: 0;
}
/*All in one line*/
#menu li {
float: left;
margin: 0px;
}
/*In a box*/
#level1 li a:link, #level1 li a:visited {
float: left;
padding: 5px;
width: 110px;
height: 84px;
display: block;
color: #000000;
border-top: 3px solid #25469a;
text-decoration: none;
text-align: center;
}
#level1 li a:hover {
border-top: 3px solid #A72083;
border-bottom: 3px solid #a72083;
}
#level1 li a:active {
border-top: 3px solid #A72083;
border-bottom: 3px solid #a72083;
}
#menu ul ul {
display: none;
}
#menu ul li:hover ul#level2 {
display: block;
}
#level2 li a:link {
width: 50px;
height: 100px;
border: 0px;
}
De html code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!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=UTF-8" />
<title></title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top">
<div id="topMid">
<b class="highlight">Gentresseerd?</b> Stuur een e-mail naar <b class="highlight"><a href="#"></a></b>
</div>
</div>
<div id="header">
</div>
<div id="bar">
<div id="menuBar">
<div id="menu">
<ul id="level1">
<li><a href="index.html">Home</a>
<ul id="level2">
<li><a href="#">Aap</a></li>
<li><a href="#">Noot</a></li>
</ul>
</li>
<li><a href="#">Wortel</a></li>
<li><a href="#">Boon</a></li>
<li><a href="#">Peul</a></li>
<li><a href="#">Erwt</a></li>
<li><a href="#">Prinses</a></li>
<li><a href="#">er op</a></li>
</ul>
</div>
</div>
</div>
<div id="main">
<div id="mainLeft">
Left
</div>
<div id="mainMid">
</div>
<div id="mainRight">
<div id="support">
Right!
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top">
<div id="topMid">
<b class="highlight">Gentresseerd?</b> Stuur een e-mail naar <b class="highlight"><a href="#"></a></b>
</div>
</div>
<div id="header">
</div>
<div id="bar">
<div id="menuBar">
<div id="menu">
<ul id="level1">
<li><a href="index.html">Home</a>
<ul id="level2">
<li><a href="#">Aap</a></li>
<li><a href="#">Noot</a></li>
</ul>
</li>
<li><a href="#">Wortel</a></li>
<li><a href="#">Boon</a></li>
<li><a href="#">Peul</a></li>
<li><a href="#">Erwt</a></li>
<li><a href="#">Prinses</a></li>
<li><a href="#">er op</a></li>
</ul>
</div>
</div>
</div>
<div id="main">
<div id="mainLeft">
Left
</div>
<div id="mainMid">
</div>
<div id="mainRight">
<div id="support">
Right!
</div>
</div>
</div>
</body>
</html>
Er zijn nog geen reacties op dit bericht.