问题与下拉菜单

我有一个问题，子菜单，当我关于部分下拉菜单宽度盘旋是超过它假设是。我做错了什么，如何解决它？任何其他建议与我的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

问题与下拉菜单

回答

相关问题