I made a dropdown menu using the twentyeleven theme as a base, and after working out the styling, I have an issue with my drop downs displaying under the content instead of on top.
Here is the menu CSS:
#access1 .second-menu {
clear: both;
background: #FBFBFB; /* 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);
-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;
border:solid #e1e1e1;
border-width:1px;
display: block;
float: left;
margin: 0 auto;
width:958px;
font-family: Lucida Grande, Lucida Sans Unicode, Arial, sans-serif;
}
#access1 .second-menu ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 20px;
text-transform:uppercase;
}
#access1 .second-menu li {
float: left;
position: relative;
}
#access1 .second-menu a {
color: #5B5B5B;
display: block;
line-height: 2.3em;
padding: 0 1.2125em;
text-decoration: none;
}
#access1 .second-menu 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: 2.3em;
left: 0;
width: 188px;
z-index: 99999;
}
#access1 .second-menu ul ul ul {
left: 100%;
top: 0;
}
#access1 .second-menu 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;
}
#access1 .second-menu li:hover > a,
#access1 .second-menu ul ul :hover > a,
#access1 .second-menu a:focus {
background: #efefef;
}
#access1 .second-menu li:hover > a,
#access1 .second-menu a:focus {
background: #FFFFFF; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#e5e5e5, #FFFFFF);
background: -o-linear-gradient(#e5e5e5, #FFFFFF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e5e5e5), to(#FFFFFF)); /* Older webkit syntax */
background: -webkit-linear-gradient(#e5e5e5, #FFFFFF);
color: #373737;
}
#access1 .second-menu ul li:hover > ul {
display: block;
}
#access1 .second-menu .current-menu-item > a,
#access1 .second-menu .current-menu-ancestor > a,
#access1 .second-menu .current_page_item > a,
#access1 .second-menu .current_page_ancestor > a {
font-weight: bold;
}It goes into the theme with wordpress' menu functionality (called in by a function.)
This is the html/php where it shows up in the navigation (I tried separating the div content boxes for each of the menus in an effort to fix the problem, but it didn't help.)
<div id="access" role="navigation">
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'container_class' => 'primary-menu', 'theme_location' => 'menu-1' ) ); ?>
</div>
<div id="access1" role="navigation">
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'container_class' => 'second-menu', 'theme_location' => 'menu-2' ) ); ?>
</div>There is a second menu up and to the left of the first menu, the CSS for it is here: (I'm not sure how it would effect things, maybe it could interfere somehow?)
#access .primary-menu {
background: #FFF; /* Show a solid color for older browsers */
clear: both;
display: block;
float: right;
margin: 0 auto;
font-family: Lucida Grande, Lucida Sans Unicode, Arial, sans-serif;
text-transform:none;
}
#access .primary-menu ul {
font:18px;
text-decoration:none;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
}
#access .primary-menu li {
text-decoration:none;
list-style:none;
float: left;
position: relative;
}
#access .primary-menu a {
color: #65062a;
display: block;
line-height:22px;
padding:0 9px 0 11px;
border:solid #ebebeb;
border-width:1px 1px 0;
position:relative;
width:95px;
text-decoration: none;
}
#access .primary-menu 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 .primary-menu ul ul ul {
left: 100%;
top: 0;
}
#access .primary-menu 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 .primary-menu li:hover > a,
#access .primary-menu ul ul :hover > a,
#access .primary-menu a:focus {
background: #efefef;
}
#access .primary-menu li:hover > a,
#access .primary-menu 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 .primary-menu ul li:hover > ul {
display: block;
}
#access .primary-menu .current-menu-item > a,
#access .primary-menu .current-menu-ancestor > a,
#access .primary-menu .current_page_item > a,
#access .primary-menu .current_page_ancestor > a {
font-weight: bold;
}Also, sorry, but this website is not up for others to see. I'm running it through a localhost.
