CODEWITHSUNDEEP
htmlcssdrop-down-menu
Harshit
Harshit

Reputation: 5157

CSS Menu dropdown list on the top of everything

I have the code of menu list in CSS 

<style>
#primary_nav_wrap
{
    margin-top:15px
}

#primary_nav_wrap ul
{
    list-style:none;
    position:relative;
    float:left;
    margin:0;
    padding:0;
    background-color: #15497C;
    background: -webkit-linear-gradient(top, #15497C, #2384D3); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, rgba(0, 0, 0,1), rgba(0, 0, 0, 0.6)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top, #15497C, #1B63A3); /* For Firefox 3.6 to 15 */
    background: linear-gradient(top, #15497C, #2384D3); /* Standard syntax (must be last) */
}

#primary_nav_wrap ul a
{
    display:block;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    font-size:12px;
    line-height:32px;
    padding:0 15px;
    font-family:Verdana;

}

#primary_nav_wrap ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
    background:#040F25
}

#primary_nav_wrap ul li:hover
{
    background:#040F25
}

#primary_nav_wrap ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:##15497C;
    padding:0;
    z-index:1000px;
}

#primary_nav_wrap ul ul li
{
    float:none;
    width:200px;
}

#primary_nav_wrap ul ul a
{
    line-height:120%;
    padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
    top:0;
    left:100%
}

#primary_nav_wrap ul li:hover > ul
{
    display:block
}
    </style>

This code of CSS is used to make a menu with options in dropdown. Sample HTML code is

<nav id="aadd">
<ul>
  <li><a href="home.aspx">Home</a></li>
  <li><a href="#">44556677</a>
    <ul>

                        <li><a href="">abcd</a></li>
                        <li><a href="">defg</a></li>
                        <li><a href="">hijk</a></li>
                        <li><a href="">lmno</a></li>               
                        <li><a href="">pqrs</a></li>

   </ul>
  </li>
</ul>
</nav>

But here the problem is, the dropdown options goes behind after the image or buttons if present in the page which should not happen. The dropdown list in the menu should be at the top of everything. How can it happen ?

Upvotes: 0

Views: 7578

Answers (3)

clement
clement

Reputation: 4266

Please use Z index on the css elements if you want to priorize layers (the li for instance).

.veryImportant
{
z-index: 500;
}

.notImportant
{
z-index: 1;
}

So let's try 

li
{
z-index: 999;
}

Upvotes: 2

Sam B
Sam B

Reputation: 33

in your css use the z-index property

.frontitem{
z-index: 300;
}
.backtitem{
z-index: 10;
}

using this just set your li tags to to be in front and set everything a little farther back

Upvotes: 1

Manish Shukla
Manish Shukla

Reputation: 1365

I have made few changes in html

[fiddle example][1]

  [1]: https://jsfiddle.net/mike_manish/3gypn7c0/

Upvotes: 1

Related Questions