問題與下拉菜單

我有一個問題，子菜單，當我關於部分下拉菜單寬度盤旋是超過它假設是。我做錯了什麼，如何解決它？任何其他建議與我的CSS代碼將不勝感激。問題與下拉菜單

這裏是我的代碼：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.main-nav ul { 
 
    margin-left: 40px; 
 
    margin-top: 40px; 
 
    list-style-type: none; 
 
} 
 

 
.main-nav>ul>li { 
 
    float: left; 
 
} 
 

 
.main-nav .active { 
 
    background-color: #0361D6; 
 
} 
 

 
.main-nav li a { 
 
    text-decoration: none; 
 
    font-size: 18px; 
 
    font-family: Verdana; 
 
    color: white; 
 
} 
 

 
.main-nav ul li { 
 
    padding: 20px 30px 20px 30px; 
 
    background-color: #066EFC; 
 
} 
 

 
.main-nav>ul>li { 
 
    border-right: 1px solid #0858C5; 
 
} 
 

 
.main-nav ul>li:last-child { 
 
    border-right: none; 
 
} 
 

 
.main-nav li { 
 
    border-bottom: 3px solid #0B418B; 
 
} 
 

 
.main-nav li:hover { 
 
    cursor: pointer; 
 
    background-color: #0361D6; 
 
    color: #C4C4C4; 
 
} 
 

 
.sub-nav ul { 
 
    display: none; 
 
} 
 

 
.sub-nav li { 
 
    border-bottom: 1px solid black; 
 
} 
 

 
.sub-nav { 
 
    padding: 0px; 
 
    float: none; 
 
    position: absolute; 
 
    top: 65px; 
 
    left: 85px; 
 
    overflow: hidden; 
 
} 
 

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

<nav class="main-nav"> 
 
    <ul> 
 
    <li class="active"><a href="#">Home</a></li> 
 
    <li><a href="#">About</a> 
 
     <nav class="sub-nav"> 
 
     <ul> 
 
      <li><a href="#">Company</a></li> 
 
      <li><a href="#">Workers</a></li> 
 
     </ul> 
 
     </nav> 
 
    </li> 
 
    <li><a href="#">Portfolio</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
    </ul> 
 
</nav>

來源

2017-06-12 Viktor

如果減少的寬度子菜單（假設與_About_相同），那麼這些項目幾乎不會有左/右填充，並會觸摸其容器的左/右邊緣。不是你想要的視覺。您的子菜單正在使用您提供給頂層項目的相同填充配置文件，這看起來合適，應該是您的出發點。 FWIW，你不需要在'nav'中打包子菜單'ul'。 – hungerstar

嘗試用'.main-nav ul li li'爲它們聲明單獨的填充 –

我得到了解決方案您可能會尋找。請參考下面的鏈接...

https://jsfiddle.net/Dhruvil21_04/x40psw2c/1/

下面給出的更換你的CSS 4個... selctors

/*--------Replace-------*/ 

.sub-nav { 
    padding: 0px; 
    float:none; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    overflow: visible; 
    width: 100%; 
} 
.main-nav li:hover { 
    cursor:pointer; 
    background-color: #0361D6; 
    color: #C4C4C4; 
    position: relative; 
} 

/*--------Add-------*/ 

.main-nav ul ul > li { 
    padding: 20px 10px; 
    text-align: center; 
} 
.main-nav ul ul { 
    margin: 0; 
    padding: 0; 
    left: 0; 
}

來源

2017-06-12 14:22:26

問題與下拉菜單

回答

相關問題