floating menu met dropdown [CSS]
ik heb een menu bovenin mijn header staan. Dit menu bevat een submenu:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<header>
<ul class="navigation">
<li><a href="#" id="active">menu1</a></li
><li><a href="#">menu2</a>
<ul>
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul></li
><li><a href="#">menu3</a></li
><li><a href="#">menu4</a></li>
</ul>
<div class="outer"><div class="inner">
<img src="imgs/quote.png">
</div></div>
</header>
<ul class="navigation">
<li><a href="#" id="active">menu1</a></li
><li><a href="#">menu2</a>
<ul>
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul></li
><li><a href="#">menu3</a></li
><li><a href="#">menu4</a></li>
</ul>
<div class="outer"><div class="inner">
<img src="imgs/quote.png">
</div></div>
</header>
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
header {
width: 100%;
background-color: #333333;
text-align: center;
overflow: hidden;
}
header .navigation {
background:#005555;
padding:0;
margin:0;
list-style-type:none;
height:30px;
z-index: 999999;
}
header .navigation li { float:left; }
header .navigation li a {
padding:9px 20px;
display:block;
color:#fff;
text-decoration:none;
font:12px arial, verdana, sans-serif;
}
/* Submenu */
header .navigation ul {
position:absolute;
left:-9999px;
top:-9999px;
list-style-type:none;
}
header .navigation li:hover { position:relative; background:#5FD367; }
header .navigation li:hover ul {
left:0px;
top:30px;
background:#5FD367;
padding:0px;
}
header .navigation li:hover ul li a {
padding:5px;
display:block;
width:168px;
text-indent:15px;
background-color:#5FD367;
}
header .navigation li:hover ul li a:hover { background:#005555; }
/* Big quote */
header .outer {
width: 100%;
min-width: 1024px;
margin: 0 auto;
overflow: hidden;
padding: 0;
margin-bottom: -5px;
}
header .inner {
position:relative;
float: right;
right: 50%;
padding: 0px;
margin: 0px;
}
header .inner img {
position: relative;
right:-50%;
height: 300px;
width: auto;
padding: 0px;
margin: 0px;
}
width: 100%;
background-color: #333333;
text-align: center;
overflow: hidden;
}
header .navigation {
background:#005555;
padding:0;
margin:0;
list-style-type:none;
height:30px;
z-index: 999999;
}
header .navigation li { float:left; }
header .navigation li a {
padding:9px 20px;
display:block;
color:#fff;
text-decoration:none;
font:12px arial, verdana, sans-serif;
}
/* Submenu */
header .navigation ul {
position:absolute;
left:-9999px;
top:-9999px;
list-style-type:none;
}
header .navigation li:hover { position:relative; background:#5FD367; }
header .navigation li:hover ul {
left:0px;
top:30px;
background:#5FD367;
padding:0px;
}
header .navigation li:hover ul li a {
padding:5px;
display:block;
width:168px;
text-indent:15px;
background-color:#5FD367;
}
header .navigation li:hover ul li a:hover { background:#005555; }
/* Big quote */
header .outer {
width: 100%;
min-width: 1024px;
margin: 0 auto;
overflow: hidden;
padding: 0;
margin-bottom: -5px;
}
header .inner {
position:relative;
float: right;
right: 50%;
padding: 0px;
margin: 0px;
}
header .inner img {
position: relative;
right:-50%;
height: 300px;
width: auto;
padding: 0px;
margin: 0px;
}
Ik heb al gespeeld met z-index etc, maar ik krijg mij menu niet bovenop de 'quote' image. & div's
Dennis WhoCares op 01/09/2015 20:59:59:
Hi all,
ik heb een menu bovenin mijn header staan. Dit menu bevat een submenu:
...
Ik heb al gespeeld met z-index etc, maar ik krijg mij menu niet bovenop de 'quote' image. & div's
ik heb een menu bovenin mijn header staan. Dit menu bevat een submenu:
...
Ik heb al gespeeld met z-index etc, maar ik krijg mij menu niet bovenop de 'quote' image. & div's
Jouw code gekopieerd en geplakt in een html document, en het werkt prima hier.
http://imgur.com/ZOXQgCr
Buiten dit allemaal om, hou het lekker simpel en go compatibel. Je kan je eigen menu maken die werkt op jouw browser maar misschien net iets anders op een andere.
Superfish is een CSS menu die werkt om meerdere browsers en die dezelfde style heeft als jouw menu.
Gewijzigd op 01/09/2015 21:18:01 door Johan K
Bedankt voor je reactie, zie wel dat je geen image hebt gebruikt
Ik heb onder t menu een grote image geplaatst, en het submenu valt dan onder de image, daarom heb ik dat stuk ook aangegeven, welli ht dat t daaraan ligt
Ik zal eens kijken naar de menu welke je noemde, maar wil de site eigenlijk zo klein mogelijk houden (in data)
Daarbin werk ik op n mac met voornamelijk firefox maar ook safari, chrome en IE via parallels coherence om alles naast elkaar te zetten
Dennis WhoCares op 01/09/2015 21:34:37:
Hi Johan,
Bedankt voor je reactie, zie wel dat je geen image hebt gebruikt
Ik heb onder t menu een grote image geplaatst, en het submenu valt dan onder de image, daarom heb ik dat stuk ook aangegeven, welli ht dat t daaraan ligt
Ik zal eens kijken naar de menu welke je noemde, maar wil de site eigenlijk zo klein mogelijk houden (in data)
Daarbin werk ik op n mac met voornamelijk firefox maar ook safari, chrome en IE via parallels coherence om alles naast elkaar te zetten
Bedankt voor je reactie, zie wel dat je geen image hebt gebruikt
Ik heb onder t menu een grote image geplaatst, en het submenu valt dan onder de image, daarom heb ik dat stuk ook aangegeven, welli ht dat t daaraan ligt
Ik zal eens kijken naar de menu welke je noemde, maar wil de site eigenlijk zo klein mogelijk houden (in data)
Daarbin werk ik op n mac met voornamelijk firefox maar ook safari, chrome en IE via parallels coherence om alles naast elkaar te zetten
Aah ik zie wat je bedoeld.
Code (php)
1
header .navigation li { float:left; z-index:1;}
Lost dat probleem op.
Gewijzigd op 01/09/2015 21:48:03 door Johan K
Enorm bedankt Johan!
Ik heb het volgende menu gemaakt: jsfiddle
Maar ik krijg op geen enkele mogelijkheid de rounded borders in de submenu's goed..
Zal een klein puntje zijn denk ik.. Iemand ? :)
Bij de hover op de onderste li item raak ik de borders kwijt.
Gewijzigd op 19/01/2016 07:59:26 door Dennis WhoCares
Niemand ?
Gewijzigd op 04/02/2016 19:19:27 door Y S
zoiets had ik ook al geprobeerd, maar dat moet dus alleen bij de laatste ul li ul li a
---
Heb het gefixed, om een of andere reden moest het op allbij:
#navigation li:hover ul li:last-child:hover, #navigation li:hover ul li:last-child:hover a
Op de een of ander, werkte niet goed.
Gewijzigd op 04/02/2016 20:38:26 door Dennis WhoCares