dropdown

Status
Niet open voor verdere reacties.
D

dj technics

Gebruiker
Lid geworden
1 sep 2007
Berichten
367
he,

ik heb al enkele jaren bezig met webdeveloping maar ik heb mij nooit echt verdiept in css.
daarom ben ik onlangs gestart met een beetje verder te gaan dan positioneren en kleuren met css en ik moet zeggen dat het vrij goed gaat.

nu zit ik met mijn eerste grote probleem. ik heb het disign voor een nieuwe website af. nu wil ik enkel nog een dropdown menu'tje en alles wat afwerken met javascript en php (maar dat is voor later).

nu ben ik begonnen aan het dropdown menu'tje maar ik krijg niets te voorschijn. ik denk dat ik ergens een display over het hoofd zie maar ik vind het na 3 uur zoeken nog steeds niet.

ik zal de html alvast geven

HTML: 
<nav id="dropdown"> class="grid_17">
				<ul
					<li><a href="#" class="selected">HOME</a></li>
					<li><a href="#">FOTO'S</a>
						<ul>
							<li><a href="#">test 1</a></li>
							<li><a href="#">test 2</a></li>
						</ul>
					</li>
					<li><a href="#">PORTFOLIO</a></li>
					<li><a href="#">BLOG</a></li>
					<li><a href="#">CONTACT</a></li>
				</ul>
			</nav>

en nu de css
HTML: 
/*
 * DROPDOWN
 */
#dropdown li ul{
	display: none;
	position: absolute;
	left: 0;
	padding: 0; margin: 0;
	top: 100%;
}

#dropdown li:hover > ul{
	display: block;
}

#dropdown li ul li, #nav li ul li a{
	float: none;
}

#dropdown li ul li{
	_display: inline; /* for ie6 */
}

#dropdown li ul li a{
	width: 150px;
	display: block;
}

/* sub-sub menu */
#dropdown li ul li ul{
	display: none;
}

#dropdown li ul li:hover ul{
	left: 100%;
	top: 0;
}

en de url is http://test.matcode.be/design.

ik hoop echt dat jullie mij kunnen helpen

P.S. ik ga ondertussen reeds door met enkele bijkomde zaken, dus wanneer jullie de url bezoek kan het er wel eens vreemd uitzien.

alvast bedankt

dj technics
 
Laatst bewerkt:
Hoi dj technics,
Ik ben ook een paar kwartiertjes bezig geweest (in Firefox3.5.14 met Firebug en de Webdeveloper Toolbar [css-edit]), maar met de beste wil van de wereld kan ik 'm ook niet aan de praat krijgen.
Het lijkt wel alsof de hele <ul> van het submenu niet getoond kan worden. :eek:
  • Het ligt in elk geval niet aan de andere stylesheets dan de style.css (zoals de reset.css enz.), want als je alle andere stylesheets uitschakelt blijft ie het niet doen.
Mijn vermoeden is dat het aan de gebruikte html5 ligt: want FF3.5.14 ondersteunt geen html5.
  • Nu zullen een aantal nieuwere versies van de browsers de html5 voor de <nav> wel ondersteunen, maar wellicht niet allemaal. In de laatste Chrome-versie werkt 't trouwens ook niet (maar het zou ook een css-tekortkoming kunnen zijn).
Lang niet iedereen van het grote publiek zal echter een html5 ondersteunende browser(versie) hebben!
Ik zou daarom het zekere voor het onzekere nemen, en voorlopig nog afzien van html5. Dan zal het drop-down menu'tje zeker geen probleem vormen; en anders is het makkelijk op te lossen.
  • Zie ook hier op het forum. :)
===
O, ik zie nu, dat de pagina niet valideert in html5 ! :rolleyes: *)
De html-validator geeft daarop zo'n 20 errors.
Bv. de eerste regel is al fout, er staat:
HTML: 
<!DOCUMENT HTML>
... moet zijn:
<!DOCTYPE html>
Met vriendelijke groet,
CSShunter
___________
*) Ik had m'n eigen handtekening beter moeten lezen! ;)
 
Laatst bewerkt:
Display is het probleem niet, er zijn wel en aantal andere problemen.
- Je hebt een aantal keren overflow:hidden; gebruikt, hierdoor wordt je dropdown afgeknipt, voor het menu en de elementen daarin dus overflow:visible; gebruiken.
- nav ul li moet position:relative; meekrijgen, anders komt je menu niet op de goede plek terecht
- #dropdown li:hover > ul moet top:58px krijgen, om onder het menu uit te komen, en z-index:100; anders blijft een deel achter het grote bruine blok verborgen.

Het kan zijn dat een aantal van deze punten niet meer nodig zijn na het oplossen van de HTML fouten.

Om de nieuwe HTML5 elementen in oudere browsers te laten werken kun je trouwens de HTML5 shiv gebruiken.

@CSShunter, waarom zo'n oude versie van FF?
 
@Naarling:
Ha, ik loop altijd expres wat achter op de ontwikkelingen, zodat ik vrijwel zeker weet dat "het grote publiek" (dat niet altijd even snel is met updaten) op een goede ontvangst van mijn wrochtsels kan rekenen. *)
Een aantal publieksgroepen (ouderen, PC-beginnelingen e.d.) zijn niet zo snel, en die wil ik ook graag bedienen. Ook blijken in sommige kantooromgevingen de beheerders niet accuraat om te gaan met browser-updates (of blijven ze bewust op een oudere versie hangen, omdat anders hun intranet -- ook niet goed gebouwd, natuurlijk -- naar de haaien gaat).

Maar tegenwoordig test ik al bijna niet meer op IE6. ;)

Groetjes,
CSShunter
_________
*) Bijkomende reden: voor plug-ins als de Webdeveloper Toolbar e.d. heb ik gemerkt dat die een zekere incubatietijd nodig hebben voordat ze optimaal in een nieuwe FF-versie werken. Soms wel 3/4 jaar voordat zo'n op zich erg nuttige add-on het weer doet.
 
HTML: 
<nav id="dropdown"> class="grid_17"> <!-- wat doet dat groter dan teken hier na dropdown -->
                <ul
                    <li><a href="#" class="selected">HOME</a></li>
                    <li><a href="#">FOTO'S</a>
                        <ul>
                            <li><a href="#">test 1</a></li>
                            <li><a href="#">test 2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">PORTFOLIO</a></li>
                    <li><a href="#">BLOG</a></li>
                    <li><a href="#">CONTACT</a></li>
                </ul>
            </nav>
 
wat doet dat groter dan teken hier na dropdown?
Klik om te vergroten...
Hetzelfde als een stukje verder <a href:"#">: tikfoutje en html-error. ;)

Het aantal html-fouten is nu trouwens opgelopen van 20 naar 52 errors. :eek:
Oorzaak: er is een Doctype XHTML1.0 Strict van gemaakt, terwijl de html5 codes nog steeds gebruikt worden.

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan