Jump to content

Help please....menu dropdown issues


Kristine

Recommended Posts

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

  • 3 weeks later...

/* 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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...