CSS下拉“打盒”

我真的不知道该怎么解释我的问题以外，询问如何提高我的下拉列表的大小“打盒子”CSS下拉“打盒”

我的意思是，出现在我的下拉菜单时，我必须将鼠标悬停在按钮的左侧，否则下拉菜单会消失，而不是仅仅停留在汉堡包图标上，并将鼠标向下移动。它似乎只发生在我全屏（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; 
 
}

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

来源

2016-11-09 oneman

我有这样的分辨率（MAC 27" ）。如果我理解，问题是span class="dropbutton"的位置固定为2％。

In fullscreen is co完全在div class="dropdown"之外，而在小分辨率时，跨度过大。

来源

2016-11-09 10:07:58

我把它改成'left：20px;'现在很好，谢谢。有关“示例标题”问题的任何想法？ – oneman

添加这个CSS

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

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

transform: translateX(-50%)

来源

2016-11-09 10:15:08

我只是在发布后感到奇怪。你的解决方案解决了这个问题，谢谢 – oneman

我编辑了我的答案也为其他问题。我希望它也有帮助。 –

CSS下拉“打盒”

回答

相关问题