Pseudothrax Azemus

Was what I said wrong? o.=.o; In the example I posted the CSS works for as many levels as you want, simply by containment. I won't post the code here again, but please feel free to scroll up to look at it. So look first at the HTML file. The list itself is a single unordered list, 'ul', which contains three list items, 'li'. By specifying that a list item has class 'folder' it tells the browser that the item specified contains further items (as in it contains another unordered list which then contains more list items). You COULD go in and specify each level, giving all the items on the uppermost level a class 'level1' and the items on the second level class 'level2' and so on. But I hate stuff like that. It means it will 1) only work for the levels specified, 2) be a bitch to expand since adding another level requires adding a whole new set of CSS blocks, and 3) it's cluttered. It means that every single 'li' tag and 'ul' tag has to have a class specifying its location in the hierarchy. Why not just used the built in hierarchy of HTML? So what you'd like to see is that if you have code such as the following: <ul> <li>1</li> <li>2</li> <li>3</li></ul> all three of the items will be put in a visual list on the same level. But then you'd like to see that: <ul> <li>1 <ul> <li>a</li> <li>b</li> <li>c</li> </ul> </li> <li>2</li> <li>3</li></ul> would create items 1,2 and 3 on the top level, and then items a,b and c on the second level inside of item 1. See how the form itself implies the style? This is the ideal, and the most readable and versatile code. So looking back at the CSS file I included, how do I accomplish this? Let's look at each block and break it down. Here's the first block again: body { font: normal Verdana, Arial, Tahoma, Sans-Serif, Helvetica; padding: 0; margin: 0; background-color: #fff;} The body tag contains all of the visible content of your HTML document. It's basically the canvas on which everything else in your page is embedded. Most browsers, however, obnoxiously include a small amount of space around the body so that your content will start like 10 pixels from the top and left of the screen by default. This first block removes that by setting the margin and padding around the body to 0 pixels. It also sets the background to white (some browsers, believe it or not, don't have white as the default background color.) Lastly it sets the font to be applied to all content in the page (unless a more specific tag overrides it.) So this tag can be thought of as setting all of your defaults. The next block does something similar, except to a more specific region of the web page. Here it is: ul, li { display: block; margin: 0; padding: 0; border: 0;} This does almost the exact same thing, except this is applied to the 'ul' and 'li' elements. It also removes and default border which the browsers puts on list elements. The "display:block;" isn't really necessarily...I was just being careful. So this block sets the stage for how ALL unordered lists and list items should appear on the web page unless otherwise specified. The general rule with style is don't let the browser have control over anything it doesn't have to. Not that I'm against fluid sites or having a certain amount of browser-imposed slippage in your design, but most default behaviors are, to be blunt, bad. For example, the blue underlined bold font which all browsers use to indicate a hyperlink is ugly and crude. Chances are, unless Internet Explorer is the theme of your site, you don't want that there. So, the first thing anyone does in their stylesheet is override all relevant default behaviors. That's what these first two blocks did. Here are the next two: ul { width: 100px; list-style-type: none;} li { width: 100px; font: normal 11px/16px Verdana, Arial, Tahoma, Sans-Serif, Helvetica; padding: 2px 0 4px 15px; background-color: #CDCDCD; margin: 1px 0px;} There is some redundancy here which I could have eliminated but I put it all together pretty quick. The first block here further specifies that unordered lists should have no bullets (the "list-style-type" style) and sets their default width to be 100 pixels. The second block sets the default style for each list item. This is still essentially default behavior, or at least that's how I think of it. Later tags apply to specific classes or states such as 'hover'. If you think about it for a moment they are all 'default' in a sense, but on different levels. This sounds silly, since default should only be what is considered the top behavior, but it's a convenient analogy. The process of creating CSS is the process of gradually reducing your site's style down into individualized packets which, ideally, only apply to the things they contain. HTML and CSS both revolve around the hierarchical syntax which defines them, so designing with them means thinking hierarchical. li.folder { background-color: #efefef; border-top: 1px solid #ffffff; border-bottom: 1px solid #cccccc;} li.folder:hover { background-color: #dedede;} You should see the pattern here. These blocks both pertain to all list items which have class "folder". The first says the way they look normally, and the second says how they should change when you move your mouse over them. So, what these say is that, normally, an 'li' tag with class "folder" will be a light gray and have a white border on the top and a slightly darker gray border on the bottom. When moused over, the background color darkens slightly. NOW we get to the actual part which describes how to style lists inside of lists. As it stands, this will simply style all of the list items the same, as if the document were just one long list and all the items were gray. We want to make it such that unordered lists which are contained inside of the list item of another unordered list are styled differently. In particular, we want them to be moved over 115 pixels (100 for the width of the list next to it, 15 for the padding) and we want them to be hidden unless we mouse over the parent item. SO, let's look at the last few blocks, which is where that magic happens: li.folder>ul { position: absolute; display: none; left: 115px; top: 5px;} li.folder:hover>ul { display: block; background-color: #f2f2f2} So note that both of these tags apply to unordered lists, but specifically to unordered lists which are contained inside of list items with the class "folder". So, on page load the first style is applied and moves the unordered list over 115 pixels and down 5 pixels. Since the position is "absolute" this is from top-left corner of the containing tag. The most important part of this, however, is the style "display: none;". This says that, by default, a unordered list immediately contained inside of a folder is invisible! Perfect. The last block here is a little strange. It says that while hovering over the list item which contains an unordered list, make said unordered list visible. So by hoving over a list item which has subitems, it makes the sublist visible. So note that this will work with any number of levels in your list. It has no reference to whether the original list was itself contained in another list. Position in the hierarchy doesn't matter, the behavior is invariant. If you mouse over a list item which has subitems, it will make the sublist visible. If that sublist then contains an item which contains further subsubitems, the same rule is applied to it since it also is a 'ul' contined inside of a "folder". So it is by default invisible and doesn't show. When you mouse over it, it makes the sublist visible and shows you the subsubitems. This can continue ad infinitum. I suggest you look at the link I provided earlier to an example of this in action. It may even be able to be simplified still further since I think having a class called "folder" might be superfluous, but I think this should suffice. Oh, and the last three blocks just style links. They don't have anything to do with the way the list works, just how links look inside of it. Feel free to add me on Skype as AsaDragon220 if you have trouble with this in any way. ^.=.^

Hey there Inoue, This shouldn't be a problem at all. =D Since you seem bewildered by CSS here's a really simple overview. CSS consists of blocks, and each block consists of two things: a selector statement and a series of style rules contained between two curly brackets. { } A selector can be extremely simple or extremely complicated. The simplest one you'll see consists of a single tag name. In this case the style statements inside of the block are applied only to tags of that type. This should make sense. For instance, consider the block: p { font-weight: bold; color: #68d;} This will select all 'p' tags in an html document and apply the styles to it. In this case, this will make the text inside a paragraph tag bold and blue. A selector statement can do more complicated things too though. For instance, you can select things by specifying containment or descendants. Consider: li a { background-color: #888; color: #fff; text-decoration: none;} This statement will select all anchor tags ('a') which are inside of list item tags ('li'). The block then applies the contained styles, changing the background color to a medium gray, the font to white, and removing the default underline which the browser obnoxiously applies. Note that the containment doesn't only mean a first-child here. This block will apply to not only the first-child, but ANY anchor tag inside of an li tag. If you want to select only an immediate descendant, use the '>' character. This does the same thing as simply separating them by a space, except it exclusively selects first children. For more information on rules and syntax for selectors, see the W3C documentation here. Another things to know is that the file is read from top to bottom and style statements are applied to the HTML content in order. This means that anything occurring later in the document overrides any conflict which came earlier. Consider the snippet: div.awesome { position: absolute; left: 20px; top: 20px; background-color: #fff;} div.awesome { background-color: #777;} The period '.' is the class selector character in CSS and selects elements which have the specified class. Here the second block will select division tags which have class "awesome". Notice that both blocks contain a style rule for background color. If you have any div anywhere in your HTML document with class awesome it will receive the first set of rules, moving 20 pixels from the top of the window, 20 pixels from the left edge of the window, and setting its background color to white. But what happens with the background color style? Here order matters. Both blocks will be applied to the div.awesome tag, but since the last applicable rule in the document sets the color to #777, that color wins out! If the two had been in the reverse order, the reverse case would be true. This is how CSS resolves ambiguity and allows you to have many many different blocks which apply to each element. This is where the 'cascading' part of Cascading Style Sheets comes from. Anyway, I have no idea if you needed all that and I sincerely apologize if that was redundant information for you. It was just a little bit in case you needed something to help see the reason in the madness. I just don't like throwing out answers unless I feel that you will know how to resolve any further challenges you find. I don't know much about what you're actually trying to make, but here's an example css snippet that will get the job done fairly simply I believe. I just threw it together so just if it's not what you need let me know and we can actually chat and figure things out. It's modified from what you posted. ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// body { font: normal Verdana, Arial, Tahoma, Sans-Serif, Helvetica; padding: 0; margin: 0; background-color: #fff;} ul,li { display: block; margin: 0; padding: 0; border: 0;} ul { width: 100px; list-style-type: none;} li { width: 100px; font: normal 11px/16px Verdana, Arial, Tahoma, Sans-Serif, Helvetica; padding: 2px 0 4px 15px; background-color: #CDCDCD; margin: 1px 0px;} li.folder { background-color: #efefef; border-top: 1px solid #ffffff; border-bottom: 1px solid #cccccc;} li.folder:hover { background-color: #dedede;} li.folder>ul { position: absolute; display: none; left: 115px; top: 5px;} li.folder:hover>ul { display: block; background-color: #f2f2f2} li > a { padding-left: 10px; text-decoration: none; font-weight: bold;} li > a:link { color: #FFF;} li > a:hover { color: #A22;} //////////////////////////////////////////////////////////////////////////////////////////////////////////////// and here's a simple HTML document which uses it: //////////////////////////////////////////////////////////////////////////////////////////////////////////////// <!DOCTYPE html> <html> <head> <title>Verticle Menu</title> <link href="style.css" rel="stylesheet" /> </head><body> <ul > <li class="folder"> One > <ul > <li><a href="#">subone</a></li> <li><a href="#">subtwo</a></li> <li><a href="#">subthree</a></li> </ul> </li> <li class="folder"> Two > <ul > <li class="folder"> subone > <ul > <li><a href="#">subsuboneA</a></li> <li><a href="#">subsubtwoA</a></li> <li><a href="#">subsubthreeA</a></li> </ul> </li> <li class="folder"> subtwo > <ul > <li><a href="#">subsuboneB</a></li> <li><a href="#">subsubtwoB</a></li> <li><a href="#">subsubthreeB</a></li> </ul> </li> <li><a href="#">subthree</a></li> </ul> </li> <li><a href="#">Three</a></li> </ul></body> </html> ////////////////////////////////////////////////////////////////////////////////////////////////// I have to go to class, but I'll upload it for viewing at http://mmas.unca.edu/~atjones/cssmenu. Hope that's helpful. Oh, one last thing, the ':hover' stuff in a selector just means those styles are only applied to the elements during mouseover.