Im just getting into the visual aspect with CSS, and I'm starting to get the hang of it... I think. I copied the code from a multilevel navbar w/CSS tutorial, and am playing around with it to get more familiar with how things work in the big picture. Code is here, questions down below. Thanks in advance to any pointers. The code below outputs something that looks like this, just with colors changed. http://www.kriesi.at/wp-content/extra_data/suckerfish_tutorial/step3.html BROWSER IM USING TO TEST = FIREFOX 3.5 HTML <?php get_header() ?> <body> <div id="wrapper"> <!--Placeholder text for observing changes on page--> wrapper <!--End placeholder text for observing changes on page--> <div id="headerwrap"> <!--Placeholder text for observing changes on page--> headerwrap <!--End placeholder text for observing changes on page--> <div id="headerimage"> <!--Placeholder text for observing changes on page--> headerimage <!--End placeholder text for observing changes on page--> </div> <div id="navbar"> <ul id="nav"> <li><a href="#">1 HTML</a></li> <li><a href="#">2 CSS</a></li> <li><a href="#">3 Javascript</a> <ul> <li><a href="#">3.1 jQuery j j j j j</a> <ul> <li><a href="#">3.1.1 Download i i i i i </a></li> <li><a href="#">3.1.2 Tutorial</a></li> </ul> </li> <li><a href="#">3.2 Mootools</a></li> <li><a href="#">3.3 Prototype</a></li> </ul> </li> </ul> </div> </div> <div id="contentwrap"> <div id="maincontent"> </div> <div id="sidebarright"> </div> </div> <div id="bottomclear"></div> </div> </body> </html> Code (markup): CSS CODE /* Body Style */ body{ font-family: sans-serif; font-size: 16px; } /* Overall Wrapper */ #wrapper{ width: 85%; margin: 20px auto; border-style: dotted; border-size: 1px; } /* Header Wrapper */ #headerwrapper{ width: 100%; float: left; } /* Header Image */ #headerimage{ float:left; width: 100%; background-image:url('images/complogoorig.jpg'); } /* Nav Bar */ #navbar{ } #nav, #nav ul{ margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; } #nav a:link, #nav a:active, #nav a:visited{ padding:0px 5px; border:1px solid #333; color:#fff; text-decoration:none; background-color:#660000; } #nav a:hover{ background-color:#fff; color:#0000cc; } #nav li{ float:left; position:relative; } #nav ul { position:absolute; width:12em; top:1.5em; display:none; } #nav li ul a{ width:12em; float:left; background-color:#0000cc; } #nav ul ul{ top:auto; } #nav li ul ul { left:12em; margin:0px 0 0 10px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{ display:none; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{ display:block; } /* Main Content Wrapper */ /* Main Content */ /* Sidebar Right */ /* Footer */ #bottomclear{ clear:both; } Code (markup): 1.) My understanding that when something is positioned absolutely, it is positioned relative to the first parent element that is non-static, and that the default is static. When I change: #nav, #nav ul{ to position:absolute -- It appears to be positioned from the top left corner of the div #wrapper. However, I set no position on this element, so the default would be static. Meaning that according to this: http://www.w3schools.com/Css/css_positioning.asp it should be positioned according to the <html> tag. Meaning that if I set padding to 0px, it should be in the upper left corner of the page. But it isn't, so obviously my understanding was wrong. 2.) In the previous example in #nav, #nav ul, when the position is changed to absolute + no padding, the navbar is in the same place, but is covering up the line of text that was previously above it (the text which says headerimage). I understand that absolute takes it out of the normal flow & so it doesnt affect the positioning of other elements + isn't pushed around by the position of other elements. However, what is telling the navbar to stay in the same location as it was before..... only difference being that it is on top of the text? Even its out of the normal flow, then doesnt it have to be relative to something. None of the parent elements have non-static positioning, so.... I mentioned before that it seemed to be positioned relative to #wrapper. But why? And if there is no padding or margin, top, left, etc... then what is telling it where to be located? 3.) In the above code (without the absolute position change), I copied it directly from the tutorial, changing only the color. I've been trying to figure out how to change the padding around the anchors/links, to increase the size of each <li>, but every attempt screws it up. If I change the padding in nav a:link, #nav a:active, #nav a:visited from the original: padding:0px 5px; to something like padding: 5px 5px; the this results in - The navbar is no longer contained inside wrapper div (I have a clear:both div at the bottom) - The navbar now overlaps the text above. - The first-level submenu now overlaps the main-level navbar when the mouse is rolled over. - Why doesnt the increased size of the <li> "push" away from the Div above it, and push the border of #wrapper div down... I thought that having a clear:both element at the bottom would cause #wrapper to clear everything above it, and thus contain everything. ************** Thanks again in advance for any help