Fri, 2007-06-08 12:09
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.
Sat, 2007-06-09 12:59
#1
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;
}
Sun, 2007-06-10 09:23
#2
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
Sun, 2007-06-10 09:48
#3
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.
Sun, 2007-06-10 09:56
#4
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
Sun, 2007-06-10 10:09
#5
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:
Sun, 2007-06-10 10:43
#6
It refreshng to hear you
It refreshng to hear you stil get stuck too Hugo! 
Sun, 2007-06-10 10:51
#7
fatfreddy wrote:It refreshng
fatfreddy wrote:
It refreshng to hear you stil get stuck too Hugo!
Yeah afraid so, very depressing 
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.
Sun, 2007-06-10 10:58
#8
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.
Sun, 2007-06-10 11:07
#9
Er I did have a quick look
Er I did have a quick look in IE6 
:? I think that about sums it up!
I didn't want to add to your burden at the time
have a go at it (sadly IE6 is still going to have to be supported) post up any problems.
Hugo.
Sun, 2007-06-10 11:13
#10
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).
Sun, 2007-06-10 13:11
#11
Multiple IE for testing
I find this tool useful for testing...
http://tredosoft.com/Multiple_IE
Sun, 2007-06-10 15:20
#12
macamba wrote: For that
macamba wrote:
For that matter, I still have IE6 on my system, and refuse to upgrade it to IE7.
Why?
Mon, 2007-06-11 07:44
#13
thepineapplehead wrote:
thepineapplehead wrote:
Why?
I prefer not to use untested software :rolleyes:
Mon, 2007-06-11 07:55
#14
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?
Mon, 2007-06-11 08:05
#15
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.
Mon, 2007-06-11 08:14
#16
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?
Mon, 2007-06-11 12:51
#17
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
John
Mon, 2007-06-11 14:26
#18
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.