LinuxQuestions.org

LinuxQuestions.org (/questions/)
-   Programming (https://www.linuxquestions.org/questions/programming-9/)
-   -   HTML/CSS trouble with overlapping DIV and possibly Z-INDEX (https://www.linuxquestions.org/questions/programming-9/html-css-trouble-with-overlapping-div-and-possibly-z-index-4175653954/)

mfoley 05-15-2019 10:31 AM

HTML/CSS trouble with overlapping DIV and possibly Z-INDEX
 
I have the html shown below. I have two problems. First, when I hover over the "Topics", the pop-down menu appears, but page text behind the menu is visible. Why? The background color is rgb(171,102,102), there is no rgba().

Second, when I hover down the list of menu items and cross to where "2nd Topic" is behind the menu, it closes "First Topic"'s menu and shows the menu for "2nd Topic". Why? First Topic's menu is in front of the "2nd Topic" <DIV>.

Help appreciated.
Code:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">

div.topic {
  z-index: 1;
  position: relative;
  margin: 0 3px 0 3px;
  height: 22px;
  padding: 3px 6px 3px 6px;
  float: left;
  white-space: nowrap;
  text-align: left;
  background-color: transparent;
  font-weight: bold;
border: 1px dashed blue;
}

div.submenu {
  z-index: 2;
  position: absolute;
  border-radius: 6px;
  top: 28px;
  left: 0px;
  text-align: left;
  color: black;
  font-size: 12PT;
  font-weight: normal;
  background-color: transparent;
  visibility: hidden;
}

div.topic:hover div.submenu {
    background-color: rgb(171,102,102);
    visibility: visible;
    transition: all .5s;
}

div.submenu ul {
  margin: 0px; padding: 0px;
  list-style-type: none;
}

div.submenu li {
  padding: 0;
  margin: 0;
  margin-top: -15px;
  font-size: 12pt; 
  visibility: hidden;
  transition: all .2s;
}

div.topic:hover div.submenu li {
  margin-top: 0px;
  padding: 0px 8px 0px 8px;
  visibility: visible;
  transition: all .3s
}
</style>
</head>
<body>

<DIV style="margin-top: 1.5em; border: 1px dotted magenta">
  <Div class="topic">
First Topic
    <div class="submenu" style="left: 30px">
      <ul>
        <li>Menu Item 1</li>
        <li>Menu Item 2</li>
        <li>Menu Item 3</li>
        <li>Menu Item 4</li>
        <li>Menu Item 5</li>
      </ul>
    </div>
  </Div>
  <div style="clear: both;"></div>
</DIV>

<DIV style="margin-top: 1.5em; border: 1px dotted magenta">
  <Div class="topic">
2nd topic
    <div class="submenu" style="left: 30px">
      <ul>
        <li>Menu Item 1</li>
        <li>Menu Item 2</li>
        <li>Menu Item 3</li>
        <li>Menu Item 4</li>
        <li>Menu Item 5</li>
      </ul>
    </div>
  </Div>
  <div style="clear: both;"></div>
</DIV>

</body>
</html>


scasey 05-15-2019 03:17 PM

Interesting problem. I tried your code and discovered that div.topic and div.submenu are actually in front of the pop-down menu, not behind it. Change the background-color on those to white instead of (the default) transparent to see what happens. When those are transparent, the pop-down is actually visible behind them.

That's probably because div.topic and div.submenu are parents of the hover...but I'm not sure. I, too, am just learning about the finer points of CSS.

Just wanted to point that out...I don't have time right now to troubleshoot further, sorry. Suggest you look through the CSS properties at https://www.w3schools.com/CSSref/ and/or search for example menu codes you can tweak.

mfoley 05-15-2019 11:33 PM

Quote:

Originally Posted by scasey (Post 5995401)
Interesting problem. I tried your code and discovered that div.topic and div.submenu are actually in front of the pop-down menu, not behind it.

Huh! I thought that's what z-index was supposed to take care of. OK, I guess I'll do some experimenting. Thanks for the tip.

After some experimentation ...

I can get the submenu to open in front of the "topics" if I remove the z-index: 1. Not entirely sure why, and that might break something else.

I'll leave this open for a bit in case some expert out there has an explanation for why removing the z-index on the position: relative "topic" DIV let's the submenu open in front of subsequent "topic" DIVs, but specifying z-index: 1 on "topic" makes the submenu (which is z-index: 2) open behind subsequent "topic" DIVs.

ondoho 05-18-2019 05:26 AM

dunno; code looks wrong somehow.
firstly i use "display:none" instead of "visibility:hidden" - i once read that there's a good reason for that but have forgotten what that reason is.
if you can live with clicking on things instead of hovering, the checkbox hack is invaluable.
I'm sure I also had the hover-dropdown working somewhere - let's see... go to this page, make sure that javascript is disabled, right-click on e.g. the "Quick Links" dropdown and "Inspect Element", then look at the HTML & CSS.

mfoley 05-20-2019 04:59 PM

I'm gonna consider this one resolved. It's been working solidly for about 5 days. I too normally use "display: none", but the example I from which I copied/stole the <ul><li> drop-down menu config from used the "visibility:hidden" construct - don't know why, but it seem to be working now. Thanks for the help.


All times are GMT -5. The time now is 08:14 AM.