绝对定位固定宽度的Css水平菜单div

我正在创建一个与水平子菜单垂直的导航菜单。绝对定位固定宽度的Css水平菜单div

的HTML：

<div id="sidenav"> 
<ul class="menu"> 
    <li class="option"> 
     <span class="label">Home</span> 
    </li> 
    <li class="option"> 
     <span class="label">About</span> 
    </li> 
    <li class="option"> 
     <span class="label">More...</span> 
     <div class="submenu"> 
      <ul class="menu"> 
       <li class="option"> 
        <span class="label">First</span> 
       </li> 
       <li class="option"> 
        <span class="label">Second</span> 
       </li> 
       <li class="option"> 
        <span class="label">Thrid</span> 
       </li> 
      </ul> 
     </div> 
    </li> 
</ul> 
</div>

的CSS：

#sidenav { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    width: 100px; 
    color: #fff; 
    background-color: #000; 
} 

.menu { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 

.option { 
    width: 100px; 
    height: 50px; 
    text-align: center; 
} 

#sidenav > .menu > .option { 
    position: relative; 
} 

#sidenav > .menu > .option > .submenu { 
    position: absolute; 
    top: 0; 
    left: 100px; 
    color: #fff; 
    background-color: #ddd; 
} 

#sidenav > .menu > .option > .submenu > .menu > .option { 
    float: left; 
}

两个菜单绝对定位的子菜单需要是上级菜单选项的右侧。

我在子菜单的每个菜单选项中添加了一个浮动，但它们保持垂直，不会水平。我如何让子菜单变成水平的？

你可以看到在这个小提琴结果：

http://jsfiddle.net/vS9dY/1/

来源

2014-05-01 Damir Bojan

是否这样？ http://jsfiddle.net/9yMxt/ –

@JoshCrozier是的但在你的例子中，你指定了子菜单的宽度。我无法指定每个子菜单的宽度，因为它们可能都有不同数量的项目... –

这是我能想到的唯一选择 - http://jsfiddle.net/5MXtb/ - 无需宽度。 –

演示http://jsfiddle.net/vS9dY/7/

说明：很简单，

在#sidenav > .menu > .option > .submenu > .menu > .option，删除float:left;并将其应用display:inline-block;。
On .menu apply white-space:nowrap; to prevent inline-block.option s wrapping to the next line。
应用line-height:50px;至.option s以垂直居中文本。

所以：

.menu { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    white-space:nowrap; 
} 

.option { 
    width: 100px; 
    height: 50px; 
    line-height:50px; 
    text-align: center; 
} 

#sidenav > .menu > .option > .submenu > .menu > .option { 
    display:inline-block; 
}

来源

2014-05-01 22:38:58 Arbel

太棒了！为什么菜单上的white-space：nowrap和选项上的display：inline-block的组合会阻止选项水平变化？ –

@DamirBojan我在关于它是如何工作的答案中加入了一些解释。 – Arbel

@Arbel（多余的？）我只是想让你知道我的答案。 – dcromley

“很简单” - 真棒是更好的形容词。
我很享受这个Q & A，+1 &感谢这两个。

list-style-type: none;

让我看看divs是否会给出相同的结果。他们是这样。

<html> 
<head> 
<style> 
#sidenav  
    { position:absolute; top:0; left:0; bottom:0; width:100px; 
    background:#ccc; outline:1px dashed black; } 
/* - - - - using lists - - - - */ 
ul 
    { list-style-type:none; padding:0; margin:0; } 
ul 
    { white-space:nowrap; } 
li 
    { width:100px; height:50px; line-height:50px; text-align:center; } 
.ulmenu > li 
    { position:relative; background:#fdd; } 
.subulmenu  
    { position:absolute; top:0; left:100px; background:#dfd; } 
.subulmenu > li 
    { display:inline-block; background:#ddf; } 
/* - - - - using divs - - - - */ 
.divmenu 
    { white-space:nowrap; } 
.divmenu > div, .subdivmenu > div 
    { width:100px; height:50px; line-height:50px; text-align:center; } 
.divmenu > div 
    { position:relative; background:#fdd; } 
.subdivmenu  
    { position:absolute; top:0; left:100px; background:#dfd; } 
.subdivmenu > div 
    { display:inline-block; background:#ddf; } 
</style> 
</head> 
<body> 
<div id="sidenav"> 
    <ul class="ulmenu"><!-- using lists --> 
    <li>Home</li> 
    <li>About</li> 
    <li>More... 
     <ul class="subulmenu"> 
     <li>First</li> 
     <li>Second</li> 
     <li>Thrid</li> 
     </ul> 
    </li> 
    </ul> 
    <div class="divmenu"><!-- using divs --> 
    <div>Home2</div> 
    <div>About2</div> 
    <div>More2... 
     <div class="subdivmenu"> 
     <div>First2</div> 
     <div>Second2</div> 
     <div>Thrid2</div> 
     </div> 
    </div> 
    </div> 
</div> 
</body> 
</html>

来源

2014-05-03 16:47:01 dcromley

绝对定位固定宽度的Css水平菜单div

回答

相关问题