CODEWITHSUNDEEP
javascripthtmlcss
Anna
Anna

Reputation: 135

How to get dropdown to display correctly?

I don't know how much of this code is necessary to show you, but I honestly can not figure out how to fix my problem so I'll just list it all. I have a dropdown menu for my mobile version of my site that is ALMOST complete. This is what it looks like when I pull up the menu (menu div):

Home
About
Contact

My problem now is the sub-menus. When I click on them I see something like this (empty space at top of li ul and next menu item covered up):

Home
                        <---empty space
  My dropdown li
  My dropdown li 2
  My dropdown li 3
Contact

I've tried messing with margins, I've tried changing around display types, I've tried changing position types... The closest I've come to getting it to work correctly is to use a negative margin on the li ul to get rid of the empty space, but it still covers up the "about". I just don't understand what I can do to fix the css! Any help is greatly appreciated!!

$("#nav").addClass("js").before('<div id="menu">&#9776;</div>');
 $("#menu").click(function() {
   $("#nav").toggle();
 });
 $(window).resize(function() {
   if (window.innerWidth > 768) {
     $("#nav").removeAttr("style");
   }
 });

 $('li.dropdown').click(function() {
   $('li.dropdown').not(this).find('ul').hide();
   $(this).find('ul').toggle();
 });
ul {
  width: 100%;
  position: absolute;
  top: 51px;
  left: 0 !important;
  z-index: 100;
}
li ul {
  display: block;
  width: 100%;
  position: relative;
}
li ul li {} li {
  width: 33%;
  float: left;
  list-style: none;
  padding-left: 0;
}
li:last-child {
  border-right: none;
}
li a {
  display: block;
  background: #879270;
  padding: 4% 10%;
  font-size: 1.35em;
  text-decoration: none;
  list-style: none;
  text-align: left;
  color: #000000 !important;
}
@media screen and (min-width: 768px) {
  #menu {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  #menu {
    width: 1.4em;
    display: block;
    background: #879270;
    font-size: 1.35em;
    text-align: center;
    position: absolute;
    z-index: 1000;
    top: 15px;
    right: 10px;
    border-radius: 3px;
    border: 1px solid #000000;
    padding-top: 5px;
  }
  #nav.js {
    display: none;
  }
  ul {
    width: 100%;
  }
  li {
    width: 100%;
    border-right: none;
  }
}
li.dropdown ul {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<ul id="nav">
  <li class="dropdown"><a href="#">Home</a>
    <ul>
      <li><a href="#">My Dropdown li</a>
      </li>
      <li><a href="#">My Dropdown li 2</a>
      </li>
      <li><a href="#">My Dropdown li 3</a>
      </li>
    </ul>
  </li>
  <li><a href="#">About</a>
  </li>
  <li><a href="#">Contact</a>
  </li>
</ul>

Upvotes: 2

Views: 46

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

You hava top value (top: 51px;) on ul which is inheriting to your sub-menus. Add top: 0; to li ul so that isn't iniherited on sub-menus.

ul {
  width: 100%;
  position: absolute;
  top: 51px;
  left: 0 !important;
  z-index: 100;
}

li ul {
  display: block;
  width: 100%;
  position: relative;
  top: 0;
}

li ul li {}

li {
  width: 33%;
  float: left;
  list-style: none;
  padding-left: 0;
}

li:last-child {
  border-right: none;
}

li a {
  display: block;
  background: #879270;
  padding: 4% 10%;
  font-size: 1.35em;
  text-decoration: none;
  list-style: none;
  text-align: left;
  color: #000000 !important;
}

@media screen and (min-width: 768px) {
  #menu {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  #menu {
    width: 1.4em;
    display: block;
    background: #879270;
    font-size: 1.35em;
    text-align: center;
    position: absolute;
    z-index: 1000;
    top: 15px;
    right: 10px;
    border-radius: 3px;
    border: 1px solid #000000;
    padding-top: 5px;
  }
  #nav.js {
    display: none;
  }
  ul {
    width: 100%;
  }
  li {
    width: 100%;
    border-right: none;
  }
}

li.dropdown ul {
  display: none;
}
<ul id="nav">
  <li class="dropdown"><a href="#">Home</a>
    <ul>
      <li><a href="#">My Dropdown li</a></li>
      <li><a href="#">My Dropdown li 2</a></li>
      <li><a href="#">My Dropdown li 3</a></li>
    </ul>
  </li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
  $("#nav").addClass("js").before('<div id="menu">&#9776;</div>');
    $("#menu").click(function(){
        $("#nav").toggle();
    });
    $(window).resize(function(){
        if(window.innerWidth > 768) {
            $("#nav").removeAttr("style");
        }
    });

    $('li.dropdown').click(function() {
   $('li.dropdown').not(this).find('ul').hide();
   $(this).find('ul').toggle();
});
</script>

Upvotes: 3

Related Questions