CSS下拉式选单

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"之外，而在较小分辨率下，跨度会覆盖div。

Answer 2

添加这个CSS

.dropdown:hover {width: 100%; height: 100%;}

关于标题问题，右：50％，左：50％有冲突。 删除权：50％，保留权：50％并添加到#title

transform: translateX(-50%)