We were working on our menu bar and the css was killing me.\u00a0 So after finally reading some stuff on the web and some experimentation I figured it out. Basically, it came down to these two rules:<\/p>\n
Rule #1:\u00a0 Absolutely positioned elements use relatively positioned elements as anchors.\u00a0 If no parent relatively positioned object exists, then the <html> tag is used.\u00a0 (this means it will appear in the top left if you set left: 0px and top: 0px)<\/p>\n
Rule #2:\u00a0 Relative positioned objects show up where they would if they were the default “fixed” object.\u00a0 However, in order to actually display them there, you need to set display: block.\u00a0 (I think mine were inline or something)<\/p>\n
Here’s a snippet of my css code that works:<\/p>\n
ul.navbar\r\n display: block\r\n width: 100%\r\n height: 36px\r\n clear: both\r\n list-style-image: none\r\n list-style-position: outside\r\n list-style-type: none\r\n \r\n \/\/ nodelist dropdown is the only li in this menu that has a dropdown list. Therefore, its the only one that is relative\r\n \/\/ the other li's are the default fixed.\r\n li#nodelistdropdown\r\n position: relative\r\n display: block\r\n li \u00a0\r\n text-align: center\r\n a\u00a0 \u00a0\r\n \r\n cursor: pointer\r\n float: left\r\n height: 36px\r\n width: 162.83px\r\n background: #ccc\r\n text-decoration: none\r\n \r\n span\r\n line-height: 36px\r\n a:hover\r\n background: #aaa\r\n li a.active \r\n background: #aaa\r\n \r\n \/\/ this is the second dropdown within the menu list.\r\n \/\/ notice that since the width of the containing elements are 162.83px this\r\n \/\/ item is shifted left 162.83px so that it aligns with the 2nd tab.\r\n ul.menulist3 \r\n top: 36px\r\n left: 162.83px\r\n position: absolute\r\n z-index: 99\r\n\r\n ul.menulist3 li\r\n margin: 0\r\n padding: 0\r\n clear: both\r\n text-align: left\r\n\r\n ul.menulist3 li a \r\n float: left\r\n text-decoration: none\r\n padding-left: 10px\r\n background: #fff\r\n border: none<\/pre>\n","protected":false},"excerpt":{"rendered":"We were working on our menu bar and the css was killing me.\u00a0 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:\u00a0 Absolutely positioned elements use relatively positioned elements as anchors.\u00a0 If no parent relatively positioned object exists,…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[25,59],"tags":[112,925,110,111],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/posts\/343"}],"collection":[{"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/benincosa.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=343"}],"version-history":[{"count":3,"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/posts\/343\/revisions"}],"predecessor-version":[{"id":2798,"href":"https:\/\/benincosa.com\/index.php?rest_route=\/wp\/v2\/posts\/343\/revisions\/2798"}],"wp:attachment":[{"href":"https:\/\/benincosa.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/benincosa.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/benincosa.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}