Adding a drop-down submenu to a navigation menu increases the height to the container

0
votes

I'm creating my own wordpress theme and I took help from this link to create a drop-down submenu.

The problem is while hovering over the navigation menu, I want the submenu to appear like this- enter image description here

and it looks like this originally -

enter image description here

and after hovering it looks like this - enter image description here



How to rectify this so that the height of the top level menu stays as it is and the submenu appears like the one in the first image?

The code is given below- CSS:

.site-nav ul ul 
{
    display: none;
}

.site-nav ul li:hover > ul {
    display: block;
}

Wordpress HTML + PHP code

       <nav class="site-nav">
            <?php 
                $args=array(
                    'theme_location'  => 'primary',
                    'menu'            => '',
                    'container'       => 'div',
                    'container_class' => '',
                    'container_id'    => '',
                    'menu_class'      => 'menu',
                    'menu_id'         => '',
                    'echo'            => true,
                    'fallback_cb'     => 'wp_page_menu',
                    'before'          => '',
                    'after'           => '',
                    'link_before'     => '',
                    'link_after'      => '',
                    'items_wrap'      => my_nav_wrap(),
                    'depth'           => 2,
                    'walker'          => ''
                );
            ?>
            <?php wp_nav_menu($args); ?>
        </nav>

This is the rendered HTML code :

<nav class="site-nav">
    <div class="menu-cf-menu-test-container">
        <ul id="menu-cf-menu-test" class="menu">
            <li id="menu-item-1561" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1553 current_page_item menu-item-1561">
                <a href="http://localhost/wordpress/?page_id=1553">Home</a>
            </li>
            <li id="menu-item-1243" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1243">
                <a href="http://localhost/wordpress/?page_id=1220">About</a>
            </li>
            <li id="menu-item-1535" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1535">
                <a href="http://localhost/wordpress/?page_id=1214">Program Implementation</a>
            </li>
            <li id="menu-item-1283" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1283">
                <a href="#">Register</a>
            </li>
            <li id="menu-item-1536" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1536">
                <a href="http://localhost/wordpress/?page_id=1371">Login</a>
            </li>
            <li class="menu-item-has-children">
                <a href="/profile">Hi sid!</a>
                <ul class="sub-menu">
                    <li>
                        <a href="/profile">View Profile</a>
                    </li>
                    <li>
                        <a href="/logout">Logout</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>                
</nav>
2
csswordpresswordpress-theming
I put together a fiddle to try and see what's happening, but it isn't quite right. If you like, modify it and post your version. jsfiddle.net/isherwood/ohbkq0px – isherwood
@isherwood, you've put exactly what is currently happening and I want to change it to the one in the first picture. I want to make my dropdown menu similar to Bootstrap's navbar menu but I'm unable to figure out how to do it. – Siddharth Thevaril
Let us continue this discussion in chat. – Siddharth Thevaril

2 Answers

-2
votes

<nav class="site-nav">
    <div class="menu-cf-menu-test-container">
        <ul ><a href="http://localhost/wordpress/?page_id=1553">Home</a>
            </li>
            <li><a href="http://localhost/wordpress/?page_id=1220">About</a>
            </li>
            <li >
                <a href="http://localhost/wordpress/?page_id=1214">Program Implementation</a>
            </li>
            <li i>
                <a href="#">Register</a>
            </li>
            <li >
                <a href="http://localhost/wordpress/?page_id=1371">Login</a>
            </li>
            <li>
                <a href="/profile">Hi sid!</a>
                <ul class="sub-menu">
                    <li>
                        <a href="/profile">View Profile</a>
                    </li>
                    <li>
                        <a href="/logout">Logout</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>                
</nav>

This is how it should look

-2
votes

This is close to the code that I use in my tabs:

<ul id="nav">
    <li><a href="/index.php">Home</a></li>
    <li><a href="/item1/">Item 1</a></li>
    <li><a href="/item2/">Item 2</a></li>
    <li><a href="/item3/">Item 3</a></li>
    <li><a href="/item4/">Item 4</a></li>