Wolfey offers Tygra a crystal ball and asks if they will let me know when they spot Uppy lol.

He may be over in the corner by the wooden rocking horse's pile of poop.

Just kidding Chris mate lol.

Has Upgrader taken some time off or something?

Wolfeymole, is there any chance you could get DarkLord to come over here and help me out please?

Tygra,

I've just had DarkLord on IM. He'll get to you as soon as he gets a break at work.

Hey Tygra,

DCiAdmin informed me ya needed some help with CSS flyout menus.

Looking at the link you posted on the previous page, I can see where you get confused, the code isn't exactly user-friendly, and is actually a pretty poor example of CSS usage.

What exactly is confusing you?

Would you like me to write an easier to read and understand example?


Also, by CSS popout, you mean a static menu?

i.e.
Link 1
Link 2
--Link 2.1
--Link 2.2
----Link 2.2.1
Link 3

Hi DarkLord.

I get confused basically when it starts going like this...

div#menu ul ul li:hover ul
{display: block;}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}


div#menu ul ul li:hover ul
{display: block;}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}


div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}


I think I understand the reason why "display: none, and display: block" are in there, but I don't understand why there are "4 ul's" in the CSS and the order they are going in with the li:hover.

Ah.. alright, here's how it works:

When you have nested elements such as:

And you don't have classes/IDs to reference them by, you can reference them by drilling down, such as writing this CSS used to Reference the A tag for "link 1":

To reference link 2, you'd have to write:

However the problem with that is, all A tags within that div will also inherit the properties, which is why you should always assign IDs and classes and be very specific when assigned CSS attributes.





So let's take a look at the CSS example:

div#menu ul ul li:hover ul

That means you're going into the div of ID menu, and looking at the UL that's inside the LI, which is inside 2 more ULs, so the code you're referencing is as follows:

Usually this considered a very bad way of writing CSS though, as you can see, it's very easy to get lost and confused, which is why it's better to assign IDs and Classes.

I hope this help clear it up a bit for you, if not, let me know and I'll show you a different example.

Thanks DarkLord for your help.

I thought I understood what you told me and I tried adding an extra ul into the list, but I made a total mess of it, and it did'nt come out right.

Here's what I tried with the CSS...



#menu ul ul ul ul {position: absolute;
top: 0;
left: 100%;
width: 100%;}

div#menu ul ul ul ul {display: none;}

div#menu ul ul li:hover ul ul ul {display: block;}

div#menu ul ul ul ul, div#menu ul ul li:hover ul ul ul {display: none;}

div#menu ul ul li:hover ul ul ul{display: block;}

div#menu ul ul ul ul, div#menu ul ul li:hover ul ul ul {display: none;}

div#menu ul ul li:hover ul ul ul, div#menu ul ul ul li:hover ul ul
{display: block;}

div#menu ul ul ul ul, div#menu ul ul ul ul li:hover ul {display: none;}

div#menu ul ul ul ul, div#menu ul ul ul ul li:hover ul {display: block;}



Hope you can help!