floats and absolute positioning

[jimmyshoes]

I am trying to create a group of links each with a drop down box to create the following

lnk1 lnk2
Box1 Box2

The code I have devised works fine in Firefox but is a jumbled mess in ie (and maybe safari?)

I can achieve my desired effect without floats ( using just absolute and relative positioning) but I'm curious about what I am doing wrong

<style>
.dropdown { float:left; }
.dropdownlink  {position:relative;padding-left:5px;}
.listitem { position:absolute }
</style>


<div class="dropdown">
	<div class="dropdownlink">lnk1
		<div class="listitem">Box1</div>
	</div>
</div>

<div class="dropdown">
	<div class="dropdownlink">lnk2
		<div class="listitem">Box2</div>
	</div>
</div>

 

[feherke]

Hi

Usually no much good results from the combination of [tt]float[/tt] and [tt]position[/tt]. Why are using those [tt]position[/tt]s anyway ? For me it looks good without them too. ( Tested just in FireFox, I have no Explorer. )

Feherke.

http://free.rootshell.be/~feherke/

 

[jimmyshoes]

I'm trying to create drop down menus on each link in a navigation menu. I thought I'd use absloute positioning to stop divs lower on the page getting pushed down. Am i going about this the wrong way?

 

[jimmyshoes]

Well here's the solution, works in IE7 and FF
I'm thinking of using this to create a navigation bar with drop down menus for each link
But is it good practice to mix floats and absolute positioning like this?

<style>
.dropdown { float:left;padding-left:5px; }
.listitem { position:absolute;}
</style>


<div class="dropdown">
	<div>Lnk1</div>
	<div class="listitem">123</div>
</div>

<div class="dropdown">
	<div>Lnk2</div>
	<div class="listitem">456</div>
</div>

 

[Vragabond]

Have you ever thought of using an already developed solution that is proven to work well, like suckerfish dropdowns?

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[jimmyshoes]

Thanks for the tip. Well it looks like you CAN use floats with absolute positioning when creating drop downs this way, so I was on the right track!

 

[oenablx]

If you have Dreamweaver Try Spry Menu Bar its easy, tableless, and have a option whether you want it vertical or horazontial. The scripting and css is done for you but you can customize the style to your websites layout.

Its just a couple clicks away and in a matter of seconds your nav is up and working.

Go to INSERT -> SPRY -> SPRY MENU BAR
at the top of your screen.

Customer Services,
Call Center Services,
IVR Services, Database Services and Web Services