CODEWITHSUNDEEP
htmlcss
Jung Sun
Jung Sun

Reputation: 11

Why my CSS-3 menu not showing sub-menu?

I am using this vertical menu.

When i add an image aside this menu, sub-menu did not show.

<nav id="menu"></nav><img src="1.jpg">

Check the screen capture below.

menu

What could be going wrong?

Upvotes: 0

Views: 70

Answers (3)

Demeter Dimitri
Demeter Dimitri

Reputation: 618

The content gets into scroll.

I am guessing that, you are using float to get your menu to left and the image next to it. When you add float, the object loses it is flexibility on the entire page and becomes a block element.

Try this;

#menu {
    overflow: auto;
    position: relative;
    z-index: 2;
    float: left;
    width: 400px;
}


 <h3>CSS3 Vertical Menu With Sub Menus</h3>

    <nav id="menu">
        <ul class="parent-menu">
            <li><a href="#">Home &amp; Kitchen</a>
                <ul>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                </ul>
            </li>
            <li><a href="#">Electronics</a>
                <ul>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                </ul></li>
            <li><a href="#">Clothing</a>
                <ul>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                </ul></li>
            <li><a href="#">Cars &amp; Motorbikes</a>
                <ul>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                </ul>
            </li>
            <li><a href="#">Books</a>
                <ul>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                </ul>
            </li>
            <li><a href="#">Support</a>
                <ul>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Forum</a></li>
                    <li><a href="#">Deliveries</a></li>
                    <li><a href="#">T&amp;C</a></li>
                </ul>
            </li>
        </ul>
    </nav>
<div style="height:100px;width:200px;background:red;float: left;margin-left: -200px;"></div>

Upvotes: 1

shivani
shivani

Reputation: 1028

try to use bootstrap grid system

Script Files..

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Html Code

<div class="container-fluid"> 
        <div class="row">
             <div class="col-sm-6">

               //put your menu code here...

             </div>
             <div class="col-sm-6">

              // put your image here...

             </div>
        </div>
</div>

Upvotes: 0

Mukesh Ram
Mukesh Ram

Reputation: 6328

Add More z-index to your #menu. like this : 

#menu{
   z-index:200;
}

Upvotes: 1

Related Questions