I'm trying to get the Sidebar Menu looking the same on the correct Live version, but working right so it overlaps the border upon Hover of the items, on the Test version (View Page)
The Sidebar Menu on the Live version looks like this (View Page)
I'm guessing the way to get the Hover feature looking like it's overlapped the border line is to increase the width of the Sidebar area and then manually position the menu? I do have some code below if that would help make sense?
<div id="mod_sidebar">
<?php if ( ! dynamic_sidebar( 'Sidebar' )) : ?>
<ul>
<li id="sidebar-nav" class="widget menu">
<h3><?php _e('Navigation'); ?></h3>
<ul>
<?php wp_nav_menu( array( 'theme_location' => 'sidebar-menu' ) );?>
</ul>
</li>
</ul>
<?php endif; ?>
</div><!--mod_sidebar-->
#mod_sidebar {
float: left;
width: 202px;
/*background-color: #F96;*/
background: url(images/sidebar-bg.jpg);
background-repeat: no-repeat;
}
#mod_sidebar .widget-area {
padding-bottom: 20px;
margin-bottom: 20px;
}
#mod_siebar ul,
#mod_sidebar li {
padding: 0;
margin: 0;
list-style: none;
}
#mod_sidebar .children {
padding-left: 10px;
}
#mod_sidebar .children .children {
padding-left: 10px;
}
The CSS is below
#mod_sidebar,
#mod_sidebar ul {list-style: none; padding: 0; margin: 0;}
#mod_sidebar a {display: block; padding: 10px; width: 210px; font-size: 13px; color: #174267;}
#mod_sidebar li {float: left; width: 190px; background-color: #F4F8Fa; border-top: 1px solid #c3ced5;}
#mod_sidebar li:hover {background: url(images/hover_bg.png);}
#mod_sidebar li ul {position: absolute; width: 210px; left: -999em; background-color: #1662a7;}
#mod_sidebar li:hover ul {left: auto; background: url(images/hover_bg.png);}
Just need a bit of guidance on this if possible! Thanks again!
You can start by looking at line 3904 of this file: http://cdn.snowflakesoftware.com/wp-content/themes/twentyeleven/style.css (The stylesheet belonging to the site that has the layout you seem to be after.
Notice that they are doing a few things here:
1) Using negative margins. So on the menu items hover and active states:
.side-menu a.active, .side-menu a:hover
The elements have a negative right margin of 17px:
margin-right: -17px;
2) The CSS in this sheet is also giving the a.active and a:hover the following background image: http://cdn.snowflakesoftware.com/wp-content/themes/twentyeleven/images/hover_bg.png
Start by looking at these two bits outlined above and see how close it gets you to what you desire.
You could also just copy the CSS and HTML that is being used in production (LIVE site)...
