CSS垂直菜單與子菜單標註重疊

Question

它已經有一段時間 - 但我發現自己在網絡發展的一個新的退出愛好，我希望你能幫助我解決了以下問題：

我正在工作個人網站。內容等都是初步的。我主要關注的是左側的垂直菜單。儘管我對目前的外觀非常滿意，但仍然存在一些問題：

1）我不得不將轉換設置爲「0」，這樣我在主菜單懸停和將鼠標懸停在子菜單上。因此，如果我將鼠標懸停在主菜單項之間，由於逐步淘汰，它們會短暫重疊。有沒有辦法解決這個問題？ （焦點選擇器可能是一個選項，但需要點擊菜單項，我更喜歡懸停）

2）子菜單對齊到主菜單裏的頂部。因此，最後一項的子（測試）超出頁面邊界，在頁面下方留下空白。如果子菜單壓在整個身體的邊緣上，是否有辦法使子菜單向上移動？ 我可能可以給它一個不同的標籤，並以不同的方式進行設計，我希望有更通用的解決方案。

3）小問題：當從主菜單懸停切換到子菜單懸停時，主圖標「閃爍」非常短暫。這是正常的行爲嗎？當然不漂亮。

4）最後但並非最不重要：由於這是我第一次做一個網站，我將非常感謝您獲得關於代碼中效率低下的一般反饋，所以我可以在未來更加精益。

（見下更新小提琴 - 完整的代碼去除，以節省空間）

感謝您的幫助！

---

編輯 感謝您的答案 - 問題＃1已被使用您介紹的方法解決！

但是，最後的子菜單仍然讓我頭疼。

如果我使用「最後孩子」選擇器，並在下面添加代碼，它不會改變任何東西。但是，如果我使用完全相同的代碼爲最後一個「泡泡」指定不同的標籤，則泡泡將與最後一個主菜單項目的底部對齊，但包含的UL保持不變。

正如您從原始CSS中看到的，最後一個「相對」是主菜單IL，那麼子菜單和包含的UL不應該與它們各自的父母/祖父母的底部對齊嗎？

• 使用專用的，不同的標籤進行最後的孩子「bubble_last
• 使用最後一子選擇

和附帶的新代碼（有完整的代碼更新小提琴：繼承人Fiddle ...使用大屏幕，結果看到對齊問題）：

.navigation ul li:last-child { 
    border: solid orange; 
} 

.navigation .bubble_last{ 
    position: absolute; 
    margin-top: 0%; 
    padding: 0px; 
    left: 60px; 
    bottom: 0px; 
    width: 400px; 
    height: 200px; 
    border: solid red; 
} 

.navigation .bubble_last ul{ 
    position: absolute; 
    left: 0; 
    bottom: : 0px; 
    margin-top: 0px; 
    padding: 0px; 
    width: 20vw; 
    height: 100px; 
    font-size: 15px; 
    font-size: 1.2vw; 
    font-weight: 400; 
    border: solid blue; 
    margin-left: 28%; 
    display: block; 

} 

.navigation .bubble_last ul li { 
    list-style: none; 
    background-color: none; 
    border-radius: 3px; 
    height: 2vw; 
    line-height: 1.2vw; 
    width: 20vw; 
    position: relative; 
    padding-top: 0px; 
    margin: 0; 
    padding: 0; 

} 

Answer 1

而是在.bubble添加過渡的延遲，你只需要做出.bubble類足夠寬（和啓動主li觸發了left: 60px背後），使懸停將是連續的：

.navigation .bubble { 
    position: absolute; 
    margin-top: 0%; 
    padding: 0px; 
    left: 60px; 
    top: 0px; 
    width: 200px; 
    height: 100%; 
    background-color: none; 
} 

然後，只需添加一個margin-left子菜單：

.navigation ul li ul { 
    margin-left: 20px; 
} 

要解決你的第二個問題，只需添加以下CSS，使相對導航項目的底部位於最後的子菜單：

ul li ul.subm:last-child { 
    top: auto; 
    bottom:0px; 
} 

更新演示：JSFiddle

Answer 2

這個怎麼樣？調整您的導航以使用nav元素，將其設置爲使用彈性框，調整它以適合頁面的高度，然後調整轉場效果，以便它們適當地進出。

我希望這會有所幫助。

@import url("http://fonts.googleapis.com/css?family=Roboto"); 
 
* { 
 
    border: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    font-family: Roboto Condensed; 
 
    box-sizing: border-box; 
 
} 
 

 
.landing { 
 
    display: table; 
 
    margin: auto; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url("https://imageshack.com/i/poXkyeIYj") 50% 50% no-repeat; 
 
    background-size: cover; 
 
    top: 0; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
.landing .welcome { 
 
    margin: 10px; 
 
    width: 89%; 
 
    color: #FFF; 
 
    text-align: center; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    position: absolute; 
 
    left: 10%; 
 
    top: 30%; 
 
} 
 

 
#mug { 
 
    background: url("https://imageshack.com/i/pmJaAuFkj") 50% 50% no-repeat; 
 
    background-size: cover; 
 
    border: solid 3px #FFF; 
 
    /*max-width: 20%; 
 
    max-height: 20%; */ 
 
    width: 150px; 
 
    height: 150px; 
 
    margin: auto; 
 
    border-radius: 100%; 
 
} 
 

 
nav { 
 
    width: 50px; 
 
    height: 100%; 
 
    flex: 1; 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
} 
 

 
nav img { 
 
    max-width: 50px; 
 
    max-height: 50px; 
 
} 
 

 
.nav ul { 
 
    *zoom: 1; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    -ms-flex: 0 100px; 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    justify-content: space-between; 
 
    margin-top: 0px; 
 
    padding: 0px; 
 
    width: 11vw; 
 
    height: auto; 
 
    font-size: 15px; 
 
    font-size: 1.2vw; 
 
    font-weight: 400; 
 
    border-color: none; 
 
} 
 

 
nav ul li { 
 
    background-color: rgba(222, 225, 229, 0.8); 
 
    border-radius: 3px; 
 
    width: 100%; 
 
    font-size: 15px; 
 
    font-size: 1.2vw; 
 
    font-weight: 900; 
 
} 
 

 
.nav ul:before, 
 
.nav ul:after { 
 
    content: ""; 
 
    display: block; 
 
} 
 

 
.nav ul:after { 
 
    clear: both; 
 
} 
 

 
.nav ul>li { 
 
    position: relative; 
 
} 
 

 
.nav a { 
 
    display: block; 
 
    padding: 10px 20px; 
 
    line-height: 1.2em; 
 
    color: #fff; 
 
    border-left: 1px solid #595959; 
 
    text-decoration: none; 
 
    color: #FFF; 
 
} 
 

 
.nav a:hover { 
 
    text-decoration: none; 
 
    background-color: rgba(242, 93, 38, 0.8); 
 
} 
 

 
.nav li ul { 
 
    background: #273754; 
 
} 
 

 
.nav li ul li { 
 
    width: 200px; 
 
} 
 

 
.nav li ul a { 
 
    border: none; 
 
} 
 

 
.nav li ul a:hover { 
 
    background: rgba(0, 0, 0, 0.2); 
 
} 
 

 
.nav li ul { 
 
    position: absolute; 
 
    left: 11vw; 
 
    top: 0; 
 
    z-index: 1; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
    -webkit-transition: 200ms ease; 
 
    -moz-transition: 200ms ease; 
 
    -o-transition: 200ms ease; 
 
    transition: 200ms ease; 
 
} 
 

 
.nav ul>li:hover ul { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    filter: alpha(opacity=100); 
 
} 
 

 
span.caption { 
 
    display: none; 
 
}

<body> 
 
    <div class="landing"> 
 
    <div class="welcome"> 
 
     <div id="mug"> 
 
     </div> 
 

 
     <h1>Welcome to my personal Website!</h1> 
 
     <h2>On this site you will find a information about the person, the profession and other stuff about me. Enjoy!</h2> 
 

 
    </div> 
 

 

 

 

 

 
    <!-- cleaned up the navigation, nested it within the rest of the page, and adjusted the css --> 
 
    <nav class="nav"> 
 
     <ul> 
 
     <li> 
 
      <a href="https://google.de" class="item"><img src="https://imageshack.com/i/potj2pVwp"> <span class="caption">Home</span></a> 
 
     </li> 
 
     <li> 
 
      <a href="#" class="item"><img src="https://imageshack.com/i/pntQ9nVMp"><span class="caption">About Me</span></a> 
 
      <ul> 
 
      <li><a href="#">What I do</a></li> 
 
      <li><a href="#">Motorcycling</a></li> 
 
      <li><a href="#">Music</a></li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#" class="item"><img src="https://imageshack.com/i/po4WFq6Yp"><span class="caption">Professional</span></a> 
 
      <ul> 
 
      <li><a href="#">Current Employment</a></li> 
 
      <li><a href="#">Working Experience</a></li> 
 
      <li><a href="#">Education</a></li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#" class="item"><img src="https://imageshack.com/i/pmcfm7Kbp"> <span class="caption">Projects</span></a> 
 
      <ul> 
 
      <li><a href="#">Subnav Item</a></li> 
 
      <li><a href="#">Subnav Item</a></li> 
 
      <li><a href="#">Subnav Item</a></li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#" class="item"><img src="https://imageshack.com/i/pnM0Fmgrp"> <span class="caption">Misc</span></a> 
 
      <ul> 
 
      <li><a href="#">Subnav Item</a></li> 
 
      <li><a href="#">Subnav Item</a></li> 
 
      <li><a href="#">Subnav Item</a></li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#" class="item"><img src="https://imageshack.com/i/poqRnk6ap"> <span class="caption">Testing</span></a> 
 
      <ul> 
 
      <li><a href="#">Subnav Item</a></li> 
 
      <li><a href="#">Subnav Item</a></li> 
 
      <li><a href="#">Subnav Item</a></li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#" class="item"><img src="https://imageshack.com/i/pmc8tts9p"> <span class="caption">Contact</span></a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </div>