css使得子菜單重疊

我有一個非常好用的菜單，但當菜單太長時，子菜單項會重疊。我試着將行高設置爲24px，這使文本正常，但懸停的背景顏色太小。下面的代碼：css使得子菜單重疊

.nav ul { 
 
    list-style: none; 
 
    background-color: #5FD6D6; /*nav background */ 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.nav li { 
 
    border-bottom: 1px solid #888; 
 
} 
 
    
 
.nav a { 
 
    text-decoration: none; 
 
    color: black; /* font color */ 
 
    display: block; 
 
    transition: .3s background-color; 
 
} 
 
    
 
.nav a:hover { 
 
    background-color: #BFEFEF; /* hover color */ 
 
} 
 
    
 
.nav a.active { 
 
    background-color: #ED1C24; /*selected color */ 
 
    color: white; 
 
    cursor: default; 
 
} 
 

 
    /* Sub Menus */ 
 
.nav li li { 
 
    font-size: 1em; 
 
} 
 

 

 
@media screen and (min-width: 650px) { 
 
    .nav li { 
 
    width: 150px; 
 
    border-bottom: none; 
 
    height: 100px; 
 
    line-height: 100px; 
 
    font-size: 2em; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
    } 
 

 
    .nav a { 
 
    border-bottom: none; 
 
    } 
 

 
    .nav > ul > li { 
 
    text-align: center; 
 
    } 
 

 
    .nav > ul > li > a { 
 
    padding-left: 0; 
 
    } 
 

 
    /* Sub Menus */ 
 
    .nav li ul { 
 
    position: absolute; 
 
    display: none; 
 
    width: inherit; 
 
    } 
 

 
    .nav li:hover ul { 
 
    display: block; 
 
    } 
 

 
    .nav li ul li { 
 
    display: block; 
 
    } 
 
}

<div class="nav"> 
 
    <ul> 
 
     <li><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#">Tutorials</a> 
 

 
      <ul> 
 
       <li><a href="#">Tutorial #[email protected]@</a> 
 
       </li> 
 
       <li><a href="#">Tutorial #2</a> 
 
       </li> 
 
       <li><a href="#">Tutorial #3</a> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
     <li><a class="active" href="#">About</a> 
 
     </li> 
 
     <li><a href="#">Newsletter</a> 
 

 
      <ul> 
 
       <li><a href="#">News #1</a> 
 
       </li> 
 
       <li><a href="#">News #[email protected]@@</a> 
 
       </li> 
 
       <li><a href="#">News #3</a> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</div>

來源

2015-05-11 Felicyia

嗨，你已經收到了很多答案。如果其中一人已經充分解決了您的問題，請將其標記爲已接受。否則，請提供一些關於您的問題的補充說明，以顯示當前答案如何解決問題。 – Serlite

目前已經有一些工作的答案，但如果你想爲需要的孩子導航項目的寬度增加（而不是在高度上增加），我建議從.nav li（在媒體查詢中）刪除明確的width，並將其作爲min-width添加到.nav > ul > li（也在媒體查詢中）。

（就個人而言，我覺得它更具可讀性，如果根據需要和堅持，而不是突破到一個新的生產線，並在高度上增加的單行線，在寬度導航項目增加。）

因此，那些2聲明塊會去從：

@media screen and (min-width: 650px) { 
    .nav li { 
    width: 150px; 
    border-bottom: none; 
    height: 100px; 
    line-height: 100px; 
    font-size: 2em; 
    display: inline-block; 
    margin-right: -4px; 
    } 

    .nav > ul > li { 
    text-align: center; 
    } 
}

要：

@media screen and (min-width: 650px) { 
    .nav li { 
    border-bottom: none; 
    height: 100px; 
    line-height: 100px; 
    font-size: 2em; 
    display: inline-block; 
    } 

    .nav > ul > li { 
    text-align: center; 
    min-width: 150px; /* new */ 
    margin-right: -4px; /* moved */ 
    } 
}

請注意，我也動了負margin-right的declarat之間離子塊，因爲這似乎是導致兒童導航項目背景的一些問題。這裏有一個JSFiddle來演示代碼的行動。

希望這會有所幫助！如果您有任何問題，請告訴我。

來源

2015-05-11 21:12:59 Serlite

您可以刪除「高度」，爲我工作：

.nav li { 
    width: 150px; 
    border-bottom: none; 
    /*height: 100px;*/ 
    line-height: 100px; 
    font-size: 2em; 
    display: inline-block; 
    margin-right: -4px; 
    }

來源

2015-05-11 21:03:02 Tobi

我不喜歡設定line-height那麼大，除了特殊情況。在你的情況，而不是有那麼大，我相信它是更合適的使用padding。

因此，要做到這一點：

首先對.nav li刪除line-height和height，那麼它現在這個樣子。

.nav li { 
    width: 150px; 
    border-bottom: none; 
    font-size: 2em; 
    display: inline-block; 
    margin-right: -4px; 
}

然後在你的.nav a添加填充：

.nav a { 
    text-decoration: none; 
    color: black; 
    display: block; 
    transition: .3s background-color; 
    padding: 1em 0; 
}

這樣，你的名單比具有固定高度更靈活。

工作實例

.nav ul { 
 
    list-style: none; 
 
    background-color: #5FD6D6; /*nav background */ 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.nav li { 
 
    border-bottom: 1px solid #888; 
 
} 
 
    
 
.nav a { 
 
    text-decoration: none; 
 
    color: black; /* font color */ 
 
    display: block; 
 
    transition: .3s background-color; 
 
    padding: 1em 0; 
 
} 
 
    
 
.nav a:hover { 
 
    background-color: #BFEFEF; /* hover color */ 
 
} 
 
    
 
.nav a.active { 
 
    background-color: #ED1C24; /*selected color */ 
 
    color: white; 
 
    cursor: default; 
 
} 
 

 
    /* Sub Menus */ 
 
.nav li li { 
 
    font-size: 1em; 
 
} 
 

 

 
@media screen and (min-width: 650px) { 
 
    .nav li { 
 
    width: 150px; 
 
    border-bottom: none; 
 
    font-size: 2em; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
    } 
 

 
    .nav a { 
 
    border-bottom: none; 
 
    } 
 

 
    .nav > ul > li { 
 
    text-align: center; 
 
    } 
 

 
    .nav > ul > li > a { 
 
    padding-left: 0; 
 
    } 
 

 
    /* Sub Menus */ 
 
    .nav li ul { 
 
    position: absolute; 
 
    display: none; 
 
    width: inherit; 
 
    } 
 

 
    .nav li:hover ul { 
 
    display: block; 
 
    } 
 

 
    .nav li ul li { 
 
    display: block; 
 
    } 
 
}

<div class="nav"> 
 
     <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Tutorials</a> 
 
      <ul> 
 
      <li><a href="#">Tutorial #[email protected]@</a></li> 
 
      <li><a href="#">Tutorial #2</a></li> 
 
      <li><a href="#">Tutorial #3</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a class="active" href="#">About</a></li> 
 
     <li><a href="#">Newsletter</a> 
 
      <ul> 
 
      <li><a href="#">News #1</a></li> 
 
      <li><a href="#">News #[email protected]@@</a></li> 
 
      <li><a href="#">News #3</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div>

來源

2015-05-11 21:10:21

css使得子菜單重疊

回答

相關問題