mouse over menu

R-Mijnten

Hallo allemaal,

Ik sukkel nu tegen een klein probleempje aan.
Momenteel ben ik bezig met een submenu mouse over in CSS.
Hoe zorg ik er nu voor dat zodra ik niet over "voetproblemen" ga het menu mooi aansluit bij de rest. Als ik er wel overheen ga moeten ze natuurlijk verschuiven naar beneden.

Menu ingeklapt

Menu uitgeklapt

PHP

<ul class="topmenu">
						<li><a href="index.php?p=voetzorg">Voetzorg</a></li>
						<li><a href="index.php?p=tarieven">Tarieven voetverzorging</a></li>
						<li class="submenu"><a href="index.php?p=voetproblemen">Voetproblemen</a>
							<ul>
								<li><a href="#">Test 1</a></li>
								<li><a href="#">Test 2</a></li>
								<li><a href="#">Test 1</a></li>
							</ul>
						</li>
						<li><a href="index.php?p=producten">Producten Kathleen Kay</a></li>
						<li><a href="index.php?p=foto">Foto's van de praktijk</a></li>
					</ul>

Meer tonen

PHP

ul.topmenu, ul.topmenu ul {
	list-style-image:  url(/images/square.png);
	color: #00b4e4;
	font-size: 14px;
	line-height: 24px;
} 


ul.topmenu li  a{
	color: #646567;
	text-decoration: none;
	font-size: 12px;
	margin-top: 10px;
} 
ul.topmenu li  a:hover{
	color: #00b4e4;
} 


ul.topmenu li ul {
  visibility: hidden; 
  color: #00b4e4;} 
  
ul.topmenu li.submenu:hover ul {
  visibility: visible;
}

Meer tonen

Alvast bedankt!

NielsB

display none en block gebruiken dan haalt die dat lege stuk weg en vervangt die het als je hovert.

daarbij werk met een z-index !

jopitan

Als je van style houdt heb ik dit even snel voor jquery gemaakt:

PHP

$(function() {
			done = 1;
			$("body").on('mouseenter', 'li.submenu', function() {
				if(done == 1) {
					done = 0;
					$('ul', this).toggle(500, function() {
						done = 1;
					});
				}
			});
			$("body").on('mouseleave', 'li.submenu', function() {
				if(done == 1) {
					done = 0;
					$('ul', this).toggle(500, function() {
						done = 1;
					});
				}
			});
		});

Meer tonen

Haal ul.topmenu li.submenu:hover ul uit je css en vervang visibility met display: none; in ul.topmenu li ul.

Als je vragen hebt over waarom ik wat heb gedaan moet je het maar zeggen.

De CSS ziet er bij mij overigens nu zo uit:

PHP

ul.topmenu, ul.topmenu ul { 
		list-style-image:  url(/images/square.png); 
		color: #00b4e4; 
		font-size: 14px; 
		line-height: 24px; 
	}  


	ul.topmenu li  a{ 
		color: #646567; 
		text-decoration: none; 
		font-size: 12px; 
		margin-top: 10px; 
	}  
	
	ul.topmenu li  a:hover{ 
		color: #00b4e4; 
	}  


	ul.topmenu li ul { 
		display: none;
		color: #00b4e4;
	}

Meer tonen

Trouwens probeer geen line-height te gebruiken in menu items, probeer paddings instead

padding: Tpx Rpx Bpx Lpx; (T = Top, R = Right, enzovoort)

R-Mijnten

Probleem opgelost!

Thanks Jopitan!:cheer:

:slotje:

ICTscripters

Dé plek voor IT

Dé plek voor IT

🚀 WE ZOEKEN TESTERS! 🚀

Port Father: beta van een browsergame in Antwerpen 1931, feedback welkom

Luchtvaartsoftware: Hoe technologie de moderne luchtvaart verandert

Hoe gebruiken jullie WhatsApp voor marketing en klantopvolging?

[PROJECT] Gamekeuring.nl - Hét onafhankelijke keuringsplatform voor maffiagames & RPG's!

Ictscripters / Koen

Kweekrijk - van stekje tot Imperium

Crimora.nl

Verschillende domeinen te koop (sommige hebben website / content)

295 Nieuwe Domeinnamen September 2026

Straatbaas.eu – complete Nederlandstalige en Engelstalige online maffia-RPG

mouse over menu

Registratie

Functioneel ontwerp

Access Control List implementatie in PHP/MySQL - deel 1/2

Access Control List implementatie in PHP/MySQL - deel 2/2

Gebruikers die dit topic bekijken