DOES Z INDEX IN CSS WORK TO KEEP DROP DOWN IN FRONT & ON TOP

  • Hello,

    I’m get there with a few more tweaks…

    When using a text module to create a drop down menu from a single word I am having trouble when menu drops down it expands module and pushes the row and section the module is in down. Not the wanted result.

    Want the menu to expand / drop down on top in front / over of everything so the section and row does not move.

    I used z-index: 1; (and auto and 1 to 5) in the css that does not work. Wondering what I’m missing, is there a quick fix?

    Example is on this page: https://signmasters.com/menu-mock/

    CSS USED IN DIVI THEME OPTIONS GENERAL HERE:

     }

 .dropdown {
 position: relative;
 display: inline-block;

 }

 .dropdown-content {
 display: none;
 position: absolute;
 background-color: #ff0000;
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 padding: 12px 16px;
 z-index: auto;
 }

 .dropdown:hover .dropdown-content {
 display: block;
 position: relative;

 }

    AND THIS ADDED TO TEXT MODULE – TEXT SETTINGS – MEDIA – TEXT:

     <p><strong>QUALITY</strong><br /><strong> SIGNAGE</strong><br /><strong> Since 1976!</strong></p>
 <div class="dropdown"><p><strong><span style="color: #ff0000;">MENU</span></strong></p>
 <div class="dropdown-content">
 <p><a href="../blank2pagecopy2/">Hello World!</a></p>
 <p><a></p>
 </div>
 </div>

    HELP!

    Thanks,

    USAMark

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello,

    Should be change the dropdown and dropdown-content html code.

    Actual code:

    <div class="dropdown"><p><strong><span style="color: #ff0000;">MENU</span></strong></p>
 <div class="dropdown-content">
 <p><a href="../blank2pagecopy2/">Hello World!</a></p>
 <p><a></p>
 </div>
 </div>

    Updated code:

    <div class="dropdown"><p><strong><span style="color: #ff0000;">MENU</span></strong></p></div>
 <div class="dropdown-content">
 <p><a href="../blank2pagecopy2/">Hello World!</a></p>
 <p><a></p>
 </div>

    Change the blow css

    Actual code:

    .dropdown-content
    {
    display: none;
    position: absolute;
    background-color: #ff0000;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: auto;
    }

    Updated code:

    .dropdown-content
{
visibility: hidden;
position: absolute;
background-color: #ff0000;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 99999;
transition: visibility 0s, opacity 0.5s linear;
opacity: 0;
}
.dropdown p:hover .dropdown-content
{
 visibility: visible;
opacity: 1;
}

    [ Signature deleted ]

    • This reply was modified 7 years, 1 month ago by bootsgrid.
    Thread Starter sm2018

    (@sm2018)

    Hello and Thank You for that information ??

    I tried to get it to work many different ways. Did not, not sure what I’m doing wrong.

    No drop down when hover. Also trying different ways got blank drop down and pushed all under word “MENU” down not on top.

    Trying to get drop down centered under word “MENU” and link tesx in drop down justify left. Black text on white box. All on top of all under the word “MENU”

    Drawing on https://signmasters.com/menu-mock/

    Thanks A MIL!!!

    USAMark

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘DOES Z INDEX IN CSS WORK TO KEEP DROP DOWN IN FRONT & ON TOP’ is closed to new replies.