PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
B

[CSS] ul li en div met (sub)menu

Door Boris Mattijssen op 07-02-2009 22:28
1.584 views
Hallo allemaal!

Ik ben bezig met een site: http://www.bwebsites.nl/trommelvlies
Alleen zit ik ff met het menu te kutten.

Ik gebruik deze code voor het menu:

.nav ul{
	list-style:none;
	padding: 0;
	margin: 0;
}

.nav a{
	display:block;
	text-decoration:none;
	color:#000000;
}

.nav li a{
	padding-right: 30px;
}

.nav a:hover {
	color: #2b98ff;
}

.nav li ul li a{
	width: 210px;
	padding-right: 3px;
	line-height: 200%;
}

#nowPlayingGroup ul li a{
	width: 250px;
	padding-right: 3px;
	line-height: 150%;
}

.nav li{
	float:left;
	position:relative;
}
 
.nav li div{
	position:absolute;
	top:-999em; /* display:none; */
	background: transparent url(images/submenuBack2.png) no-repeat scroll 0 100%;
	width: 888px;
	padding: 0 0 10px 20px;
}

.nav li:hover div,
.nav li.sfhover div{
	position: <?=$_GET['position'] == 'relative' ? 'relative' : 'absolute'?>;
	top:auto; /* display:block; */
	left: 224px;
}


En dan even met de nadruk op:

.nav li div{
	position:absolute;
	top:-999em; /* display:none; */
	background: transparent url(images/submenuBack2.png) no-repeat scroll 0 100%;
	width: 888px;
	padding: 0 0 10px 20px;
}

.nav li:hover div,
.nav li.sfhover div{
	position: <?=$_GET['position'] == 'relative' ? 'relative' : 'absolute'?>;
	top:auto; /* display:block; */
	left: 224px;
}


Als je naar http://www.bwebsites.nl/trommelvlies/?position=absolute
gaat zie je dat het opzich goed gaat, alleen wil ik een menu net als http://www.kieskeurig.nl . Dus over de hele breedte van de navigatiebalk gespreid.
Als je naar http://www.bwebsites.nl/trommelvlies/?position=relative gaat zie dat hij erg vreemd gaat doen. Ik had zelf gedacht dat het goed zou gaan. Maar niet dus.

Heeft iemand hier misschien een oplossing voor dit probleem?

Alvast bedankt!

Groeten,
Boris
Eddy E
08-02-2009 08:52
Ik zie geen verschil tussen relatief/absolute.

Dat zou ook niet moeten.
Wil je het echt spreiden: gebruik procenten!
B
Boris Mattijssen
08-02-2009 10:00
Hmm..
Zijn er hier nog meer mensen die geen verschil zien?
Ik heb er zelf namelijk wel degelijk last van.

En Eddy, wat bedoel je precies met "werk met procenten"?
Hoe zie jij dat voor je als ik vragen mag?
Martijn Wieringa
08-02-2009 10:07
Misschien kun je wat printscreen's maken van het probleem?
Ik zie ook geen verschil (in FF3 of IE6).
?
Onbekende gebruiker
08-02-2009 11:23
Kijk er ook es in Opera naar, want daar ziet het er nog raarder uit (iig bij mij).
T
Thom
08-02-2009 11:26
Bij mij werkt opera gewoon, net als bij FF3
Jesper Diovo
08-02-2009 11:42
Bij mij (FF3.0.6) werkt het niet. Als je nu die left: 224px; weghaalt? Want volgens mij positioneer je nu vanaf waar de link staat, standaard wordt dan nog eens 224px bij opgeteld, dus zit die er al niet onder.
N
Niek Weevers
08-02-2009 12:48
Als je net als kieskeurig het submenu over de volle breedte van de site wilt, dan zou je de position: relative; op de li weghalen en deze op het menu zelf zetten. Dan kun je het submenu met position: absolute; op left: 0; en top: (hoogte menu); zetten.
B
Boris Mattijssen
08-02-2009 13:04
Niek schreef op 08.02.2009 12:48
Als je net als kieskeurig het submenu over de volle breedte van de site wilt, dan zou je de position: relative; op de li weghalen en deze op het menu zelf zetten. Dan kun je het submenu met position: absolute; op left: 0; en top: (hoogte menu); zetten.


Hallo Niek,

Ik snap niet precies op welke li je bedoelt?
Zou je misschien een voorbeeldje kunnen geven?
Alvast hartelijk bedankt!

Boris
N
Niek Weevers
08-02-2009 13:12
Dit is het makkelijkste en simpelste opbouw (en ook wel de beste)
Dit is het begin, verder uitbouwen moet je natuurlijk nog doen

<ul id="menu">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Item 1">Item 1</a></li>
<li><a href="#" title="Item 2">Item 2</a>
    <ul>
        <li><a href="#" title="Subitem1">Subitem1</a></li>
    </ul>
</li>
<li><a href="#" title="Item 3">Item 3</a></li>
</ul>

css

#menu {
position: relative;
width: 900px;
}

#menu ul {
position: absolute;
left: 0;
top: 20px;
}

Reageren

Inloggen om te reageren