9 replies [Last post]
webcan
Offline
Regular
Last seen: 11 years 32 weeks ago
Timezone: GMT-5
Joined: 2006-03-04
Posts: 11
Points: 0

Hi all,

I've created a menu, with a drop-down, and have two questions, I'm hoping someone can help me with.

First, the complete code and page is available here.

I would like to do two things:

1. Find a way to center the UL within the DIV tag. I have tried: margin-left: auto and margin-right: auto, and margin: 0px auto, and neither of those seem to work.

2. What code do I put in so that "Item 3" stays white when you're mousing over the sub-items? I have figured out the background, but can't get the actual text.

The CSS code is also pasted here:

	#navContainer {
		width: 823px;
		height: 25px;
		float: left;
		overflow: hidden;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 11px;
		background-color: #efe7de;
	}
	
	#navContainer ul, #navContainer ul ul {
		margin: 0px;
		padding: 0px;
		list-style: none;
		line-height: 1;
	}
	
	#navContainer ul li {
		float: left;
	}
	
	#navContainer ul a {
		display: block;
		padding: 7px 14px 6px 14px;
		color: #4a3831;
		text-decoration: none;
	}
	
	#navContainer ul a:hover {
		background-color: #4a3831;
		color: #ffffff;
	}
	
	#navContainer ul li ul {
		position: absolute;
		width: 150px;
		left: -999em;
		background-color: #4a3831;
	}
	
	#navContainer ul li ul li {
		width: 150px;
		border-bottom: #ffffff 1px solid;
	}
	
	#navContainer ul li ul li a {
		color: #ffffff;
	}
	
	#navContainer ul li ul li a:hover {
		background-color: #999999;
	}
	
	#navContainer ul li:hover ul, #navContainer ul li.sfhover ul {
		left: auto;
	}
	
	#navContainer ul li:hover, #navContainer ul li.sfhover {
		background-color: #4a3831;
	}

Would appreciate any suggestions.

Thanks!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 4 years 18 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You might find this article

You might find this article I wrote on centering Suckerfish menus useful: http://www.tyssendesign.com.au/articles/html/centering-a-dropdown-menu/

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

webcan
Offline
Regular
Last seen: 11 years 32 weeks ago
Timezone: GMT-5
Joined: 2006-03-04
Posts: 11
Points: 0

I've read your article - it

I've read your article - it definately works, but I can't figure out why. Sad

I see that you have a couple of options - in my application, the menu is generated dynamically, so I won't know how wide it needs to be. So, I tried integrating it using your second example, Using display: inline (as I understand, this option doesn't require specifying width?), but I think I've missed something. I don't know what the trigger is that I haven't included.

I added,

1. text-align: center -- to the div that contains the UL
2. display: inline and position: relative -- to the UL

Did I miss a key element? Or, did I misunderstand, and this option is for lists where the width is defined?

Thanks,
Peter.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 4 years 18 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Have you updated your link?

Have you updated your link?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

webcan
Offline
Regular
Last seen: 11 years 32 weeks ago
Timezone: GMT-5
Joined: 2006-03-04
Posts: 11
Points: 0

No, I put it back because I

No, I put it back because I messed the whole thing up. Smile :blushing:

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 4 years 18 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Can't help you find where

Can't help you find where you're going wrong if we can't see the code you're using.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

webcan
Offline
Regular
Last seen: 11 years 32 weeks ago
Timezone: GMT-5
Joined: 2006-03-04
Posts: 11
Points: 0

I have posted the revised

Smile

I have posted the revised code, including the three changes I noted above here.

Thank you.

webcan
Offline
Regular
Last seen: 11 years 32 weeks ago
Timezone: GMT-5
Joined: 2006-03-04
Posts: 11
Points: 0

Almost there ...

Hey... OK, I have sort of figured out the dynamic centering here. But, I can't figure out why my sub-menus aren't appearing in the right spot - they should drop-down underneath, not to the right.

Any ideas?

THANK YOU!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 4 years 18 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

This example uses the same

This example uses the same method as you've chosen. Compare the code between the two to see where you've gone wrong.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

webcan
Offline
Regular
Last seen: 11 years 32 weeks ago
Timezone: GMT-5
Joined: 2006-03-04
Posts: 11
Points: 0

Hallelujah! Ok, I finally

Hallelujah! Smile

Ok, I finally got it to work with that example.

Thank you so much for your help!