We were working on our menu bar and the css was killing me. So after finally reading some stuff on the web and some experimentation I figured it out. Basically, it came down to these two rules:
Rule #1: Absolutely positioned elements use relatively positioned elements as anchors. If no parent relatively positioned object exists, then the <html> tag is used. (this means it will appear in the top left if you set left: 0px and top: 0px)
Rule #2: Relative positioned objects show up where they would if they were the default “fixed” object. However, in order to actually display them there, you need to set display: block. (I think mine were inline or something)
Here’s a snippet of my css code that works:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
ul.navbar display: block width: 100% height: 36px clear: both list-style-image: none list-style-position: outside list-style-type: none // nodelist dropdown is the only li in this menu that has a dropdown list. Therefore, its the only one that is relative // the other li's are the default fixed. li#nodelistdropdown position: relative display: block li text-align: center a cursor: pointer float: left height: 36px width: 162.83px background: #ccc text-decoration: none span line-height: 36px a:hover background: #aaa li a.active background: #aaa // this is the second dropdown within the menu list. // notice that since the width of the containing elements are 162.83px this // item is shifted left 162.83px so that it aligns with the 2nd tab. ul.menulist3 top: 36px left: 162.83px position: absolute z-index: 99 ul.menulist3 li margin: 0 padding: 0 clear: both text-align: left ul.menulist3 li a float: left text-decoration: none padding-left: 10px background: #fff border: none |
Comments are closed.