CSS下拉菜单，链接减半

我正在学习如何构建纯CSS下拉菜单，我看到一个奇怪的问题。我搜索过，没有发现任何有用的东西。CSS下拉菜单，链接减半

如果将鼠标悬停在博客链接上，您会看到“案例研究”与一行中的“案例”和下一行中的“研究”分成两半。

我检查了我的HTML，看起来很好。这是一个漫长的一天，所以也许我错过了一些明显的东西。：○

我有这个至今：

<nav class="p-nav"> 
     <ul> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Showcase</a></li> 
      <li><a href="#">Services</a></li> 
      <li><a href="#">Blog</a> 
       <ul> 
        <li><a href="#">Case Studies</a></li> 
        <li><a href="#">Tutorials</a> 
         <ul> 
          <li><a href="#">CSS</a></li> 
          <li><a href="#">Javascript</a></li> 
          <li><a href="#">Playground</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </nav> 

@import url(http://fonts.googleapis.com/css?family=Lato:300, 400); 

.p-nav li { 
    position: relative; 
} 

.p-nav ul ul { 
    display: none; 
    position: absolute; 
    top: 100%; 
} 

.p-nav ul li { 
    float: left; 
} 

.p-nav a { 
    display: block; 
    font: 300 100%/70px"Lato", sans-serif; 
    padding: 0 30px; 
} 

.p-nav ul li:hover > ul { 
    display: block; 
}

这里是链接到代码：http://jsfiddle.net/6CwYh/20/

谁能解释为什么它这样做了，我怎么能解决这个问题？

TIA。

来源

2014-04-21 cornishninja

空间“问题”的原因是它将这两个单词放在两行上。如果你不喜欢，你可以添加white-space:nowrap;到<li>所以想换行，看看小提琴：http://jsfiddle.net/6CwYh/21/

.p-nav li { 
    position: relative; 
    white-space:nowrap; 
}

来源

2014-04-21 19:56:02 caramba

谢谢，我得记住伎俩。 :) – cornishninja

@cornishninja不客气，你想忘记:-) – caramba

根本就空间足够的文本以适应，这是为什么它正在包装。给第二级ul一个宽度，如350px。

http://jsfiddle.net/6CwYh/24/

此外，请确保您使用嫡系运算符（>）我已经添加了一些在上面的链接。

如果我的目标是#something ul li即使它们是嵌套的，它实际上也会将所有uls和所有lis都锁定在#something之内。

这导致下拉菜单中的项目浮动，这导致了进一步的问题。

/* Better selectors */ 
#something > ul {} 
#something > ul > li {} 
#something > ul > li > ul {} 
#something > ul > li > ul > li {}

来源

2014-04-21 20:42:41

感谢您的解释。我现在已经解决了我认为的问题。 – cornishninja

使其更广泛：

nav ul li{ 
    width:200px; 
}

其固定

来源

2014-05-27 18:57:39

CSS下拉菜单，链接减半

回答

相关问题