带有下拉菜单的动态导航栏会干扰下拉菜单元素的宽度

感谢您考虑这个问题。

代码可以在GitHub上找到，这里。

这里发生了一些事情，所以在我们进入代码之前，我想对它进行一些解释。

我有一个makeNavigation函数，它接受三个参数来制作导航栏:用于导航栏的项目数组，导航栏应该放置的元素id，以及大小。

在不包含页边距的情况下效果很好。然而，一旦空白的两行没有注释，那么下拉内容就会比它应该的大得多。想法吗?

另外，当窗口尽可能小地折叠，而不是只有一个下拉元素，"Home"和下拉栏是堆叠的。我为什么/怎样才能纠正这个问题?

注意:我的源代码W3 CSS和hover-master

对于变量，我们有pages和"sizes"

var pages = ["HOME","ABOUT","PAGE3","PAGE4","PAGE5","PAGE6","PAGE7","PAGE8"];
var extraSmall, small, medium, large;
extraSmall = 610;
small = 700;
medium = 800;
large = 1250;

功能:

function getSizeInText(size) {
  if (size > large) {
    return("large")
  };
  if (extraSmall < size && size <  medium) {
    return("small")
  };
  if (medium <= size && size <= large) {
    return("medium")
  };
  if (size <= extraSmall) {
    return("extraSmall")
  }
}
function makeNavigation(navArray, navID, size) {
  var theID = document.getElementById(navID);
  var mar = 8;
  var pad = 2;
  theID.innerHTML = null;
  // theID.style.marginRight = mar + "%";
  // theID.style.marginLeft = mar + "%";
  theID.style.marginTop = mar/4 + "%";
  if (size == "extraSmall") {
    var numNav = navArray.length;
    theID.innerHTML += '<li class="w3-dropdown-hover w3-centered" '+
    'style="width:' + spaceAllocated + '%" >' +
    '<a class="hvr-reveal navFont">' +
    '<i class="fa fa-bars"></i></a>' +
    '<ul id="dropDownContent" class="w3-dropdown-content" style="width:'+ spaceAllocated +'%">' +
    '</ul>' + '</li>';
    for (var i = 0; i < numNav; i++ ) {
      document.getElementById('dropDownContent').innerHTML+=
      '<li style="width:' +
      (100 - 2*pad) + '%">'+
      '<a  class="hvr-reveal navFont" href="' + navArray[i].toLowerCase() + '.html">' +
      navArray[i] + '</a></li>';
    }
  }

  if (size == "small") {
    var numNav = navArray.length;
    var spaceAllocated = (100 ) / 2;
    for (var i = 0; i < 1; i++) {
        theID.innerHTML +=
        '<li style = "width:' +
        spaceAllocated +
        '%"><a  class="hvr-reveal navFont"' +
        ' href="' +
        navArray[i].toLowerCase() +
        '.html">' +
        navArray[i] + '</a></li>';
    };
    theID.innerHTML += '<li class="w3-dropdown-hover w3-centered" '+
    'style="width:' + spaceAllocated + '%" >' +
    '<a class="hvr-reveal navFont">' +
    '<i class="fa fa-bars"></i></a>' +
    '<ul id="dropDownContent" class="w3-dropdown-content" style="width:'+ spaceAllocated +'%">' +
    '</ul>' + '</li>';
    for (var i = 1; i < numNav; i++ ) {
      document.getElementById('dropDownContent').innerHTML+=
      '<li style="width:' +
      (100 - 2*pad) + '%">'+
      '<a  class="hvr-reveal navFont" href="' + navArray[i].toLowerCase() + '.html">' +
      navArray[i] + '</a></li>';
    }
  }
  if (size == "medium") {
    var numNav = navArray.length;
    var half = Math.floor(numNav/2);
    var spaceAllocated = (100 )  / (half+1);
    for (var i = 0; i < half; i++) {
        theID.innerHTML +=
        '<li style = "width:' +
        spaceAllocated +
        '%"><a  class="hvr-reveal navFont"' +
        ' href="' +
        navArray[i].toLowerCase() +
        '.html">' +
        navArray[i] + '</a></li>';
    };
    theID.innerHTML += '<li class="w3-dropdown-hover w3-centered" '+
    'style="width:' + spaceAllocated + '%" >' +
    '<a class="hvr-reveal navFont">' +
    '<i class="fa fa-bars"></i></a>' +
    '<ul id="dropDownContent" class="w3-dropdown-content" style="width:'+ spaceAllocated +'%">' +
    '</ul>' + '</li>';
    for (var i = half; i < numNav; i++ ) {
      document.getElementById('dropDownContent').innerHTML+=
      '<li style="width:' +
      (100 - 2*pad) + '%">'+
      '<a  class="hvr-reveal navFont" href="' + navArray[i].toLowerCase() + '.html">' +
      navArray[i] + '</a></li>';
    }
  };
  if (size == "large") {
    var numNav = navArray.length;
    var spaceAllocated = (100 )  / numNav;
    for (var i = 0; i < numNav; i++) {
        theID.innerHTML +=
        '<li style = "width:' +
        spaceAllocated +
        '%"><a  class="hvr-reveal navFont"' +
        ' href="' +
        navArray[i].toLowerCase() +
        '.html">' +
        navArray[i] + '</a></li>';
    };
  };
}

然后在HTML中:

<div class="w3-container w3-section"><ul id="navBar" class="w3-navbar w3-center"></ul></div>
<script type="text/javascript">
    var windowWidth;
    var size;
    jQuery(document).ready(function(){
      windowWidth = jQuery(window).width();
      size = getSizeInText(windowWidth);
      if (windowWidth > large) {}
      if (windowWidth <  medium) {}
      if (medium <= windowWidth && windowWidth <= large) {}
    });
    jQuery(window).resize(function () {
      windowWidth = jQuery(window).width();
      size = getSizeInText(windowWidth);
      if (windowWidth > large) {
        makeNavigation(pages, "navBar", size);
      }
      if (windowWidth <  medium) {
        makeNavigation(pages, "navBar", size);
      }
      if (medium <= windowWidth && windowWidth <= large) {
        makeNavigation(pages, "navBar", size);
      }

    });
  </script>

<标题> 更新

programmer5000给出了这个特殊问题的解决方案。然而，当不使用w3-css时，同样的解决方案不起作用。怎么会？

/* Drop down content */
li a, .dropbtn {
    display: inline-block;
    text-align: center;
    text-decoration: none;
}
li.dropdown {
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    text-align: center;
    width: inherit;
    z-index: 1;
}
.dropdown-content a {
    text-decoration: none;
    display: block;
}

.dropdown:hover .dropdown-content {
    display: block;
}


<nav id ='navigation-bar'>
  <ul>
    <li><a href="#"> HOME </a></li>    
    <li class="dropdown">
      <a class="dropbtn">TEST</a>
      <div class="dropdown-content">
        <a>1</a>
        <a>2</a>
        <a>3</a>
      </div>
    </li>
  </ul>
</nav>

@media screen and (max-width: 600px){
   .w3-navbar li:not(.w3-opennav) {
       width: 50% !important;
       float: left !important;
   }
}

#dropDownContent li {
    width: 100% !important;
}
.w3-dropdown-hover:hover .w3-dropdown-content{
    position: initial;
}