Controlling the Navigation with CSS

[xrmarcis]

This stuff gets tricky when you are working in classes and ID's

Here is a sample of how i did some styling for my nav menu. Always started off with the ID and then work the tags to format. When you get the basic stuff down then you add extras like .current to the li tag

Code:

#nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

            #nav ul li {
            --    display: block;
                padding: 0 12px 0 12px;
                float: left;
            }
        
                #nav ul li a {
                    display: block;
                    text-decoration: none;
                    color: #ffffff;
                --    border-top: 1px solid #ffffff;
                --    padding: 5px 15px 5px 15px;
                --    background: #2C5463;
                --    margin-left: 1px;
                    white-space: nowrap;
                }

                #nav ul li a:hover {
                    background: #007289;
                    box-shadow: inset 0px -10px 40px 0px #005B6D;
                }

This is what my div looks like in my template.

Code:

<div id="nav">
        <ul>
            <?php get_i18n_navigation(return_page_slug(), 0, 1, I18N_SHOW_Menu); ?>
        </ul>
    </div>

Hope this helps you get started.