CSS导航下拉填充

因为它用于间隔出导航链接而不调整我的'nav ul li'的填充，我如何填充下拉链接背景的全部宽度'nav ul li ul li'，因为它似乎只是填充一半的背景颜色。CSS导航下拉填充

(HTML): 

    <nav> 
    <ul> 
     <li><a href="#">Num 1</a></li> 
     <li><a href="#">Num 2</a></li> 
     <li><a href="#">Num 3</a></li> 
     <li><a href="#">Num 4</a></li> 
     <li><a href="#">Num 5</a></li> 
     <li><a href="#">Num 6</a> 
      <ul> 
       <li><a href="#">Drop 1</a></li> 
       <li><a href="#">Drop 2</a></li> 
      </ul></li> 
     <li><a href="#">Num 7</a></li> 
    </ul> 
</nav> 

    (css)

JSFIDDLE

注意：选择不上传的CSS，因为我必须使用哈佛参照系统，并与网上片段相比，回来作为即使这是我自己的工作更高的剽窃百分比任何相似之处，所以我会选择在JSFiddle上传更精确的代码，因为它不会从抄袭测试中返回。

来源

2014-10-01 Dianabolz

-1

以及一个快速的方法来解决这个问题是不是添加填充你只需要添加右边的30像素，并留给导航UL李其最终被125px

nav ul li { 
    border-right: 1px solid #355e7f; 
    display: inline-block; 
    float: left; 
    width: 125px; 
}

下面是一个总宽度更新JSFIDDLE

希望有所帮助！

来源

2014-10-01 00:58:54 Amir5000

为什么不合理？你需要解释为什么你投了我的答案。而不是只是投了下来，没有给出理由...... – Amir5000 2014-10-12 03:12:09

这里是一个liworking demo

更改您的填充，以a：

nav ul li a {width:65px; display:inline-block; padding:0 30px}

，并添加显示器和漂浮礼仪到second-level li：

nav ul li ul li { padding:0; border:none;display: list-item;float: none }

来源

2014-10-01 01:08:21 dippas

@Brian，感谢您的编辑;） – dippas 2014-10-01 01:12:52

CSS导航下拉填充

回答

相关问题