Forums

WindberTSA

Hey guys. I am trying to create a two level drop down navigation menu. I wanted it to appear similar to this, http://jsfiddle.net/jblasco/XAE9c/ , but I was trying to make it on my own. The code below is what I have right now, but I am stuck and I was wondering if someone could help me figure out why it doesn't work.

Thanks!!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
  <style>

  #nav { width: 749px; float: left; margin: 0 0 3em 0; padding: 0; list-style: none; background-color: #0f181e; }
  #nav li { float: left; }
  #nav li a { display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; color: #fff; border-right: 1px solid #ccc; }
  #nav li a:hover { color: #06acff; background-color: #ffffff; }
  #nav ul { padding: 0; margin: 0; list-style: none; }
  #nav li ul { display: none; position: absolute; top: 1em; left: 0; }
  /*IE Fix*/#nav li > ul { top: auto; left: auto; }
  #nav li:hover ul, li.over ul{ display: block; }

  </style>
  <script>
  startList = function() {
  if (document.all&&document.getElementById) {
  navRoot = document.getElementById("nav");
  for (i=0; i<navRoot.childNodes.length; i++) {
  node = navRoot.childNodes[i];
  if (node.nodeName=="LI") {
  node.onmouseover=function() {
  this.className+=" over";
    }
    node.onmouseout=function() {
    this.className=this.className.replace(" over", "");
     }
     }
    }
   }
  }
  window.onload=startList;
  </script>
  </head>

  <body>


  <ul id="nav">    
                       <li><a href="tech-ed.html">Tech Ed Dept.</a></li>
                        <ul>
                            <li><a href="#">History</a></li>
                              <li><a href="#">Teachers</a></li>
                              <li><a href="#">Class Offerings</a></li>
                              <li><a href="#">Mission Statement</a></li>
                          </ul>
                       <li><a href="windber-tsa.html">Windber TSA</a></li>
                        <ul>
                            <li><a href="#">History</a></li>
                              <li><a href="#">Teachers</a></li>
                              <li><a href="#">Class Offerings</a></li>
                              <li><a href="#">Mission Statement</a></li>
                          </ul>
                       <li><a href="research.html">Research</a></li>
                       <li><a href="index-6.html">Blog</a></li>
               <li><a href="contact.html">Contact</a></li>


  </ul>
  <ul id="nav">
  <li><a href="index-3.html">Advisors</a></li>
  </ul>


  </body>
  </html>

ToxicFire

Aiming for something like this? http://codepen.io/anon/pen/qGzgA

Paulie_D

@ToxicFire.

Your Pen seems to have two navs with the same ID (which is a no-no) but I understand you have just copied the OP's code.

http://codepen.io/Paulie-D/pen/pAIdB

I'm not sure what that JS is trying to achieve that can't be done with CSS.

WindberTSA

First off, Thanks for the help!

@ToxicFire

That's exactly what I am aiming for. Is there a way to make the drop down portion remain active only while navigating through pages inside that section?

@Paulie_D

It did have two navs and that is when I started to realize that I was having a problem.. I am very new at this.

And I am not good with JS. I was trying to learn how to use it a bit and had been following a tutorial.. I do not quite understand the JS yet.

What is the JavaScript in your CodePen doing for that menu bar?

ToxicFire

Js basically is just duplicating the css :hover so is redundant.

As for keeping the menu dropped down the code to do that is already in there you just need to give the section li a class of over on that sections page

  <ul id="nav">
      <li><a href="blog">blog</a></li>
      <li class="over"><a href="blah">blah</a>
        <ul>
          <li>Sub-Blah1</li>
          <li>Sub-Blah2</li>
            <li>Sub-Blah3</li>
    </ul>
  </li>
</ul>

WindberTSA

Thanks for all your help!

treehouse : what would you like to learn today?

Forums

[Solved] CSS 2 Layer Drop Down Menu-Help