Need Help With Dropdown Menu


(Jake Fishman) #1

Hey all,

I’m trying to modify Neil’s dropdown menu that he offers for the navigation bar: here’s his post:

I’m attempting to make a second dropdown menu, so what I did is copied Neil’s code for a second dropdown. In order to make the javascript from Neil’s to work on the second dropdown menu I had to change the ID’s of my copied code. I kept the same classes so that the css would apply to both dropdown menus. However, the issue I’m running into is that the second dropdown menu is still located in the same place as the first dropdown and I am unable to bring my cursor to the menu options before it disappears. How can I move the second dropdown menu directly below the correct hover spot?

I’m a beginner when it comes to html/css and know close to nothing about JS. So any help is appreciated!

You can see whats happening here: http://publicarkive.menshealtharkive.com/

Thanks for any suggestions

-------HTML for Both Dropdowns--------

<div id="top-navbar">
  <div id="top-navbar-links">
    <ul id="top-external-nav">
      <li class="top-ext--main" id="top-discourse-link">
        <a class="top-ext--link top-discourse-link-main" href="http://www.menshealtharkive.com/">Our Plan</a>
        <ul class="top-ext--sub" id="top-discourse-sub">
          <li class="top-ext--sub-item">
            <a class="top-ext--link" href="https://meta.discourse.org" target="blank">
              <span>Our Story</span>
            </a>
          </li>
          <li class="top-ext--sub-item">
            <a class="top-ext--link" href="http://try.discourse.org/" target="blank">
              <span>Our Directors</span>
            </a>
          </li>
          <li class="top-ext--sub-item">
            <a class="top-ext--link" href="https://www.discourse.org/faq/" target="blank">
              <span>Join Our Team</span>
            </a>
          </li>
          <li class="top-ext--sub-item">
            <a class="top-ext--link" href="https://www.discourse.org/faq/" target="blank">
              <span>Social</span>
            </a>
          </li>
        </ul>
       </li>
       <li class="top-ext--main">
        <a class="top-ext--link" href="http://blog.discourse.org/" target="blank">Blog</a>
      </li>
      <li class="top-ext--main" id="top-discourse-link2">
        <a class="top-ext--link top-discourse-link-main2" href="http://www.menshealtharkive.com/">Our Plan</a>
        <ul class="top-ext--sub" id="top-discourse-sub2">
          <li class="top-ext--sub-item">
            <a class="top-ext--link" href="https://meta.discourse.org" target="blank">
              <span>Our Story</span>
            </a>
          </li>
          <li class="top-ext--sub-item">
            <a class="top-ext--link" href="http://try.discourse.org/" target="blank">
              <span>Our Directors</span>
            </a>
          </li>
          <li class="top-ext--sub-item">
            <a class="top-ext--link" href="https://www.discourse.org/faq/" target="blank">
              <span>Join Our Team</span>
            </a>
          </li>
          <li class="top-ext--sub-item">
            <a class="top-ext--link" href="https://www.discourse.org/faq/" target="blank">
              <span>Social</span>
            </a>
          </li>
        </ul>
       </li>
      <li class="top-ext--main">
        <a class="top-ext--link" href="https://payments.discourse.org/buy/" target="blank">Learn</a>
      </li>
    </ul>
  </div>
</div>

-----------CSS for Both Dropdowns-----------------

div#top-navbar-links {
    position: fixed;
    top: 0;
    margin:5px 0px 0px -600px;
    }
    
div#top-navbar {
    max-width:none; /*remove max width*/
    width: auto; /*prevent other widths taking over*/
    z-index: 1040; /*stays on top of other header*/
    float:right;
    position:relative;

    }

div#top-navbar-links a, div#top-navbar-links span {
  color:#eee;
  font-size: 14px;
}


/* js dropdown navs */
#top-external-nav {
  float: right;
  margin-top: 12px;
  position: relative;

  list-style: none;

  li.top-ext--main {
    float: left;
    margin-right: 10px;
    > a, > a:visited, > a:active {
      display: inline-block;
      padding: 6px 10px;
      font-size: 14px;
      color: #999999;
      &:hover {
        background-color: black;
      }
    }
  }

  #top-discourse-link a.top-discourse-link-main {
    padding: 6px 10px 20px 10px;
  }

  ul.top-ext--sub {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    margin-left: 0;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0, .5);
    list-style: none;

    li.top-ext--sub-item {
      float: none;
      padding: 0;
      margin: 0;
      background-color: white;
      a, a:visited {
        display: inline-block;
        width: 190px;
        padding: 8px 10px;
        span {
          font-size: 14px;
          color: #666;
        }

        img {
          width: 20px;
          margin-right: 6px;
        }
      }

      &:hover {
        background-color: #eef;
      }
    }
  }
}

-----------JavaScript for Dropdowns--------------

<script type="text/javascript">
$(function() {
  var $topDiscourseSub = $('#top-discourse-sub');
  $('#top-discourse-link').hover(function() {
    $topDiscourseSub.show();
  }, function() {
    $topDiscourseSub.hide();
  });
});
</script>

<script type="text/javascript">
$(function() {
  var $topDiscourseSub2 = $('#top-discourse-sub2');
  $('#top-discourse-link2').hover(function() {
    $topDiscourseSub2.show();
  }, function() {
    $topDiscourseSub2.hide();
  });
});
</script>

(Evgeny) #2

Try adding css

#top-navbar {
    margin-right: 220px;
}

(Jake Fishman) #3

That moves the entire navigation bar over to the left.
I need to move the second dropdown menu from it’s original position to directly under the second dropdown link.
Thank you for the suggestion though


(Evgeny) #4

Change the data in

#top-external-nav ul.top-ext--sub

for example, top:40px -> top:30px, or margin-left: