Question

我有一个下拉菜单，其中包含我们公司的产品列表。我有一个产品名称Hotel Management Solutions，我试图在单行下拉菜单中显示但是有多行。

这是小提琴......

这是HTML代码..

<nav>
<ul style="padding-left: 3px">
    <li><a href="#">Products</a>

        <ul>
            <li><a href="#">Hotel Management Solutions </a>
            </li>
        </ul>
       </li>
      </ul>
</nav>

请帮我在一行显示内容..

Answer 1

将white-space:nowrap添加到nav ul ul：

nav ul ul {
    background: #5f6975;
    border-radius: 0px;
    padding: 0;
    position: absolute;
    top: 100%;
    white-space:nowrap;
}

<强> See Fiddle Demo

这将使每个列表项保持在一行上，而无需设置固定宽度。

Answer 2

您需要添加此样式

ul > li > ul li{
    display: inline-block;
    float: left;
    padding: 5px;
}

Answer 3

解决此问题的唯一方法是更改css中产品div的宽度

nav ul li a {
    display: block;
    padding: 25px 20px;
    color: #00a1e4;
    text-decoration: none;
    width:250px;

Answer 4

用此

替换你的导航文件声明

nav ul ul li a {
    padding: 1px;
    color: #fff;
    width: 200px;

}

下拉菜单项目正在下降

4 个答案: