html - CSS 下拉菜单 'hit box'

Question

除了询问如何增加下拉“点击框”的大小之外，我真的不知道还能如何解释我的问题

我的意思是，当我的下拉菜单出现时，我必须将鼠标悬停在按钮左侧很远的地方，否则下拉菜单会消失，而不是将鼠标悬停在汉堡包图标上并直接向下移动鼠标。它似乎只在我全屏 (2560x1440) 时发生，否则没问题。因此，除非您拥有相同尺寸的屏幕，否则您将无法真正复制。

另外一个简单的问题，为什么 Example Title 显示为

Example
Title

/* Nav Bar Styling */

div.nav {
  width: 100%;
  background-color: #1c1c1c;
  color: blue;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-top: 0;
  height: 50px;
}
#title {
  text-align: center;
  margin: 0 auto;
  font-size: 1.5em;
  position: absolute;
  top: 15px;
  left: 50%;
  right: 50%;
}
span.dropbutton {
  text-align: left;
  vertical-align: middle;
  color: white;
  position: fixed;
  top: 15px;
  left: 2%
}
#lines:hover {
  transform: scale(1.1);
}

/* Dropdown Styling */
.dropdown {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 40px;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #1c1c1c;
  min-width: 200px;
  margin-top: 50px;
}
.dropdown-content a {
  padding: 50px 16px;
  display: block;
}
.dropdown-content a:hover {
  background-color: #343434;
}
.dropdown:hover .dropdown-content {
  display: block;
}

	<div class="nav">
		<p id="title">Example Title</p>
		<div class="dropdown">
		  <span class="dropbutton">☰</span>
		  <div class="dropdown-content">
		    <a href="#">Link 1</a>
		    <a href="#">Link 2</a>
		    <a href="#">Link 3</a>
		  </div>
		</div>
	</div>

Answer 1

我有这个分辨率 (mac 27")。 据我了解，问题出在 span class="dropbutton" 的位置固定，左边 2%。

在全屏模式下完全在 div class="dropdown" 之外，而在小分辨率下 span 覆盖了 div。