LinuxQuestions.org
Welcome to the most active Linux Forum on the web.
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices


Reply
  Search this Thread
Old 05-15-2019, 10:31 AM   #1
mfoley
Senior Member
 
Registered: Oct 2008
Location: Columbus, Ohio USA
Distribution: Slackware
Posts: 1,621

Rep: Reputation: 128Reputation: 128
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>
 
Old 05-15-2019, 03:17 PM   #2
scasey
Senior Member
 
Registered: Feb 2013
Location: Tucson, AZ, USA
Distribution: CentOS 7.6
Posts: 3,053

Rep: Reputation: 1067Reputation: 1067Reputation: 1067Reputation: 1067Reputation: 1067Reputation: 1067Reputation: 1067Reputation: 1067
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.
 
2 members found this post helpful.
Old 05-15-2019, 11:33 PM   #3
mfoley
Senior Member
 
Registered: Oct 2008
Location: Columbus, Ohio USA
Distribution: Slackware
Posts: 1,621

Original Poster
Rep: Reputation: 128Reputation: 128
Quote:
Originally Posted by scasey View Post
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.

Last edited by mfoley; 05-16-2019 at 01:09 AM. Reason: maybe working, dunno why exactly
 
Old 05-18-2019, 05:26 AM   #4
ondoho
LQ Addict
 
Registered: Dec 2013
Posts: 11,621
Blog Entries: 9

Rep: Reputation: 3076Reputation: 3076Reputation: 3076Reputation: 3076Reputation: 3076Reputation: 3076Reputation: 3076Reputation: 3076Reputation: 3076Reputation: 3076Reputation: 3076
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.
 
Old 05-20-2019, 04:59 PM   #5
mfoley
Senior Member
 
Registered: Oct 2008
Location: Columbus, Ohio USA
Distribution: Slackware
Posts: 1,621

Original Poster
Rep: Reputation: 128Reputation: 128
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.
 
  


Reply

Tags
css, html5, visibility


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off



Similar Threads
Thread Thread Starter Forum Replies Last Post
[HTML|CSS] Move div with placeholder so that div in row above may overlap brianmcgee Programming 1 06-15-2011 01:08 PM
HTML / CSS: Overflow div in a table rubadub Programming 3 06-08-2010 07:04 PM
html / css footer <div> won't behave esteeven Programming 2 08-02-2009 08:04 AM
css/html wtf? extra space below div nkoplm Programming 1 06-27-2007 03:31 PM
Trying to create overlapping CSS div boxes. rose_bud4201 Programming 2 05-13-2007 02:27 PM

LinuxQuestions.org > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 03:50 AM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Facebook: linuxquestions Google+: linuxquestions
Open Source Consulting | Domain Registration