下拉菜单没有定位校正，并且在悬停文本移动时

Question

我很难弄清楚这一点。我有2个问题

• 当我将鼠标悬停在按钮上时（例如关于）。变黑了。但是，左右的“粗体”会使所有其他按钮在悬停时移动约2个像素。我对如何解决此问题有些困惑。
• 我添加了一个下拉菜单，但是在悬停时，下拉菜单并未直接位于其类别下。我试图将其定位，以便子菜单位于居中类别下。

---

  window.console = window.console || function(t) {};
  
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
  
  (function($) {
    "use strict";
  
    var $navbar = $(".nav"),
        y_pos = $navbar.offset().top,
        height = $navbar.height();

    $(document).scroll(function() {
        var scrollTop = $(this).scrollTop();
        if (scrollTop > 0) {
          $navbar.addClass("sticky");
        } else {
          $navbar.removeClass("sticky");  
        }
    });

})(jQuery, undefined);

$(".menu").click(function(){
  $("#nav").toggleClass("open");
});

html, body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

.section {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.nav {
  transition: all .5s ease;
  font-size: 12px;
  font-family: 'Open Sans', sans-serif;
  width: 100%;
  z-index: 100;
  position: absolute;
  left: 0;
  letter-spacing: 2px;
  line-height: 100px;
  -webkit-transition-property: background-color, box-shadow, line-height, height;
  transition-property: background-color, box-shadow, line-height, height;
  -webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
  transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.nav .brand {
  line-height: 100px;
  padding-left: 60px;
  padding-right: 60px;
  display: inline-block;
  float: left;
  font-size: 20px;
  font-family: 'Pacifico', cursive;
  -webkit-transition-property: background-color, box-shadow, line-height, height;
  transition-property: background-color, box-shadow, line-height, height;
  -webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
  transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.nav .brand a {
  color: #E33B00;
  text-decoration: none;
}
.nav ul {
  margin: 0;
  text-transform: uppercase;
}
.nav ul li {
  text-align: center;
  display: inline-block;
  list-style: none;
  padding: 15px 15px;
  cursor: pointer;
  line-height: 30px;
}
.nav ul li:hover a {
  font-weight: bold;
}
.nav ul li a {
  color: #eee;
  text-decoration: none;
}

.sticky {
  position: fixed !important;
  top: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  line-height: 30px;
}
.sticky .brand {
  line-height: 60px;
}
.sticky ul li a {
  color: #6E7982;
}
.sticky ul li:hover a {
  color: #E33B00;
}

.pattern-overlay {
  background: rgba(0, 0, 0, 0.3) url("/img/pattern.png") repeat;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 0;
}

.menu {
  display: none;
}

@media (max-width: 600px) {
  .sticky .menu {
    top: 0;
  }
  .sticky .menu .hamburger {
    background: #6E7982;
  }
  .sticky .menu .hamburger::before, .sticky .menu .hamburger::after {
    background: #6E7982;
  }

  .open.sticky .hamburger {
    background: transparent;
  }

  .open .hamburger {
    background-color: transparent;
  }
  .open .hamburger::before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .open .hamburger::after {
    -webkit-transform: rotate(-45deg) translate(2px, -2px);
    -ms-transform: rotate(-45deg) translate(2px, -2px);
    transform: rotate(-45deg) translate(2px, -2px);
  }

  .menu {
    display: block;
    outline: none;
    position: relative;
    line-height: 60px;
    float: left;
    left: 20px;
    top: 20px;
    width: 60px;
    height: 60px;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    opacity: 0.7;
    -webkit-transition: opacity 150ms;
    transition: opacity 150ms;
  }
  .menu:hover {
    opacity: 1;
  }

  .hamburger, .hamburger::after, .hamburger::before {
    margin: 0 auto;
    display: block;
    width: 24px;
    height: 3px;
    line-height: 0;
    -webkit-transition: all 150ms;
    transition: all 150ms;
  }

  .hamburger::before {
    content: '';
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background: #fff;
  }

  .hamburger::after {
    content: '';
    -webkit-transform: rotate(-45deg) translate(2px, -2px);
    -ms-transform: rotate(-45deg) translate(2px, -2px);
    transform: rotate(-45deg) translate(2px, -2px);
    background: #fff;
  }

  .hamburger {
    background: #fff;
  }
  .hamburger::after {
    -webkit-transform: translateY(5px);
    -ms-transform: translateY(5px);
    transform: translateY(5px);
  }
  .hamburger::before {
    -webkit-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    transform: translateY(-8px);
  }

  .navbar {
    -webkit-transition: -webkit-transform 150ms;
    transition: transform 150ms;
  }

  ul.navbar {
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    padding-left: 0;
  }
  ul.navbar li {
    line-height: calc((100vh - 60px) / 6);
    display: block;
  }

  .open .navbar {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  .nav .brand {
    display: block;
    text-align: center;
    float: none;
  }

  .sticky .brand {
    background-color: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  }

  #nav {
    height: 100px;
  }
  #nav.open {
    height: auto;
    min-height: 100%;
  }
  #nav.sticky {
    height: 60px;
  }
  #nav .open.sticky {
    height: auto;
  }
}

ul li ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 1rem;
  left: 0;
  display: none;
}

ul li:hover > ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul li ul li {
  clear: both;
  width: 100%;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

	<body translate="no" >
		<nav id="nav" class="nav">
			<button class="menu">
				<em class="hamburger"></em>
			</button>
			<div class="brand">
				<a href="#">Logo</a>
			</div>
			<ul class="navbar">
				<li>
					<a href="#">Category 1</a>
				</li>
				<li>
					<a href="#t">Category 2</a>
				</li>
                <li><a href="#">Dropdown 1<i class="fa fa-caret-down"></i></a>
                  <ul class="dropdown">
                    <li><a href="#">something 1</a></li>
                    <li><a href="#">something 2</a></li>
                    <li><a href="#">something 3</a></li>
                  </ul>
                </li>
				<li>
					<a href="#">Category 4</a>
				</li>
                <li><a href="#">Dropdown 2<i class="fa fa-caret-down"></i></a>
                  <ul class="dropdown">
                    <li><a href="#">something 1</a></li>
                    <li><a href="#">something 2</a></li>
                    <li><a href="#">something 3</a></li>
                  </ul>
                </li>
				<li>
			</ul>
		</nav>
		<section class="section" style="background: url(https://images.pexels.com/photos/1231622/pexels-photo-1231622.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover;     background-attachment: fixed;"></section>
		<section class="section" style="background: url(https://images.pexels.com/photos/1421903/pexels-photo-1421903.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover;     background-attachment: fixed;"></section>
    
    		<script  src="https://code.jquery.com/jquery-3.3.1.js"></script>

Answer 1

首先，您需要在选择器中使用>来选择直接子..

• 从left: 0中删除ul > li > ul，因为它会将嵌套的ul绝对位置粘贴到左侧

• 将padding : 15px设置为<a>而不是<li>

• 通过使用>设置主体<ul>和嵌套的样式

window.console = window.console || function(t) {};
  
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
  
  (function($) {
    "use strict";
  
    var $navbar = $(".nav"),
        y_pos = $navbar.offset().top,
        height = $navbar.height();

    $(document).scroll(function() {
        var scrollTop = $(this).scrollTop();
        if (scrollTop > 0) {
          $navbar.addClass("sticky");
        } else {
          $navbar.removeClass("sticky");  
        }
    });

})(jQuery, undefined);

$(".menu").click(function(){
  $("#nav").toggleClass("open");
});

html, body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

.section {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.nav {
  transition: all .5s ease;
  font-size: 12px;
  font-family: 'Open Sans', sans-serif;
  width: 100%;
  z-index: 100;
  position: absolute;
  left: 0;
  letter-spacing: 2px;
  line-height: 100px;
  -webkit-transition-property: background-color, box-shadow, line-height, height;
  transition-property: background-color, box-shadow, line-height, height;
  -webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
  transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.nav .brand {
  line-height: 100px;
  padding-left: 60px;
  padding-right: 60px;
  display: inline-block;
  float: left;
  font-size: 20px;
  font-family: 'Pacifico', cursive;
  -webkit-transition-property: background-color, box-shadow, line-height, height;
  transition-property: background-color, box-shadow, line-height, height;
  -webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
  transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.nav .brand a {
  color: #E33B00;
  text-decoration: none;
}
.nav > ul {
  margin: 0;
  text-transform: uppercase;
}
.nav > ul > li {
  text-align: center;
  display: inline-block;
  list-style: none;
  cursor: pointer;
  line-height: 30px;
}
.nav > ul > li > a {
  color: #eee;
  text-decoration: none;
  padding : 15px;
  display : block;
}

.nav > ul > li:hover > a {
  font-weight: bold;
}

.sticky {
  position: fixed !important;
  top: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  line-height: 30px;
}
.sticky .brand {
  line-height: 60px;
}
.sticky ul li a {
  color: #6E7982;
}
.sticky ul li:hover a {
  color: #E33B00;
}

.pattern-overlay {
  background: rgba(0, 0, 0, 0.3) url("/img/pattern.png") repeat;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 0;
}

.menu {
  display: none;
}

@media (max-width: 600px) {
  .sticky .menu {
    top: 0;
  }
  .sticky .menu .hamburger {
    background: #6E7982;
  }
  .sticky .menu .hamburger::before, .sticky .menu .hamburger::after {
    background: #6E7982;
  }

  .open.sticky .hamburger {
    background: transparent;
  }

  .open .hamburger {
    background-color: transparent;
  }
  .open .hamburger::before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .open .hamburger::after {
    -webkit-transform: rotate(-45deg) translate(2px, -2px);
    -ms-transform: rotate(-45deg) translate(2px, -2px);
    transform: rotate(-45deg) translate(2px, -2px);
  }

  .menu {
    display: block;
    outline: none;
    position: relative;
    line-height: 60px;
    float: left;
    left: 20px;
    top: 20px;
    width: 60px;
    height: 60px;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    opacity: 0.7;
    -webkit-transition: opacity 150ms;
    transition: opacity 150ms;
  }
  .menu:hover {
    opacity: 1;
  }

  .hamburger, .hamburger::after, .hamburger::before {
    margin: 0 auto;
    display: block;
    width: 24px;
    height: 3px;
    line-height: 0;
    -webkit-transition: all 150ms;
    transition: all 150ms;
  }

  .hamburger::before {
    content: '';
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background: #fff;
  }

  .hamburger::after {
    content: '';
    -webkit-transform: rotate(-45deg) translate(2px, -2px);
    -ms-transform: rotate(-45deg) translate(2px, -2px);
    transform: rotate(-45deg) translate(2px, -2px);
    background: #fff;
  }

  .hamburger {
    background: #fff;
  }
  .hamburger::after {
    -webkit-transform: translateY(5px);
    -ms-transform: translateY(5px);
    transform: translateY(5px);
  }
  .hamburger::before {
    -webkit-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    transform: translateY(-8px);
  }

  .navbar {
    -webkit-transition: -webkit-transform 150ms;
    transition: transform 150ms;
  }

  ul.navbar {
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    padding-left: 0;
  }
  ul.navbar li {
    line-height: calc((100vh - 60px) / 6);
    display: block;
  }

  .open .navbar {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  .nav .brand {
    display: block;
    text-align: center;
    float: none;
  }

  .sticky .brand {
    background-color: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  }

  #nav {
    height: 100px;
  }
  #nav.open {
    height: auto;
    min-height: 100%;
  }
  #nav.sticky {
    height: 60px;
  }
  #nav .open.sticky {
    height: auto;
  }
  
  ul > li > ul {
    position : static;
  }
}

ul > li > ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  padding-top: 1rem;
  /*left: 0;*/
  display: none;
  background : yellow;
}

ul > li:hover > ul{
  visibility: visible;
  opacity: 1;
  display: block;
}

ul > li > ul > li {
  clear: both;
  width: 100%;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<body translate="no" >
<nav id="nav" class="nav">
  <button class="menu">
    <em class="hamburger"></em>
  </button>
  <div class="brand">
    <a href="#">Logo</a>
  </div>
  <ul class="navbar">
    <li>
      <a href="#">Category 1</a>
    </li>
    <li>
      <a href="#t">Category 2</a>
    </li>
            <li><a href="#">Dropdown 1<i class="fa fa-caret-down"></i></a>
              <ul class="dropdown">
                <li><a href="#">something 1</a></li>
                <li><a href="#">something 2</a></li>
                <li><a href="#">something 3</a></li>
              </ul>
            </li>
    <li>
      <a href="#">Category 4</a>
    </li>
            <li><a href="#">Dropdown 2<i class="fa fa-caret-down"></i></a>
              <ul class="dropdown">
                <li><a href="#">something 1</a></li>
                <li><a href="#">something 2</a></li>
                <li><a href="#">something 3</a></li>
              </ul>
            </li>
    <li>
  </ul>
</nav>
<section class="section" style="background: url(https://images.pexels.com/photos/1231622/pexels-photo-1231622.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover;     background-attachment: fixed;"></section>
<section class="section" style="background: url(https://images.pexels.com/photos/1421903/pexels-photo-1421903.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover;     background-attachment: fixed;"></section>

    <script  src="https://code.jquery.com/jquery-3.3.1.js"></script>