Kristine Posted July 6, 2012 Share Posted July 6, 2012 So, I have finally worked out how to center my navigation menu horizontally in a cross-browser compatible way. The problem I now have though is with my dropdowns. They have inherited some of the attributes I used to center the nav and now, when the menu parent is hovered over, the dropdown pops up over it, rather than under and to the side a bit. I've tried a few fixes though am not sure the best way to go about resolving the issue in the most browser friendly way.I'm sorry, though my site is not yet live. #nav {-khtml-border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;background-image:url(/wp-content/themes/child/images/banner.png);border-radius: 0px;clear: both;color: #555;margin: 0 auto 0px;overflow: hidden;text-align: center;text-transform: uppercase;height: 35px;width: 920px;}#nav ul {width: 100%;margin: 0 auto;display: inline-block;list-style: none;}#nav li {display: inline-block;list-style: none;}#nav li a {color: #90877C;display: block;font-size: 12px;float: left;margin: 0px 0px 0px 0px;padding: 8px 15px 0px 15px;text-decoration: none;}#nav li a:hover,#nav li a:active,#nav li:hover a,#nav .current_page_item a,#nav .current-cat a,#nav .current-menu-item a {color: #90877C;}#nav li a:hover {color: #222;}#nav li li a,#nav li li a:link,#nav li li a:visited {background: #fbf7eb;border-top-width: 0px;color: #555;font-size: 11px;position: relative;margin: 0px px 0px 5px;text-transform: none;text-align: left;width: 100px;}#nav li li a:hover,#nav li li a:active {color: #222;}#nav li ul {height: auto;left: -9999px;margin: 0 0 0 -1px;position: absolute;width: 150px;z-index: 9999;}#nav li ul a {width: 130px;}#nav li ul ul {margin: -33px 0 0 122px;}#nav li:hover>ul,#nav li.sfHover ul {left: auto;} I should probably mention I'm just learning CSS so any clear suggestions would be great. Thanks so much. Link to comment Share on other sites More sharing options...
kanchatchai Posted July 23, 2012 Share Posted July 23, 2012 /* Sample Topmenu From Twentyeleven WP*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline;}/* Assistive text */.assistive-text { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px);}#access a.assistive-text:active,#access a.assistive-text:focus { background: #eee; border-bottom: 1px solid #ddd; color: #1982d1; clip: auto !important; font-size: 12px; position: absolute; text-decoration: underline; top: 0; left: 7.6%;}/* =Header----------------------------------------------- */#branding { border-top: 2px solid #bbb; padding-bottom: 10px; position: relative; z-index: 9999;}#site-title { margin-right: 270px; padding: 3.65625em 0 0;}#site-title a { color: #111; font-size: 30px; font-weight: bold; line-height: 36px; text-decoration: none;}#site-title a:hover,#site-title a:focus,#site-title a:active { color: #1982d1;}#site-description { color: #7a7a7a; font-size: 14px; margin: 0 270px 3.65625em 0;}#branding img { height: auto; margin-bottom: -7px; width: 100%;}/* =Menu-------------------------------------------------------------- */#access { background: #222; /* Show a solid color for older browsers */ background: -moz-linear-gradient(#252525, #0a0a0a); background: -o-linear-gradient(#252525, #0a0a0a); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */ background: -webkit-linear-gradient(#252525, #0a0a0a); -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; clear: both; display: block; float: left; margin: 0 auto 6px; width: 100%;}#access ul { font-size: 13px; list-style: none; margin: 0 0 0 -0.8125em; padding-left: 0;}#access li { float: left; position: relative;}#access a { color: #eee; display: block; line-height: 3.333em; padding: 0 1.2125em; text-decoration: none;}#access ul ul { -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2); box-shadow: 0 3px 3px rgba(0,0,0,0.2); display: none; float: left; margin: 0; position: absolute; top: 3.333em; left: 0; width: 188px; z-index: 99999;}#access ul ul ul { left: 100%; top: 0;}#access ul ul a { background: #f9f9f9; border-bottom: 1px dotted #ddd; color: #444; font-size: 13px; font-weight: normal; height: auto; line-height: 1.4em; padding: 10px 10px; width: 168px;}#access li:hover > a,#access ul ul :hover > a,#access a:focus { background: #efefef;}#access li:hover > a,#access a:focus { background: #f9f9f9; /* Show a solid color for older browsers */ background: -moz-linear-gradient(#f9f9f9, #e5e5e5); background: -o-linear-gradient(#f9f9f9, #e5e5e5); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */ background: -webkit-linear-gradient(#f9f9f9, #e5e5e5); color: #373737;}#access ul li:hover > ul { display: block;}#access .current-menu-item > a,#access .current-menu-ancestor > a,#access .current_page_item > a,#access .current_page_ancestor > a { font-weight: bold;} Link to comment Share on other sites More sharing options...
dsonesuk Posted July 23, 2012 Share Posted July 23, 2012 What ewver you have set for the top Ul and LI, you have to reset for the sublevel UL and LI to there original state ie parent #nav ul ul {width: 100%;margin: 0 auto;display: inline-block;list-style: none;}#nav li {display: inline-block;list-style: none;} sublevel#nav ul ul{display: block;}#nav li li {display: block;}to bring the sublevel menu down add top property to#nav li ul {top: ##px; /* to the value you require*/height: auto;left: -9999px;margin: 0 0 0 -1px;position: absolute;width: 150px;z-index: 9999;} Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now