TechQA.

Sub-menu loading lower than other sub-menus

35 views Asked by At

I have a responsive menu that has 9 main items, and all except the top, 'Home' item have sub-menus that load to the right and vertically align with the top 'Home' line. For example, the 'Railings' item loads it's sub-menu as shown here:

But the last item, 'ABOUT', loads it's sub-menu slightly lower and I can't find out why.

This is a sub-menu that is loading correctly:

correct

This is the sub-menu that is loading incorrectly:

incorrect

#logo {
   text-align: center;
   padding-top: 18px;
}
#main {
   padding-top: 130px;
}
#menuzone {
   margin: 0 auto;
   max-width: 726px;
   padding-top: 0px;
   font-family: 'Open Sans', sans-serif;
   font-size: 12px;
}
#menuzone ul {
   list-style-type: none;
   padding: 0px;
   margin:0px;
}
#menuzone1 {
   float:left;
   width:175px;
   line-height: 18px;
}
#menuzone2 {
   width:450px;
   display: inline-block;
}
#slider1 {
   text-align: right;
   max-width: 726px;
   margin: 0 auto;
}
a {
  text-decoration:none;
   color: #B0B0B0;
}
a:visited {
  text-decoration:none;
   color: #B0B0B0;
}
a:hover {
   text-decoration:none;
   color: black;
   cursor: pointer;
}
.respimg {
   max-width: 100%;
   height: auto;
}
.respimghdr {
   max-width: 300px;
   height: auto;
}
#SERVICES, #STAIRS, #WATER_AND_FIRE, #CUSTOM_METALWORKS {
   display: none;
}
a.up {
   color: black;
}
/* Slider */
ol.bjqs-markers li a{
  display:inline-block;
   font-family: 'Open Sans', sans-serif;
   font-size: 12px;
   letter-spacing: 8px;
}
ol.bjqs-markers li.active-marker a, ol.bjqs-markers li a:hover{
   color: black;
}
ul.bjqs-controls.v-centered li a{
   color: black;
   background: grey;
   font-family: 'Open Sans', sans-serif;
}
/* Swiper */
.swiper-container {
   max-width: 726px;
   margin: 0 auto;
}
.swiper-slide {
   text-align: center;
   font-size: 18px;
   background: #fff;
   margin-bottom: 30px;
}
.swiper-pagination-bullet {
   width: 10px;
   height: 10px;
   text-align: center;
   line-height: 10px;
   font-family: 'Open Sans', sans-serif;
   font-size: 12px;
   color:#000;
   opacity: 1;
   background: #D0D0D0;
}
.swiper-pagination-bullet-active {
   color:#fff;
   background: #000;
}
/* Hamburger menu */
body {
   margin: 0 0 0 0;
   padding:0 0 0 0;
}
#logoham {
   top: 0;
   position: absolute;
   width: 100%;
   z-index: 9999;
}
.mobile-nav {
   top:0;
   display: none;
}
.menu-btn {
   position: absolute;
   right:10px;
   top: 15px;
   margin: 0 5px;
   line-height: 1.2;
   font-size: 18px;
   font-weight: 200;
   vertical-align: middle;
   z-index: 99;
   width: 30px;
}
.menu-btn span {
   display: block;
   width: 20px;
   height: 3px;
   margin: 4px auto;
   background: rgb(0,0,0);
   z-index: 99;
}
.responsive-menu{
   display: none;
   background: white;
   height: 850px;
}
.responsive-menu ul {
   margin: 0 0 0 0;
   padding:0 0 0 0;
}
.responsive-menu li {
   background: #f0f0f0;
   position:relative;
   line-height: 30px;
   list-style-type: none;
   margin: 2px 0px;
   padding: 0px 10px;
   font-family: 'Open Sans', sans-serif;
   font-size: 14px;
}
.responsive-menu li ul li {
   background: #f0f0f0;
   margin: 2px 10px;
}
.responsive-menu a {
   color: black;
}
.expand {
   display: none;
}
.open-menu-link{
   display: none;
   position: absolute;
   right: 15px;
   top:0;
   line-height: 30px;
   font-size: 30px;
   cursor: pointer;
}
li .sub-menu{
   display: none;
}
.visible {
   display: block !important;
}
@media screen and (max-height: 768px){
   .mobile-nav {
       display: block;
  }
   #menuzone {
       display: none;
  }
   .expand {
       display: block !important;
  }
   ol.bjqs-markers li a{
      display:inline-block;
       font-family: 'Open Sans', sans-serif;
       font-size: 24px;
       letter-spacing: 20px;
  }
}
html
<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="copyright" content="xxx, LLC" />
    <meta name="description" content="xxx" />
    <link rel="shortcut icon" href="favicon.ico" >
    <link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=Open+Sans'>
    <script type="text/javascript" src="../code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="paradis.js"></script>
    <link rel="stylesheet" href="swiper/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="style9881.css?20160609">
    <title>xxx</title>
  </head>
  <body>
    <div id="logoham">
      <div id="logo">
        <img src="images/Medium_logo.png" class="respimghdr">
      </div>
      <div class="mobile-nav">
        <div class="menu-btn" id="menu-btn">
          <div></div>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
      <div class="responsive-menu">
        <ul>
          <li>
            <a href="index.html">HOME</a>
          </li>
          <li class='menu-item-has-children'>
            <a>SERVICES</a>
            <ul class='sub-menu'>
              <li><a href='index9f7f.html?pid=4'>DESIGN ASSISTANCE</a></li>
              <li><a href='indexfa2a.html?pid=1'>ENGINEERING</a></li>
              <li><a href='index26d5.html?pid=2'>FABRICATION</a></li>
              <li><a href='indexda41.html?pid=3'>CUSTOM FINISHES</a></li>
              <li><a href='index8bbd.html?pid=5'>INSTALLATION</a></li>
            </ul>
          </li>
          <li class='menu-item-has-children'>
            <a>STAIRS</a>
            <ul class='sub-menu'>
              <li><a href='index0bb5.html?pid=32'>PROJECT 1</a></li>
              <li><a href='index7f63.html?pid=29'>PROJECT 2</a></li>
              <li><a href='index283a.html?pid=31'>PROJECT 3</a></li>
              <li><a href='indexc35a.html?pid=30'>PROJECT 4</a></li>
              <li><a href='index0601.html?pid=28'>PROJECT 5</a></li>
              <li><a href='indexc512.html?pid=27'>PROJECT 6</a></li>
              <li><a href='index011e.html?pid=6'>PROJECT 7</a></li>
              <li><a href='index91b3.html?pid=7'>PROJECT 8</a></li>
              <li><a href='index65f2.html?pid=8'>PROJECT 9</a></li>
              <li><a href='indexe44d.html?pid=9'>1PROJECT 0</a></li>
              <li><a href='index277e.html?pid=10'>PROJECT 11</a></li>
            </ul>
          </li>
          <li class='menu-item-has-children'>
            <a>RAILINGS</a>
            <ul class='sub-menu'>
              <li><a href='indexca6b.html?pid=25'>1PROJECT 2</a></li>
              <li><a href='indexef1c.html?pid=21'>PROJECT 13</a></li>
            </ul>
          </li>
          <li class='menu-item-has-children'>
            <a>FENCING</a>
            <ul class='sub-menu'>
              <li><a href='indexd250.html?pid=14'>PROJECT 14</a></li>
              <li><a href='index438a.html?pid=15'>PROJECT 15</a></li>
            </ul>
          </li>
          <li class='menu-item-has-children'>
            <a>WATER AND FIRE</a>
            <ul class='sub-menu'>
              <li><a href='indexef9e.html?pid=26'>PROJECT 16</a></li>
              <li><a href='index25f5.html?pid=16'>PROJECT 17</a></li>
              <li><a href='indexef81.html?pid=17'>PROJECT 18</a></li>
              <li><a href='index44ff.html?pid=18'>PROJECT 19</a></li>
              <li><a href='index3037.html?pid=19'>PROJECT 20</a></li>
              <li><a href='indexfa43.html?pid=20'>PROJECT 21</a></li>
            </ul>
          </li>
          <li class='menu-item-has-children'>
            <a>CUSTOM METALWORKS</a>
            <ul class='sub-menu'>
              <li><a href='index5b5b.html?pid=23'>PROJECT 22</a></li>
              <li><a href='indexedbe.html?pid=24'>PROJECT 23</a></li>
              <li><a href='indexf703.html?pid=22'>PROJECT 24</a></li>
            </ul>
          </li>
          <li class='menu-item-has-children'>
            <a>ABOUT</a>
            <ul class='sub-menu'>
              <li><a href='indexa100.html?pid=11'>HISTORY</a></li>
              <li><a href='indexa200.html?pid=12'>THE TEAM</a></li>
              <li><a href='indexa300.html?pid=13'>THE SHOP</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div id="main">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class='swiper-slide'><img src='images/HOME/00.jpg' class='respimg'></div>
          <div class='swiper-slide'><img src='images/HOME/01.jpg' class='respimg'></div>
          <div class='swiper-slide'><img src='images/HOME/02.jpg' class='respimg'></div>
          <div class='swiper-slide'><img src='images/HOME/03.jpg' class='respimg'></div>
          <div class='swiper-slide'><img src='images/HOME/04.jpg' class='respimg'></div>
          <div class='swiper-slide'><img src='images/HOME/05.jpg' class='respimg'></div>
          <div class='swiper-slide'><img src='images/HOME/06.jpg' class='respimg'></div>
          <div class='swiper-slide'><img src='images/HOME/07.jpg' class='respimg'></div>
          <div class='swiper-slide'><img src='images/HOME/08.jpg' class='respimg'></div>
          <div class='swiper-slide'><img src='images/HOME/09.jpg' class='respimg'></div>
          <div class='swiper-slide'><img src='images/HOME/10.jpg' class='respimg'></div>
        </div>
      </div>
    </div>
    <div id="menuzone">
      <div id="menuzone1">
        <ul id="menu1">
          <li><a href="index.html" id="cHOME">HOME</a></li>
          <li><a onclick="selcat('SERVICES');" id="cSERVICES">SERVICES</a></li>
          <li><a onclick="selcat('STAIRS');" id="cSTAIRS">STAIRS</a></li>
          <li><a onclick="selcat('RAILINGS');" id="cRAILINGS">RAILINGS</a></li>
          <li><a onclick="selcat('FENCING');" id="cFENCING">FENCING</a></li>
          <li><a onclick="selcat('WATER_AND_FIRE');" id="cWATER_AND_FIRE">WATER AND FIRE</a></li>
          <li><a onclick="selcat('CUSTOM_METALWORKS');" id="cCUSTOM_METALWORKS">CUSTOM METALWORKS</a></li>
          <li><a onclick="selcat('ABOUT');" id="cABOUT">ABOUT</a></li>
        </ul>
      </div>
      <div id="menuzone2">
        <div id='SERVICES' style='display: none;'>
          <ul>
            <li><a href='index9f7f.html?pid=4' id='p4'>DESIGN ASSISTANCE</a></li>
            <li><a href='indexfa2a.html?pid=1' id='p1'>ENGINEERING</a></li>
            <li><a href='index26d5.html?pid=2' id='p2'>FABRICATION</a></li>
            <li><a href='indexda41.html?pid=3' id='p3'>CUSTOM FINISHES</a></li>
            <li><a href='index8bbd.html?pid=5' id='p5'>INSTALLATION</a></li>
          </ul>
        </div>
        <div id='STAIRS' style='display: none;'>
          <ul>
            <li><a href='index0bb5.html?pid=32' id='p32'>PROJECT 1</a></li>
            <li><a href='index7f63.html?pid=29' id='p29'>PROJECT 2</a></li>
            <li><a href='index283a.html?pid=31' id='p31'>PROJECT 3</a></li>
            <li><a href='indexc35a.html?pid=30' id='p30'>PROJECT 4</a></li>
            <li><a href='index0601.html?pid=28' id='p28'>PROJECT 5</a></li>
            <li><a href='indexc512.html?pid=27' id='p27'>PROJECT 6</a></li>
            <li><a href='index011e.html?pid=6' id='p6'>PROJECT 7</a></li>
            <li><a href='index91b3.html?pid=7' id='p7'>PROJECT 8</a></li>
            <li><a href='index65f2.html?pid=8' id='p8'>PROJECT 9</a></li>
            <li><a href='indexe44d.html?pid=9' id-'p9'>PROJECT 10</a></li>
            <li><a href='index277e.html?pid=10'id='p10'>PROJECT 11</a></li>
          </ul>
        </div>
        <div id='RAILINGS' style='display: none;'>
          <ul>
            <li><a href='indexca6b.html?pid=25' id='p25'>PROJECT 12</a></li>
            <li><a href='indexef1c.html?pid=21' id='p21'>PROJECT 13</a></li>
          </ul>
        </div>
        <div id='FENCING' style='display: none;'>
          <ul>
            <li><a href='indexd250.html?pid=14' id='p14'>PROJECT 14</a></li>
            <li><a href='index438a.html?pid=15' id='p15'>PROJECT 15</a></li>
          </ul>
        </div>
        <div id='WATER_AND_FIRE' style='display: none;'>
          <ul>
            <li><a href='indexef9e.html?pid=26' id='p26'>PROJECT 16</a></li>
            <li><a href='index25f5.html?pid=16' id='p16'>PROJECT 17</a></li>
            <li><a href='indexef81.html?pid=17' id='p17'>PROJECT 18</a></li>
            <li><a href='index44ff.html?pid=18' id='p18'>PROJECT 19</a></li>
            <li><a href='index3037.html?pid=19' id='p19'>PROJECT 20</a></li>
            <li><a href='indexfa43.html?pid=20' id='p20'>PROJECT 21</a></li>
          </ul>
        </div>
        <div id='CUSTOM_METALWORKS' style='display: none;'>
          <ul>
            <li><a href='index5b5b.html?pid=23' id='p23'>PROJECT 22</a></li>
            <li><a href='indexedbe.html?pid=24' id='p24'>PROJECT 23</a></li>
            <li><a href='indexf703.html?pid=22' id='p22'>PROJECT 24</a></li>
          </ul>
        </div>
      </div>
      <div id='ABOUT' style='display: none;'>
        <ul>
          <li><a href='indexa100.html?pid=11' id='p11'>HISTORY</a></li>
          <li><a href='indexa200.html?pid=12' id='p12'>OUR TEAM</a></li>
          <li><a href='indexa300.html?pid=13' id='p13'>OUR SHOP</a></li>
        </ul>
      </div>
      <script>
        selcat('HOME');
        $('#cHOME').addClass('up');
      </script>      
    </div>
    </div>  <script src="swiper/js/swiper.min.js"></script>
    <script>        
      var mySwiper = new Swiper ('.swiper-container', { 
        speed: 2200,
        autoplay: 3000,
        effect: 'fade',
        keyboardControl: true,
        loop: true
      })        
    </script>
  </body>
</html>

I tried searching for a padding or margin but there were none that were specific to the 'ABOUT' item (that I know of)

html css menu responsive submenu
Original Q&A
0

There are 0 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in MENU

Related Questions in RESPONSIVE

Related Questions in SUBMENU

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions