Drop down menu with images

[wa9578]

Hi all,

I'm trying to design a website with a multi layer drop down menu (least I think thats the name for it).
I've managed to make it so the drop down menu works, and when added in another sub menu (as part of the drop down) have managed to make it hide, but I can't get the hover to work. I might have missed something in the coding (more than likely) but I keep fiddling and changing stuff and it doesn't want to play.

To take it another level, I'm wanting the sub menu (when you hover over the name) just to show an image and when the image is click to go to a different page (hope that makes sense).

The HTML looks like this (tried to include the important stuff and get rid of the garbage)

<div id= "wrapper">
<div id= "siteNavigation">
<ul><li><a href="#" class="active">Home</a></li>
<li><a href="#">Team</a> 
<ul>
<li><a href="#">Lucy</a></li>
<li><a href="#">Hannah</a></li>
<li><a href="#">Phil</a></li>
<li><a href="#">Claire</a></li>
<li><a href="#">Carly</a></li>
<li><a href="#">James</a></li>
<ul> 
 
<li> <a href="#">image/details</a></li> <!-- I want this to be a picture when once clicked takes you to a URL --> 
 
 
</ul> <!-- end james pic -->
 
</ul> <!--end inner ul-->
<li><a href="#">Trainees</a></li>

</ul> <! End Ul-->
</li> <!-- End li main-->
 
</ul>
 
</div> <!--siteNavigationend-->
</div> <!-- wrapper end-->
</body>
</html>

and the CSS looks like this;

 
}
#siteNavigation ul ul { /**this is the thing I used to hide the drop down menu**/
position:absolute;
visibility:hidden;
top:32px;
 
}
 
#siteNavigation ul li:hover ul { /**this is the thing I used to show it with a hover**/
visibility:visible;
 
}

Any help on this would be greatly appreciated... finished product should mean hover over 'team' to get a drp down list... hover over a name to be given an image to the right of name, clicking to redirect to a specific URL.

Many thanks in advance

[SuzyUK]

Hi wa9578 and Welcome!

not missed too much, but the lists are a bit overly complicated, if indeed you do just want a single image to go with the link, then theoretically both links Name and image are going to the same place?

If so I would suggest putting both the name and the image inside the same <li> two links to the same person's "page" each with a different class name so you can format them differently.. then with a bit of hover magic you can still hide them both at the start, bring the first one back on hover of "team" link as you already have, but keep the second one - the image - hidden until the first one - the name - is hovered on. I think there is a couple of ways to select a sibling link but in my example below I simply go for the hover on the drop down <li> element (the name part) activating the other parts visibilty.. phew easier to code than explain so to demonstrate:

HTML:

<div id= "siteNavigation">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Team</a>
 <ul>
 <li><a href="#" class="name">Lucy</a> <a href="#" class="img"><img src="lucy.jpg" alt="Lucy"></a></li>
 <li><a href="#" class="name">Hannah</a></li>
 <li><a href="#" class="name">Phil</a></li>
 <li><a href="#" class="name">Claire</a> </li>
 <li><a href="#" class="name">Carly</a> <a href="#" class="img"><img src="Carly.jpg" alt="Carly"></a></li>
 <li><a href="#" class="name">James</a> <a href="#" class="img"><img src="James.jpg" alt="James"></a></li>
 </ul> <!--end inner ul-->
</li> <!-- end team LI -->
<li><a href="#">Trainees</a></li>
</ul><!-- End main UL -->

</div> <!--siteNavigationend-->

CSS:

#siteNavigation ul ul { /**this is the thing I used to hide the drop down menu**/
position:absolute;
visibility:hidden;
top:32px;
}

#siteNavigation ul ul li {/* so the absolute img takes position fromm it */
 position: relative;
 }

#siteNavigation ul ul a.name {
display: block;
background: #dad;
width: 100px;
height: 28px;
border: 1px solid #000;
border-width: 1px 0;
line-height: 30px
}

#siteNavigation ul ul a.name:hover {
background: #eee;
}

#siteNavigation ul ul a.img {
visibility:hidden; /* hide the image until name is hovered on */
position: absolute;
left: 100px;
top: 0;
background: #eee;
width: 100px;
height: 100px;
}

#siteNavigation ul li:hover ul,
#siteNavigation ul ul li:hover a.img { /* first one shows drop down list, second one shows hidden image link when name is hovered on */ 
visibility:visible;
}

initial list HTML is much simpler, though it would also work as a nested list the way you did it, it takes less nests this way - I added some 'pretty' code to try and show how positioning would work too..

& if you don't like the idea of 2 links going to same place you could wrap it all in one link and use two internal spans with different class names to do the split

hope that helps
Suzy

[wa9578]

Suzy, many thanks, I admit alot of that wentover my head but it works :) and I can understand lil bits (I'm very noob like as used to frontpage years ago lol). Just got to change the background to the one I had before (company colours) and I'm well away again :)

Thanks again your a star it had been doing my head in for days lol

[wa9578]

posted in error

[wa9578]

This thing is the bane of my life... I've got the above working fine, I've got another menu that drops down fine (just images in the drop down), b ut now am trying to create one with text (if that makes sense)

so its the nav bar, with a drop down menu, with a hover menu :s

<li><a href="#">Handouts</a>
<ul>
<li><a href="#" class="name">Basics</a> </li>
<ul>
<li><a href="#" class="name"> Keyboard </a></li>
</ul>

I've tried alsorts to fix it, tried fiddling with the css, tried calling the class "name2" (not that I think it exists but I tried. I've reverted the css back to what works for the other stuff but any ideas?

There can be anything upto 10 drop downs when the things been hovered over.

So hover over Handouts, Creates drop down box (works fine), hover over headings in the drop down box (in example - Basics), creates another drop down box (in example - keyboard) this is the thing I'm struggling with.

Anybody got any hints?

[SuzyUK]

if it's just text, you don't need the class names, I only added them for you first menu as a way to differentiate the the text part from the img part of the <li> elelment

text menus are so much easier.. I have a drop down menu tutorial [ago.tanfa.co.uk] out there - note it is a little dated, i.e. it still has IE5/6 hacks in it, but the theory is still the same and it explains how you the

ul li:hover ul

rules and their subsequent "negation" rules for show/hide child levels for however many levels you want..

That first page is just the code that is used throughout the tut. links at top to whatever route you want to go

sorry to be lazy and not retype everything, it is also here somehwere but can't find it :o

there's a vertical & horizontal tut, but just start with the vertical.. the horizontal is the same logic but with a bit of extra positioning added.. ignore the bit that means you have to download the IE hover file (unless of course you want to support IE6) there are other ways to get IE to play nice with li:hover rules which might work better now anyway, we can help with later if you need to

Suzy

[wa9578]

thanks suzy, be as lazy as you like lol. looks like I shall be doing some reading over the weekend lol, rather that than just be spoon fed cos it helps me learn (so did you as you explained why the code did what it did), would look at it all now but I've just been given posters to do for an hours time and then out delivering sessions :( manic manic manic lol.

Having looked at it briefly though I'm assuming where it has #menu thats where I have #SiteNavigation (I think so just checking) and I don't need to put the div in before it? seems a bit of a noob question, but rather make sure than fcuk it up for something simple (can you tell it's been another of those weeks lol) Beers tonight? on me of course lol.

thanks again suzy your a star :) (here's to hoping I don;t get lost and confused trying to edit my stuff lol)

[SuzyUK]

yep wa9578 #menu is just the wrapper div (for the lists that is) & in your menu it's equal is #siteNavigation

if you are actually trying to learn take it step by step and don't worry about the id just now.. basically using

#whateverid ul {}

is just the way of uniquely identifying that particular set of lists, as opposed to other lists that might exist on the page.. it saves you putting multiple class names on individual lists.. by lists here I mean <ul> elements

e.g. when testing with your own menu the easiest way wouljd be could change your own id="siteNavigation" to id="menu" in the HTML, but when you get the menu working (I advise doing it in an isolated page as you learn) you might prefer your own id.. in which case change the HTML back again and then just do a search and replace on the CSS and change every instance of #menu to #siteNavigation.. it doesn't matter which word you use it's purpose is the same.. to give a way to uniquely target just that particular nav menu

in CSS a selector is read from right to left, with the actual element you're targeting being nearest the curly brackets.

so

#menu ul{}

is targeting a <ul> element which has an ancestor (not necessarily a direct parent) with an id of "menu" - because other lists in your page don't have a parent/ancestor with that id they are not included in your target styles, that's what is meant by specificity in CSS and is how you isolate specific areas/divs of your page like menus, sidebars etc. now when it comes to reading the tutorial CSS code it might be helpful to remember that, an ID is the all conquering hero when it comes to specifity nothing can usurp it even order of the Cascade, i.e. the order things are written in the stylesheets.. which is why that bit (#menu) even exists but then the next way to add specificity to selectors is to add more elements

so in simple terms (pseudo code not real code which involves li's as well ;))..

div#menu ul {} targets all <ul> elements inside a #menu div, no matter how deeply they're nested, but then #menu ul ul {} targets <ul>'s 2 and more levels deep i.e. every ul that has at least one ul and a div id#menu in it's ancestry.. so for example when you want to show the second level and keep the third hidden you need to show #menu ul ul {} but hide menu ul ul ul {} at the same time, and so it goes on through each depth you need to target & that's what I mean about negation rules

There is another way to directly target child elements using the child selector ">" which means you don't have to use the extra "negation" rules and I should probably rewrite another version of that tut using it now, but IE6 still doesn't play nice with the child selector -- do you want/need IE6 support? It might be worth trying to find another tutorial if you don't need it

in short
#menu > ul{} then only targets a ul with a PARENT with an id of div.. #menu > ul > ul () only targets a second level list, i.e. the selector when read from right to left must match the source order

anyway, happy reading.. and do ask.. can't promise to be around all the time this weekend but will try to look in

[wa9578]

Hi Suzy,

I think that all went over my head lol, the tutorial however (printed it off and read it this morning) is starting to make sense. It kinda confirmed what I was thinking initially (when I first wanted the drop down lists) but I couldn't get it to work and then you gave me a totally different way of doing it lol (think thats cos that menu had images lol).

I've managed to create the whole site through learning so far so I think it's going quite well. Granted I have an offline version (keep playing with it in dreamweaver) but I have it uploaded and backed up too soits all good :)

I'm gonna badger away at this till I get it right (or until the mrs moans at me cos her sisters here) but I will let you know how I get on :) and then I will start doing the other list (nothing like making it complicated lol) that ones going to go under the nav bar thingy (i.e hover on handouts, then load images (under handout but going left (ish)) somthing tells me I'm trying to make something more complicated than I can actually do but... pointless making a simple site when its a learning curve, without learning anything :)

[wa9578]

Ok so I failed, I got annoyed, I put in the bits I thought I needed (confusing as my initial code has the img thing in) so I got lost thinking a number of things, and well my heads shot as it is.

I've attached an image this time to try help things (although I think people know)

the image (hope I can link to it with rules etc) is here [i116.photobucket.com ]

the drop down thing works fine, but I've tried the #siteNavigation ul ul ul thing and the #siteNavigation ul ul li:hover ul (as per the tutorial)

But it didn't even think about entertaining it. is this the part where I need the "a" in somewhere? I am trying (believe me I am) but keep getting stuck at silly points (you can kick me later).

[SuzyUK]

don't get annoyed.. take a walk.. I'm off to work, but will get back you with an example of both (old and new) versions. :)

btw you never answered me do you want IE6 support? it doesn't matter to the end answers except we will need to add a bit of JS support for IE6 if required

[wa9578]

I don't think will need the IE6 stuff, I'm pressuming most the people that will be looking at the site should've updated to at least IE7 by now (assuming they are using IE still).

thanks for your help (and patience), least you have more than me lol. It's just one of them things thats been annoying me and bugging me from the offset lol... why i don't just scrap it and have them all on one page is beyond me (apart from the fact that way will look horrid lol).

[SuzyUK]

that's cool about the IE6.. should be a lot easier to explain the hover toggles (and to colour the correct item only!)

patience, it has sorely tested mine trying to simplify this for you, I'd forgotten about IE's hasLayout issues with this kind of menu too, and even without that it's probably a bit more complicated for you to get to grips with all in one go because you actually want drops and pops, i.e. vertical drops and horizontal popouts. They require a slightly different way to position, but I'll try to tell you the answers via comments in the CSS I give you

but first with any menu, you need to make sure the basic HTML is right, i.e. the nesting, so based on your image above I've come up with this.. though I have added another two levels which shouljd show the CSS will be capable of dealing with 3+ levels.

level 1 (top) will be fully horizontal
level 2 will be vertical positioned beneath it's parent in the top level
Levels 3+ will e vertical positioned to the right of their parent in L2

I'll just go and amend the CSS to allow for the fact you don't need IE6 support, it will make it easier ;)

First can you check you HTML looks like this - darned forum doesn't nest code very nicely so I've left line spaces and put in comments to show the opening and closing of <ul>'s

** remember not to close the <li> list item that holds a nested <ul> until after the child <ul>'s closing tag

<div id="sitenav">
<ul class="toplevel">
<li><a href="#">Calendar</a></li>
<li><a href="#">Handouts >></a>

<ul><!-- level 2 -->
<li><a href="#">Basics >></a>

<ul><!-- level 3 -->
<li><a href="#">Keyboard</a></li>
<li><a href="#">level 3.2</a></li>
<li><a href="#">level 3.3 >></a>

<ul><!-- level 4 -->
<li><a href="#">level 4.1</a></li>
<li><a href="#">level 4.2</a></li>
<li><a href="#">level 4.3</a></li>
</ul><!-- //level 4 -->

</li><!-- list item 3.3-->
</ul><!-- //level 3 -->

</li><!-- basics -->
<li><a href="#">Word</a></li>
<li><a href="#">Excel</a></li>
<li><a href="#">Ancestry</a></li>
<li><a href="#">Crafts</a></li>
<li><a href="#">Internet</a></li>
</ul><!--//level 2-->

</li><!--//handouts-->
<li><a href="#" >News</a></li>
<li><a href="#" >Affiliates</a></li>
</ul><!--//top level-->

</div>

I've added >> after the text item that will have a drop by the time we're finished, you don't have to, it's a visual aid for demo only

#sitenav is a replacement for your siteNavigation ID, for no other reason than I prefer all lowercase and it's easier to type ;)

back in a bit with the CSS..

[wa9578]

sorry for being a burden, but it is appreciated. I take it having pop ups and drop downs isn't a very good thing?

is it going to complicate things when the team drops down and when name hovered over gives an image? as in will it effect this bit at all?

and yes my html looks like that :)

[SuzyUK]

OK here's the first lot of CSS, it's the bit which gets each level into position.. it does not yet include the hover stuff, it will follow

In here is the introduction of the Child Selector [w3.org] - quick explanation:

#sitenav ul {}

- will select any <ul> that is a descendant of the #sitenav div, which is every ul in the menu above

#sitenav>ul {}

(or

#sitenav > ul {}

, whitespace is optional) - will only select a <ul> which is a child of the #sitenav div, which in this case is the "toplevel" <ul>

it's a way to get really specific about levels, so in the HTML above I didn't need that <ul class="toplevel"> - I was going to use it to simplify a bit for you, but the CSS is now changed and you can change that HTML back to <ul> if you like.

IE6 didn't support the Child Selector that's why my tutorials and tuts for other menus like this may be out of date with unnecessary classes or "negation" rules and the like.. hopefully this is the last of those complications

using Child Selectors will make it easier to target each level uniquely.. e.g.
#sitenav>ul>ul (level 2), #sitenav>ul>ul>ul (level3)

enough already.. here's the first bit with lots of notes as promised!

/* wrapper div for the dropdown lists */
#sitenav {
width: 80%;
margin: 0 auto; /* will center the whole navigation if the width is less than 100% */
font-family: "trebuchet ms", georgia, sans-serif;
font-size: 18px;
font-weight: bold;
}
/* starting all the child properties inside this wrapper with #sitenav will mean the rules only apply to this menu */

#sitenav ul {
margin: 0; padding: 0; list-style: none; /* zero all the list defaults in the sitenav wrapper div */
background: #fff;
color: #000;
border-width: 0; /* border width set on each list as required */
border-style: solid;
border-color: #f00; /* red */
}

/* make the top-level list horizontal */
#sitenav > ul {
float: left;
width: 100%;
border-width: 1px 0; /* top and bottom border only on the horizontal top bit */
}

/* without the child selector this targets all other levels of list, 2 or more deep */
#sitenav ul ul {
border-width: 1px 1px 0 1px; /* 0 bottom border, the bottom one comes from the li items */
}

/* float the top level li items so they sit side by side, you can give them a height here too if you like */ 
#sitenav > ul > li {
float: left;
width: 130px;
position: relative; /* so the droplists, the children of li's, have something to take their position from */
text-align: center;
height: auto; /*if you do give them a px height you would need to adjust the top co-ordinate of it's child menu - I've noted below where */
}

/* no child selector so this targets all list items 2 levels and more deep */
#sitenav li li {
float: left;
width: 130px;
text-align: left;
border-width: 0 0 1px 0; /* bottom border only */
border-style: solid;
border-color: #f00; /* red */
}

/** links ***/
#sitenav li a {
display: block;
background: #fff;
color: #000;
text-decoration: none;
padding: 0 10px;
}

#sitenav li a:hover {
background: #f00;
color: #fff;
}

/** everything after this now does the positioning of the child lists **/

/* position _all_ the second level and greater lists */
#sitenav ul ul {
position: absolute;
}

/* positioning co-ordinates for the second level (1st) drop
 this actually targets all levels but is overruled in the rule which follows */
#sitenav ul ul {
top: auto; /* this is default and could be left out, it's in here for clarity because you would use a px value here to match the height of the top li's if you've used one */
left: 0;
}

/* positioning co-ordinates of all further level's (3rd, 4th etc) drops so they appear to the right of the 1st drop */
#sitenav ul ul ul {
top: 0;
left: 100%;
margin-top: -1px; /* to compensate for top border */
}

the hover code will follow.. later when written ;)

[SuzyUK]

is it going to complicate things when the team drops down and when name hovered over gives an image? as in will it effect this bit at all?

No it shouldn't.. or is the "team" menu inside the same div (#sitenavigation?) as this one.. anyway if it is, I think it's classes .img and .name should mean it can be isolated, if anything we can just give the "team" ul an ID to make sure it can be targeted differently if still required at the end of all this

you're not a pain, there's usually a way to so something with CSS, it's just finding the way that suits :) - the code above is basic and has no classes or ID's so it can be expanded on as required

you having fun yet ?
:)

[wa9578]

lol i've come to the conclusion that I won't ever be "having fun" when it comes to this lol.

yeah it is part of the same team but has .name and .img involved too so fingers crossed lol.

is it going to be another problem when the last one (affiliates I want to drop down but have the affiliates as horizontal) I can see me leaving it how it is tbf though lol

[SuzyUK]

and last but not least.. the toggle.. which is amazing simple when you can use Child Selectors :)


add to the end of the code previously given..

/* hide all child lists */
#sitenav ul ul {visibility: hidden;}

/* IE7 hack - IE7 likes a :hover rule before using :hover in other rules! */
#sitenav li:hover {zoom: 1;} 

/* unhide CHILD level on hover of a list item */
#sitenav li:hover > ul {visibility: visible;}

/* keep those links looking like they're active when their descendants are visible */
#sitenav li:hover > a {
background: #f00;
color: #fff;
}

one small IE7 hack, an oldie but a goody, when I first tested in IE7 the lists wouldn't appear.. I remembered about it's little quirk so added a rule as noted

and the bit that a lot don't understand when using Child selectors in a scenario like this, the links as a child of li:hover work through all the levels because even when you're hovering on the last drop menu you are actually still hovering on the <li> which originally contained the whole construct of drop lists :)

lol.. ready for the questions, but not too hard OK ;)

[SuzyUK]

(affiliates I want to drop down but have the affiliates as horizontal)

Trust You! :)

Yes this code is only written for vertical menus with popouts, but like I said with a few classes you should have enough information here, to change each separate bit as required..

actually tbh with you, I would wait until you see, having them horizontal as well could mean they go off the right side of the page with no way to reach them, if thew page is narrowed.. try it with the code above, narrow your window until level 4 goes out of view.. it's a downside, you may then want to have the right most menus popping out to left.. though that's another exercise for another day.. see how you go with this first

[wa9578]

umm bugger lol, dunno what I've done but it didn't like it lol :s

gonna revert it back to how I had it and try again though lol

as it stands now... the images I have for the 'team' and 'trainees' are there when you hover and the thing for 'basics' is as it was before... just with a border on the sides too :s

I'll keep plundering though lol, i actually used to think I was a fast learner till this project came up lol

[SuzyUK]

no worries.. I wasn't thinking that the two menus were conbined, let me see if I can add your team menu in the above CSS code

crikey I wish I was being paid by the hour here ;)

CSS is fun, honest it is.. ;) - I think this is a lot to learn in one go, so you better not just be pasting! - but then again I can't see an off the shelf solution, given your different requirements, working without tweaks either

back in a bit

[wa9578]

nope not just pasting :) don't learn anything that way, I could sure do with being paid by the hour too, well i do, but not for this unfortunately this is just one of them things I'm doing in my own time and any spare time at work.

If your ever in the liverpool area I think I definately owe you a few beers though

[wa9578]

ooo ooo ooo its nearly there :)

I've managed to get the headings to finally appear... but when I hover over the handouts, listed below basics and then the other headings under handouts are below them,

I've been here before and am guessing (if learnt right), I've just got to sort part of the positioning out and make it so they hide until 'basics' is hovered over

[SuzyUK]

the last bit of CSS above targeting using only the child selectors should do that for you?

hmm I think there may be a misunderstanding here.. when you hover on Handouts the whole of the child <ul> will appear.. Basics, Word, Ancestry etc.. i.e. you can't hide 'sub' parts - that would be confusing for usability, showing the user a choice on initial dropdown then hiding it, the only way they could that back would be to go back to beginning

I'm getting confused now ;)

When the whole of this menu is in place, You should hover on the word "Handouts" which drops down it's child menu then move down to hover on the word "Basics" then it pops out it's child sub menu, as you move over to it, the text "Handouts" & "Basics" remains highlighted showing the user they are in that navigational hierarchy if you like..

is this not what you want?

anyway to add the team into the above three posts

add this to the HTML in post #:4260649

<li><a href="#" >News</a></li>
.... above already there

<li><a href="#">Team</a>
<ul id="navteam">
<li><a href="#" class="name">Lucy</a> <a href="#" class="img"><img src="lucy.jpg" alt="Lucy"></a></li>
<li><a href="#" class="name">Hannah</a></li>
<li><a href="#" class="name">Phil</a></li>
<li><a href="#" class="name">Claire</a> </li>
<li><a href="#" class="name">Carly</a> <a href="#" class="img"><img src="Carly.jpg" alt="Carly"></a></li>
<li><a href="#" class="name">James</a> <a href="#" class="img"><img src="James.jpg" alt="James"></a></li>
</ul> <!--//navteam-->
</li> <!-- //team LI -->


...... below already there
<li><a href="#" >Affiliates</a></li>

I've added bove/below bits just for clarity where to insert it.. though you can nest it where you like, I've add an ID of "navteam" to the particular UL as it makes it easier to then specifically target it's differences

you are building/testing this in a separate HTML page from your site pages? if you get it working separately first it should be easier to include in a main page..

anyway add this CSS to the 2x bits I gave in posts #4260671 & #4260685 and it should work nicely

/** the Team nav menu bit **/
/* It's a second level list, and the 3rd level is not realy a level but instead just a popout image */
/* this is code that isolates it */
#sitenav ul#navteam {}

#sitenav #navteam li {position: relative;} 
#sitenav #navteam img {display: block;}

#sitenav #navteam a.img {
visibility:hidden; /* hide the image until name is hovered on */
position: absolute;
left: 100%;
top: 0;
background: #eee;
width: 100px;
height: 100px;
}

#sitenav #navteam li:hover a.img { 
visibility: visible; /* shows the hidden image link when name class is hovered on */ 
}

I've needed less CSS than the original post as this "team part of the overall "Navigation" - is no longer a standalone part it's now taking styles from the other parts of the #sitenav CSS too, however with the addition of the ID we are able to isolate it nicely, that's what I mean about getting separate bits working and then joining them together..

I know I forget sometimes, about the basics that is, anyone does when they can see the end result lol, so I apologise if that's adding to your confusion

HTH a bit more

[SuzyUK]

oh I think I see something.. maybe that's what you mean, and my confusion - due to changing to the use of Child Selectors I missed a bit which made the 3+ level position properly

#sitenav li:hover {position: relative;}

add that near the top of the CSS, from the first lot I gave you - underneath

#sitenav ul {}

rules to keep with the logical flow, it's inherited by all <li> items and is not then need in the other places

so when you do that you no longer need the IE hack, so remove this:

/*#sitenav li:hover {zoom: 1;}*/ 

and then this bit in the last "team part"

#sitenav #navteam li {position: relative;}

now the "normal" popout child menus (level 3+) should be in the right place too.

is that it?

[wa9578]

I dunno, I'm totally confused/lost :'(

who'd have thought that making one more thingy appear would cause so much confusion lol. I thought I was nearly done but it doesn't look like it anymore... all my links have gone right up top of page (apart from the nav bar itself)

not added the new bits of code yet though (can I cry yet (yes a fully grown man thats seen nasty things and never shed a tear wants to cry at css lol))

[wa9578]

ooo wait wait... its working... I think, now to fix the formatting and I think am there (maybe I dunno) it looks to be how I had it way back when but with the second hidden thing working (3rd level I think you called it)

its good to know experienced people make mistakes with this too though, especially seen as though I've been going made with it lol.

am going to try something that I think will work (using the "navteam" as I need the same effect with where it says trainees) my first option... don't end the ul until after the trainees is finished, if that fails then create "navtrainee" as an ul id and then boom (I hope)

[wa9578]

wahoo that bit worked :)

Suzy thank you ever so much for all your help, I know you've spent along time on it and especially for all the notes and stuff cos I bet that took you longer than the coding did lol

I mean it when I say if your ever in Liverpool to let me know and I'll get you a drink or few :)

[SuzyUK]

I may just take you up on that offer ;) Yes it takes longer to write the notes than the code lol!

Glad it's working, or beginning to :), you have a PM.. it's no more than this whole code in one page, a visual reference

if you do want to try to isolate another bit of your menu, you should give the parent UL a different ID than "navteam", ID's are meant to be unique on a page, they are all powerful in CSS ;)

if your new bit has a lot of the same characteristics of the navteam menu you can group the selectors, if it doesn't you have another ID with which to get tough with it

right.. I am off now.. I really am, a glass of wine is calling

Suzy

[wa9578]

Thanks again hun :) I know I keep saying it but it really is appreciated, just got to fiddle with padding as some of the borders don't "marry up" but other than that I should be ok (famous last words)