Question

I’m having trouble styling the Sidebar Menu with my CSS. I just need it working with the current CSS so I can tweak it to how I need it to look. I’ve stated the Sidebar Menu in functions.php and created a Menu within the Admin area of WordPress, but it doesn’t seem to change anything at all.

Here is the link to the page (The Sidebar Menu is where it says Our Sectors) : View Page

Below is the code from the sidebar.php file.

<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' ) ); /* editable within the WordPress backend */ ?>
            </ul>
        </li>

        <li id="sidebar-search" class="widget">
            <h3><?php _e('Search'); ?></h3>
            <?php get_search_form(); /* outputs the default WordPress search form */ ?>
        </li>

        <li id="sidebar-archives" class="widget">
            <h3><?php _e('Archives') ?></h3>
            <ul>
                <?php wp_get_archives( 'type=monthly' ); ?>
            </ul>
        </li>

        <li id="sidebar-meta" class="widget">
            <h3><?php _e('Meta') ?></h3>
            <ul>
                <?php wp_register(); ?>
                <li><?php wp_loginout(); ?></li>
                <?php wp_meta(); ?>
            </ul>
        </li>
    </ul>
    <?php endif; ?>
</div><!--mod_sidebar-->

And below is basically the CSS for that Menu :

#sidebar-nav,
#sidebar-nav ul {list-style: none; padding: 0; margin: 0; border-radius: 5px; -moz-border-radius: 5px; font-weight: bold;}
#sidebar-nav a {display: block; padding: 10px; width: 210px;}
#sidebar-nav li {float: left; width: 150px;}
#sidebar-nav li:hover {background-color: #5da3e3; border-radius: 5px; -moz-border-radius: 5px;}
#sidebar-nav li ul {position: absolute; width: 210px; left: -999em; background-color: #1662a7;}
#sidebar-nav li:hover ul {left: auto; border-radius: 5px; -moz-border-radius: 5px;}

Can anyone help me?!

Thanks in advance!

Answer 1

Try this (but you can to use class <div class="some_class_name">):

 #mod_sidebar,
    #mod_sidebar ul {list-style: none; padding: 0; margin: 0; border-radius: 5px; -moz-border-radius: 5px; font-weight: bold;}
    #mod_sidebar a {display: block; padding: 10px; width: 210px;}
    #mod_sidebar li {float: left; width: 150px;}
    #mod_sidebar li:hover {background-color: #5da3e3; border-radius: 5px; -moz-border-radius: 5px;}
    #mod_sidebar li ul {position: absolute; width: 210px; left: -999em; background-color: #1662a7;}
    #mod_sidebar li:hover ul {left: auto; border-radius: 5px; -moz-border-radius: 5px;}