18 replies [Last post]
macamba
macamba's picture
Offline
Regular
Arnhem
Last seen: 11 years 3 weeks ago
Arnhem
Timezone: GMT+1
Joined: 2007-03-22
Posts: 45
Points: 0

Hi all,

Rather a noobish question. I'm working on a horizontal drop down and fold out menu. I have a tinee tiny problem ( :curse: ) with it that all my submenus are displayed under the middle menu position of my main menu. You can see what I mean by looking at http://nvfb.hermod.nl.

This is the css I've been playing with:

#twocols{
/*the columns that gets dropped down over yours might be different*/
	z-index: 20; 
}

#leftcol{
/*the columns that gets dropped down over yours might be different*/
	z-index: 10; 
}

.moduletablemainnav{
	position:relative;
	top: 103px;
	z-index: 100;
	font: 1.0em Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

#mainlevelmainnav,#mainlevelmainnav ul{
	float: left;
	width: 100%;             
	list-style: none;
	line-height: 1em;
	background: #210156;
	color: #DDF3F6;
	font-weight: 700;
	margin: 0;
	padding: 0;
}

/* ---- Top menu level ---- */
#mainlevelmainnav a{
	display: block;
	color: #DDF3F6;
	text-decoration: none;
	margin-right: 15px;
	padding: 0.3em;
}

#mainlevelmainnav li{
	float: left;
	padding: 0;
}

/* ---- Submenus ---- */
#mainlevelmainnav li ul{
	position: absolute;
	left: -999em;
	height: auto;
	width: 11em;
	font-weight: 400;
	background: #3366FF;
	border: #0000CC 1px solid;
	margin: 0;
}

#mainlevelmainnav li li{
	width: 11em;
}

#mainlevelmainnav li ul a{
	width: 11em;
/*	left: 11em;                      */
	color: #FFFFFF;
	font-size: 0.9em;
	line-height: 1em;
	font-weight: 400;
}

#mainlevelmainnav li:hover ul ul,
#mainlevelmainnav li:hover ul ul ul,
#mainlevelmainnav li.sfhover ul ul,
#mainlevelmainnav li.sfhover ul ul ul{
	left: -999em;
}

#mainlevelmainnav li:hover ul,
#mainlevelmainnav li li:hover ul,
#mainlevelmainnav li li li:hover ul,
#mainlevelmainnav li.sfhover ul,
#mainlevelmainnav li li.sfhover ul,
#mainlevelmainnav li li li.sfhover ul{
/*	left: auto;                             */
	left: 11em;   /* Drop down & fold outs placed beneath Verwijzers */
	color: #0080FF;
	z-index: 6000;
}

#mainlevelmainnav li li:hover,
#mainlevelmainnav li li.sfhover{
    background: #2196FF; /* Color menu where pointer hovers */
}

As I see it, the submenu placement is governed by the following (last) part of the css file:

#mainlevelmainnav li:hover ul,
...
#mainlevelmainnav li li li.sfhover ul{
/*	left: auto;                             */
	left: 11em;   /* Drop down & fold outs placed beneath Verwijzers */
	color: #0080FF;
	z-index: 6000;
}

I'm partly happy with the result, in so far as that the fold out menu, the second submenu, folds out to the right, instead of to under the menu with a submenu.

So, does anyone know how I get the first submenu under the main menu, and the second submenu to the right of the first submenu?

TIA, Macamba

Edit:
Oh, the menu that is folded out to the right is dropped by one line too. Anyone know how I can solve that?

Edit 2:
You should look at it not in IE6. The placement of the menu is all gibberish there. But I'm now trying to solve this problem before I tackle the next.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 37 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

The way you have it now, the

The way you have it now, the submenus are positioned relative to the containing div and when hovered are set to display at 11em from the left. Make the following changes:
#mainlevelmainnav li{
float: left;
padding: 0;
position: relative;
}

#mainlevelmainnav li:hover ul,
#mainlevelmainnav li li:hover ul,
#mainlevelmainnav li li li:hover ul,
#mainlevelmainnav li.sfhover ul,
#mainlevelmainnav li li.sfhover ul,
#mainlevelmainnav li li li.sfhover ul{
/* left: auto; */
left: ; /* Drop down & fold outs placed beneath Verwijzers */
color: #0080FF;
z-index: 6000;
}

macamba
macamba's picture
Offline
Regular
Arnhem
Last seen: 11 years 3 weeks ago
Arnhem
Timezone: GMT+1
Joined: 2007-03-22
Posts: 45
Points: 0

sigh

Wolf,

Thanks a bundle. It folds out as it should. Now I only have to figure out how to get the third sublevel displayed to the right. Any idea?

Macamba

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

This is a common problem

This is a common problem arising from not reading and understanding the way styles are being applied using descendent selector styling.

it's vital to always remember that descendent selectors apply styles in a nested fashion that is to all instances of an element within another and at any nested level.

You are just not being exact enough with specifying to what elements you need to apply properties to, your grouped sets are applying the same set of styles to all elements; you have to ensure that you adjust deeper nested elements.

#mainlevelmainnav li li:hover ul{left:11em ;}

You need to probably group a similar rule for the sfhover class.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

macamba
macamba's picture
Offline
Regular
Arnhem
Last seen: 11 years 3 weeks ago
Arnhem
Timezone: GMT+1
Joined: 2007-03-22
Posts: 45
Points: 0

Theory is everything

Hugo,

You are absolutely right :blushing: . I just bought "CSS Mastery" from Andy Budd et. al. But I have not had the time to study the material. If I could solve this menu I can continue with other parts of the website (age old lament?). Furthermore, I need to spend time on other pressing matters to :shrug:. Well, there is no escaping study.

Macamba

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

macamba wrote:Hugo,

macamba wrote:

I need to spend time on other pressing matters to :shrug:.

It's always the case, I got held up on a problem yesterday which buggered my days work.

macamba wrote:

Well, there is no escaping study.

Macamba

That goes for all of us, it's never completed! one has to set aside time to go over weak areas, it's why I wasted the time yesterday, lack of knowledge! lack of study put in :shrug:

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 12 years 17 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

It refreshng to hear you

It refreshng to hear you stil get stuck too Hugo! Wink

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

fatfreddy wrote:It refreshng

fatfreddy wrote:
It refreshng to hear you stil get stuck too Hugo! Wink

Yeah afraid so, very depressing Smile I'm far from being an expert, but that goes for many if they were truthful :shrug: I will always be Grasshopper never master.

Although it was in reality problems caused by IE, it was all smooth sailing in real browsers.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

macamba
macamba's picture
Offline
Regular
Arnhem
Last seen: 11 years 3 weeks ago
Arnhem
Timezone: GMT+1
Joined: 2007-03-22
Posts: 45
Points: 0

Hugo wrote:it was all smooth

Hugo wrote:
it was all smooth sailing in real browsers.

Lol, lucky for us there are real browsers. I do not wish to contemplate the result in IE6, though I must say it looked allright in IE7.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Er I did have a quick look

Er I did have a quick look in IE6 Sad Shock :? I think that about sums it up!

I didn't want to add to your burden at the time Smile

have a go at it (sadly IE6 is still going to have to be supported) post up any problems.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

macamba
macamba's picture
Offline
Regular
Arnhem
Last seen: 11 years 3 weeks ago
Arnhem
Timezone: GMT+1
Joined: 2007-03-22
Posts: 45
Points: 0

Yes, I knew. I was afraid

Yes, I knew. I was afraid IE7 would be horrible to, but to my surprise I found out it looked OK. As if Mickysoft promised to do better with IE7 and tried to conform it to the specks.

For that matter, I still have IE6 on my system, and refuse to upgrade it to IE7. And I still will not browse with anything else then a Mozilla product (SeaMonkey in my case).

dmccabe
Offline
newbie
Canada
Last seen: 12 years 23 weeks ago
Canada
Joined: 2007-06-10
Posts: 1
Points: 0

Multiple IE for testing

I find this tool useful for testing...
http://tredosoft.com/Multiple_IE

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

macamba wrote: For that

macamba wrote:

For that matter, I still have IE6 on my system, and refuse to upgrade it to IE7.

Why?

Verschwindende wrote:
  • CSS doesn't make pies

macamba
macamba's picture
Offline
Regular
Arnhem
Last seen: 11 years 3 weeks ago
Arnhem
Timezone: GMT+1
Joined: 2007-03-22
Posts: 45
Points: 0

thepineapplehead wrote:

thepineapplehead wrote:

Why?

I prefer not to use untested software :rolleyes:

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Define "untested". Surely if

Define "untested". Surely if you're stuck using the POS that is IE, you'd want to use the latest version? You know, with all the (little) css improvements, bug fixes, tabs, etc?

Verschwindende wrote:
  • CSS doesn't make pies

macamba
macamba's picture
Offline
Regular
Arnhem
Last seen: 11 years 3 weeks ago
Arnhem
Timezone: GMT+1
Joined: 2007-03-22
Posts: 45
Points: 0

On untested MS software

Well, as the English say, "the proof of the pudding is in the eating of it". The real testing will happen in the market. And all bug exploits will be found when the product is in the market. I'd prefer not to stumble upon a exploit, but then, I still not browse the Internet using IE.

But to cut a long story short, I now know the result of my CSS-efforts in IE7 are comparable to those in FireFox. So I would prefer to see a broken site in IE6, which probably 60% of all Internet users still use, so I know what to change. As a last tweak, I will check my site using the tools (Multiple IE for testing) mentioned previous in this thread.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

macamba wrote:And all bug

macamba wrote:
And all bug exploits will be found when the product is in the market. I'd prefer not to stumble upon a exploit, but then, I still not browse the Internet using IE.

But it already is on the market, it's been out for several months now at least, if not longer?

Verschwindende wrote:
  • CSS doesn't make pies

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 2 years 7 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

Problem

Just for a refresh, is the problem your having that when you hover over one menu item, the sub menu comes down over the top of the original drop down, thus overlapping the text and making it unreadable? That's what I'm seeing in IE7 Shock

John

Have YOU said Hello yet?
The CSSCreator Hello Thread

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I think the problem has been

I think the problem has been resolved; if macamba can confirm that we'll mark the title as such.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me