如何将垂直位置放置在垂直CSS菜单的左侧或右侧？

我写了一个基本的CSS菜单 - 一个垂直导航栏，旨在放置在一边。但是，除了当前的设计外，我希望能够将项目2.0中的下拉列表放置到父项的左侧或右侧。如何将垂直位置放置在垂直CSS菜单的左侧或右侧？

完成此操作的最佳方法是什么？

我还包括当前代码的链接的jsfiddle：https://jsfiddle.net/eagqxnaz/1/

<ul class="navbar"> 
    <li><a href="#">1.0</a></li> 
    <li><a href="#">2.0</a> 
    <ul> 
     <li><a href="/?">2.1</a></li> 
     <li><a href="/?">2.2</a></li> 
     <li><a href="/?">2.3</a></li> 
     <li><a href="/?">2.4</a></li> 
    </ul>   
    </li> 
</ul> 

.navbar li { 
    width: 150px; 
    text-align: center; 
    list-style: none; 
    background-color: #a1a0a5; 
} 

.navbar a {       
    color: #FFF; 
    display: block; 
    padding: 8px 4px; 
} 

.navbar a:hover { 
    background-color: #5a5775; 
} 

.navbar li ul { 
    display: none; 
}    

.navbar li:hover ul  { 
    position: absolute; 
    display: block; 
    left: 0; 
}

来源

2017-03-08 Merlin

[小提琴]（https://jsfiddle.net/eagqxnaz/2/） –

谢谢你 - 我不能完全得到那工作正常。请给他人解释一个答案？ – Merlin

不客气，你的问题解决了就够了。不过，我想提一点，作为一种更好的做法，您不应该在'hover'上应用样式。将它们添加到正常样式中，悬停时它应该只是'display：none/block'，除非在悬停时需要某些样式更改。 –

尝试具有顶面和留下来的“.navbar李：悬停UL”，它会显示值类似下面的屏幕截图

代码：

.navbar li { 
    width: 150px; 
    text-align: center; 
    list-style: none; 
    background-color: #a1a0a5; 
    position: relative; 
} 

.navbar a {       
     color: #FFF; 
     display: block; 
    padding: 8px 4px; 
} 

.navbar a:hover { 
    background-color: #5a5775; 
} 

.navbar li ul { 
    position: absolute; 
    display: none; 
    left: 100%; 
    padding: 0; 
    top: 0; 
}    

.navbar li:hover > ul { 
    display: block; 
}

希望它有帮助。

来源

2017-03-08 11:37:13 ChiranjeeviIT

如果它在工作，那么它并不意味着它是一个解决方案。你有硬编码的“左”和“顶”位置是错误的。使用此解决方案时，只要调整窗口大小，下拉菜单的位置就不正确。 –

@MuhammadUsman是的你是正确的，但它只是一个示例代码，使其工作。我们需要制作动态逻辑，根据菜单条目和深度在脚本中设置左侧和顶部。这可以基于他的脚本语言。 – ChiranjeeviIT

这里我们不需要脚本。检查这[小提琴]（https://jsfiddle.net/eagqxnaz/3/） –

I think this would be a better solution: 

Just update your css as given below : 

.navbar { 
    margin: 0; 
    padding: 0; 
} 

.navbar li { 
    width: 150px; 
    text-align: center; 
    list-style: none; 
    background-color: #a1a0a5; 
    position: relative; 
} 

.navbar a { 
    color: #FFF; 
    display: block; 
    padding: 8px 4px; 
} 

.navbar a:hover { 
    background-color: #5a5775; 
} 

ul.navbar li ul { 
    margin: 0; 
    padding: 0; 
    top: 0; 
    left: 100%; 
    position: absolute; 
    display:none; 
} 

.navbar li:hover ul { 
    display:block; 
} 

Hope this is helpful.

来源

2017-03-08 13:03:26 Ram

如何将垂直位置放置在垂直CSS菜单的左侧或右侧？

回答

相关问题