Beste leden,
Ik ben bezig met een dropdown menu maar er zijn een aantal problemen.
Probleem1: wanneer ik een link in het menu aanklik schuift het hele menu in een keer (het blijft niet stil staan op positie)
Probleem2: er is enkel een hover en deze moet ook een achtergrond wit bevatten.
Probleem3: de tekst staat niet netjes in het submenu.
Probleem4: er word met heel veel code gewerkt, kan dit kleiner? zoja hoe doe ik dat.
PHP
#menu { color: #fff; background: url('images/topmenu.png'); height: 35px; width: 950px; }
ul.menu, li.menu { list-style-type: none; margin: 0px; padding: 10px auto; margin-top: 0px; }
#nav { height: 0px; border-top: 10; height: 15px; }
#nav ul { border-top: 10; list-style-type: none; margin: 0; padding: 0; font-size: 8pt; text-transform: uppercase; width: auto; position: relative; }
#nav ul li { float: left; color: #fff; text-align: center; font-weight: normal; width: auto; }
#nav ul li a { display: block; padding: 0px 10px; color: #000; text-decoration: none; text-align: left; color: #FFF; }
/* 2nd Child menu */
#nav .menu li ul {position: absolute; width: 12em; margin: 0; display: none; text-transform: none; }
#nav .menu li ul a { width: 150px; padding: 5px 5px 5px 5px; background: #041e31; filter:alpha(opacity=70); font-size: 8pt; color: #fff; border: 0;}
/* 2nd Child link hover */
#nav .menu li ul a:hover { color: #fff; background: #000; }
/* Show and hide */
#nav .menu li:hover ul, #nav .menu li a:focus ul, #nav .menu li.subMenu ul {display: block;}
#nav .menu li ul ul { display: none;}
Toon Meer
Zoals jullie zien een hele grote code voor 1 klein menu. wie kan me helpen want mijn ervaring in css is niet zo goed.