0

I have an HTML5 page, which has a <header> element containing the <nav> section.

Due to the style and design of the overall header, the nav is absolutely positioned within the header, which is itself relatively positioned.

This works perfectly for anchors <a> for which it was originally intended. However, I now have need to add a drop-down menu and am using this one:

http://webdesignerhut.com/css-dropdown-menu/ and How to get a drop-down menu to overlay other elements

But the issue with this and any other CSS dropdown menus that I have found is that they require the parent element to be relatively positioned, but I can't mark the parent <nav> as being both relative and absolute. I am also finding similar CSS requirements with my investigation of jQuery alternatives.

Markup:

<html>
  <header>
    <nav>
      <ul>
        <li>
          <a>menu option</a>
        </li>
        <li>
          <a>menu option</a>
          <ul>
            <li><a>submenu option</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </header>

  <main>
    ...
  </main>
</html>

CSS (simplified, this works for non-dropdown selection)

header {
  position: relative;
}

nav {
  position: absolute;
}

CSS (required by dropdowns)

nav {
  position: relative;
}

nav ul {
  position: absolute;
}

So how can I make the nav element act as a position:relative to its children but act as a position:absolute to its parent?

EDIT

Here is a fiddle trying to outline what's going on. https://jsfiddle.net/8j9z8wak/

It seems the original cause is that the header element (of which nav is a child) has overflow:hidden which helps with resizing on mobile devices and variable screen sizes with floating images on the top left corner of the header image.

I currently on the fiddle have tried to play with overflow-x and overflow-y but this results in scrollbars and not the intended overflow that works with removing overflow:hidden

re (just for your info.) : There are a lot of CSS / HTML parts to the fiddle, the issue is not the bare bones of the navigation but the way it fits with these other parts, so I've kept them in.

I have the nav as a child of header and I need the header to use overflow:hidden, but nav CSS menu works as intended without overflow:hidden.

  • I have retained media queries as the overflow:hidden is required for smaller screen size handling.

  • The navigation menu elements have a floating pair of parts that centre the float as found from https://stackoverflow.com/a/21508512/3536236 . This was applied just for today because all dropdown menu systems use floating elements, and they need to be centred.

Community
  • 1
  • 1
Martin
  • 22,212
  • 11
  • 70
  • 132
  • 2
    It sounds like you should have another container element around ` – Paul Redmond Nov 16 '15 at 13:14
  • I have an issue using the two div method that the dropdown does not display, it is hidden behind the `main` element. – Martin Nov 16 '15 at 14:16
  • 1
    Does it hide behind main or is it not visible outside the nav or header element? If nav or header has overflow:hidden; it may just not be overflowing. Otherwise you might want to add some z-index's to force it infront. – Darren Gourley Nov 16 '15 at 14:49
  • 1
    Can you provide a working fiddle? That's an easy question, but without a test case it's hard to view what is your requirement. – Marcos Pérez Gude Nov 16 '15 at 14:50
  • @DarrenGourley I have used `z-index` but that hasn't helped. I'm now trying with removing overflow hidden... – Martin Nov 16 '15 at 15:05
  • ok so @DarrenGourley removing overflow hidden from the `header` element does work, it makes it work but that causes secondary effects associated with the `header` element, however setting an overflow for the `nav` element doesn't overwrite the `header` elements overflow setting. Which is so close yet not quite a success. Any ideas? – Martin Nov 16 '15 at 15:07
  • @Martin I assume you're using overflow hidden because elements within it are floated? You could try removing the floats from the elements and rework that, otherwise you could give your header a height. – Darren Gourley Nov 16 '15 at 15:10
  • @DarrenGourley removing overflow hidden causes , er, overflow on resize or on mobile sizing of the page. I need the `header` element specifically to retain overflow hidden but the `nav` element and its children to pop-out of that . Arr so close! – Martin Nov 16 '15 at 15:15
  • @DarrenGourley I have tried using `overflow-x / y` to define each one but that makes the header act like a frame. I am making a fiddle now.... – Martin Nov 16 '15 at 15:17
  • @MarcosPérezGude I have added a fiddle and small update – Martin Nov 16 '15 at 15:33

2 Answers2

0

Add another container element inside the <nav> and then use position: relative on the inner container:

<html>
  <header>
    <nav>
    <div>
      <ul>
        <li>
          <a>menu option</a>
        </li>
        <li>
          <a>menu option</a>
          <ul>
            <li><a>submenu option</a></li>
          </ul>
        </li>
      </ul>
    <div>
    </nav>
  </header>

  <main>
    ...
  </main>
</html>

CSS:

header {
  position: relative;
}

nav {
  position: absolute;
}

nav div {
  position: relative;
}

nav div ul {
  position: absolute;
}
David Wilkinson
  • 5,060
  • 1
  • 18
  • 32
Arun Kumar M
  • 1,633
  • 1
  • 15
  • 26
  • Thanks Arun, I have run this through and have a possibly related issue that the dropdown part of the menu does not display and appears to be "behind" the `
    ` part of the page structure. :-/
     – Martin Nov 16 '15 at 14:17
0

Check this code to clear the concept.

div{
    border:1px solid #f00;    
}
.gp{
    position:relative;
    height:100px;
    width:100%;
    display:block;
    float:left;
    overflow:hidden;
}
.p{
    position:absolute;
    top:30px;
    left:5%;
    z-index:1;
    width:90%;
    height:50px;
}
.c{
    position:relative;
    border:1px solid #0f0;
}
<div class="gp">
    Grand Parents
    <div class="p">
        Parents
        <div class="c"> childs </div>
    </div>
</div>
Jay Patel
  • 5,783
  • 1
  • 17
  • 20