Dropdown Menu - Disappearing Act!

[jbenham10]

Hi guys,

Having a very minor problem with a dropdown menu in a website I am currently trying to construct - the vast majority is completely fine, there is just one of the dropdowns that disappears when I scroll the mouse down to the bottom option - the rest are all working nicely!
HTML and CSS code, plus screenshot below - The issue is regarding the 'Bands' option under the 'For Hire' menu.

HTML

<nav>

<div id="navbar">

  <meta charset="utf-8">

    <ul>

      <li><a href="#">About Us</a></li>

      <li><a href="#">Rehearsals</a>

        <ul>

          <li><a href="#" class="sub">Live Room</a></li>

          <li><a href="#" class="sub">Isolation Room</a></li>

        </ul>

      </li>

      <li><a href="#">For Hire</a>

        <ul>

          <li><a href="#" class="sub">Event Packages</a></li>

          <li><a href="#" class="sub">Large Events</a></li>

          <li><a href="#" class="sub">Equipment</a></li>

          <li><a href="#" class="sub">Bands</a></li>

        </ul>

      </li>

      <li><a href="#">Recording</a>

        <ul>

          <li><a href="#" class="sub">Audio</a></li>

          <li><a href="#" class="sub">Video</a></li>

        </ul>

      </li>

      <li><a href="#">Other Services</a>

        <ul>

          <li><a href="#" class="sub">Buy/Sell</a></li>

          <li><a href="#" class="sub">Repairs</a></li>

        </ul>

      </li>

      <li><a href="#">Contact Us</a></li>

    </ul>

</div>

</nav>

CSS

#navbar * {

    -webkit-text-size-adjust: 100%;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    padding: 0;

    margin: 0;

    position: relative;

    bottom: 10%;

}

body {background-color:#79c5f4;}

nav ul { list-style:none;

}

li:nth-child(1) {background-color:#71aace;}

li:nth-child(2) {background-color:#6c73b1;}

li:nth-child(3) {background-color:#d3c530;}

li:nth-child(4) {background-color:#82c845;}

li:nth-child(5) {background-color:#8f65a1;}

li:nth-child(6) {background-color:#d84e92;}

li:nth-child(7) {background-color:#444080;}

nav ul li {

    display:block;

    float:left;

    text-align:center;

    width:16.667%;

    position: relative;

}

nav ul li:hover {background-color:white;}

nav a {

    display:block;

    height:100%;

    font-family:'Impact', sans-serif;

    font-size:2.0vw;

    color:white;

    text-decoration:none;

    color:white;

    position: relative;

    padding-bottom:20px;

}

nav ul li ul {display:none;}

nav ul li:hover ul {display:block;}

nav ul li:hover :first-child:not(.sub) {color:black;}

nav ul li ul li {

    float:none;

    width:100%;

    position: relative;

}

nav .sub:hover {color:black;}

[Nancy OShea]

I don't see anything especially wrong with the code fragments you've posted so it must be caused by something we can't see.  For quickest help with code/layout issues, post a URL to your work online.  That way we can see what's going on in a browser with our developer tools.

Nancy

[jbenham10]

Thanks for the reply, I should probably add that the navbar is part of a template created containing divs and the 'text/content' is part of the editable region created to hold each pages' content so not sure whether this has any effect.

This might sound an utterly ridiculous amateurish question, but the pages are currently under creation in Dreamweaver so none are hosted - whats the easiest way to quickly host and post the link to you so the CSS works alongside the HTML file? (just tried to use a web hosting website, put the CSS files in folder with the page but none of the styles are applied?!)

[Nancy OShea]

You need to be working in a defined local site folder otherwise DW cannot properly manage paths and assets for you.

Once you've defined the site folder, then you input your FTP log-in credentials for your server.

Once your site is set up, you can upload files from the Files Panel by selecting Local files & hitting the UP arrow.

Nancy

[jbenham10]

Sorry about the late reply - I have worked that all out and have finally have a link for you!

UK Live Sound - Music Rehearsals, Recording, Event Hosting, Equipment Hire, Sale and Repair in Readi...

You will note I have a separate issue at the bottom regarding my footer not staying at the bottom I was planning to worry about that one next!

Edit: footer actually seems to come up OK on Firefox, it was not previously when testing and Dreamweaver still displays it as being 3/4 of way down the page in the way of the page content

[BenPleysier · Accepted solution]

The problem arises from the fact that you are using position:absolute;

#main {

  font-family: sans-serif;

  color: #ffffff;

  font-size: 28px;

position: absolute;

  width: 100%;

  height: auto;

  float: left;

  margin-top: 10%;

  max-width: 90%;

  margin-left: 5%;

}

position: absolute ignores other elements, apart from it’s position: relative ancestor. That is the reason that the drop-down disappears behind <div id="main">

[jbenham10]

Thanks that did the trick, knew it would be something as simple as that - this just now causes the issue of the menu pushing the content on the page down when the menu is activated? I think that was possibly why I had put absolute position to make sure it stayed where it was supposed to!

[Nancy OShea]

<this just now causes the issue of the menu pushing the content on the page down when the menu is activated>

Overlapping or colliding content is awkward.  Most toggles & drop-downs behave the way you describe for better usability on mobile & tablet devices where screen real estate is at a premium.  

[jbenham10]

I have taken the easy route and used a slightly larger margin-top setting on the 'main' div just so that the bottom of that lowest menu option sits just above the top of the page contents to avoid any funny business - leaves a slightly larger space than I would have liked in a perfect world (when the menu is closed it is noticable) but looks pretty ok!