• Login
  • Register
  • Zoek
This Thread
  • Everywhere
  • This Thread
  • This Forum
  • Articles
  • Pages
  • Forum
  • Filebase Entry
  • More Options

ICTscripters

Dé plek voor IT

Dé plek voor IT

Login

Geavanceerde opties
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
  3. ICT Nieuws
  4. Blog
  5. Marktplaats
    1. Werk
    2. Advertenties
    3. Domeinnamen
    4. Websites
    5. Design & lay-outs
    6. Scripts
    7. Overige
  6. Design
  7. Leden
    1. Actieve bezoekers
    2. Team
    3. Leden zoeken
  8. Downloads
  9. Goedkope domeinnamen
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
  3. ICT Nieuws
  4. Blog
  5. Marktplaats
    1. Werk
    2. Advertenties
    3. Domeinnamen
    4. Websites
    5. Design & lay-outs
    6. Scripts
    7. Overige
  6. Design
  7. Leden
    1. Actieve bezoekers
    2. Team
    3. Leden zoeken
  8. Downloads
  9. Goedkope domeinnamen
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
  3. ICT Nieuws
  4. Blog
  5. Marktplaats
    1. Werk
    2. Advertenties
    3. Domeinnamen
    4. Websites
    5. Design & lay-outs
    6. Scripts
    7. Overige
  6. Design
  7. Leden
    1. Actieve bezoekers
    2. Team
    3. Leden zoeken
  8. Downloads
  9. Goedkope domeinnamen
  1. Dé plek voor IT - ICTscripters
  2. Forum
  3. Scripting & programmeren
  4. (X)HTML + XML + CSS

Forum

  • Ictscripters Chat

    Frenzo.Brouwer 9 maart 2026 om 21:31
  • Help testers nodig voor android app Urgent

    Servertjee 20 februari 2026 om 12:07
  • Partner Gezocht om meerdere NFT Collecties op Open Sea te Plaatsen

    Servertjee 20 februari 2026 om 12:06
  • Afspraken systeem met planbeperking

    Jeffrey.Hoekman 20 februari 2026 om 11:52
  • Developer Gezocht

    Servertjee 19 februari 2026 om 17:31
  • Na 15 jaar terug van weggeweest: iCriminals.nl is terug (BETA)!

    Servertjee 18 februari 2026 om 16:57
  • Op zoek naar de legends

    Syntax 5 januari 2026 om 13:50
  • [FREE] WeFact Hosting module

    Jeroen.G 13 oktober 2025 om 14:09

Marktplaats

  • Domeinportfolio uitkuis

    Syntax 19 maart 2026 om 10:18
  • Heel wat sterke domeinen > 2 letters, 3 letters, premiums

    Michael DW 11 maart 2026 om 12:12
  • 367 Nieuwe Domeinnamen Februari 2026

    shiga 1 maart 2026 om 14:50

mouse over menu

  • R-Mijnten
  • 1 augustus 2012 om 14:59
  • Closed
  • R-Mijnten
    Skydiving!
    Ontvangen Reacties
    2
    Berichten
    1.439
    • 1 augustus 2012 om 14:59
    • #1

    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>
    Toon Meer
    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;
    }
    Toon Meer

    Alvast bedankt!

  • Guest, wil je besparen op je domeinnamen? (ad)
  • NielsB
    Junior (Web)Developer
    Berichten
    948
    • 1 augustus 2012 om 15:24
    • #2

    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 ! ;)

    School
    Tweedejaars Informatica Student @ Hogeschool Rotterdam.

    Webtalen
    - PHP ( OOP )
    - SQL
    - JavaScript i.c.m. jQuery framework
    - (x)HTML
    - CSS
    - Actionscript
    - XML

    Programmeertalen
    - Java
    - C#
    - Ruby i.c.m. on Rails framework

  • jopitan
    Professional
    Berichten
    684
    • 1 augustus 2012 om 15:35
    • #3

    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;
    					});
    				}
    			});
    		});
    Toon Meer


    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;
    	}
    Toon Meer

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

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

    Kast: HAF922 | CPU: I7-930 @ 4.0GHz | CPU Cooler: Noctua NH-D14 | HDD0: Crucial M4 128GB, HDD1: Kingston SSD 64GB, HDD2/3: WD Black & Green 1TB, HDD4: Seagate 1.5TB | Mem: Kingston HyperX 12GB @ 1600MHz | Graphics: Crossfire HD6970 | Res: 5760x1080

  • R-Mijnten
    Skydiving!
    Ontvangen Reacties
    2
    Berichten
    1.439
    • 1 augustus 2012 om 16:22
    • #4

    Probleem opgelost!

    Thanks Jopitan!:cheer:

    :slotje:

Participate now!

Heb je nog geen account? Registreer je nu en word deel van onze community!

Maak een account aan Login

ICT Nieuws

  • Samsung zal miljoenen verdienen aan Apple iPhone Fold dankzij zijn 12GB RAM

    ICTscripters 11 maart 2026 om 22:42
  • Apple heeft zojuist iOS 26.4 Beta 4 vrijgegeven: hier is de verwachte lanceerdatum.

    ICTscripters 11 maart 2026 om 12:01
  • Kritieke kwetsbaarheid in Nginx UI bedreigt gevoelige data

    ICTscripters 10 maart 2026 om 18:29

Blogs

  • Functioneel ontwerp

    Dees 28 december 2014 om 12:38
  • Access Control List implementatie in PHP/MySQL - deel 1/2

    FangorN 28 december 2018 om 12:35
  • Access Control List implementatie in PHP/MySQL - deel 2/2

    FangorN 29 december 2018 om 12:37

Gebruikers die dit topic bekijken

  • 4 Gasten
  1. Marktplaats
  2. Design
  3. Voorwaarden
  4. Ons team
  5. Leden
  6. Geschiedenis
  7. Regels
  8. Links
  9. Privacy Policy
ICTscripters ©2005 - 2026 , goedkope hosting door DiMoWeb.com, BE0558.915.582
Sponsors: Beste kattenhotel provincie Antwerpen | Beste Zetes eid kaartlezer webshop
Style: Nexus by cls-design
Stylename
Nexus
Manufacturer
cls-design
Licence
Commercial styles
Help
Supportforum
Visit cls-design