Question

我正在尝试使用CSS和JQueryUI为我的网站创建一个菜单栏，特别是使用JQueryUI的菜单小部件。它似乎在很大程度上起作用，但由于某种原因，菜单显示水平，而我希望它是垂直的。我正在尝试学习更多的CSS，我从网上的一些教程中获得了菜单栏的基础知识。

我把我的代码扔进了小提琴here

HTML

<div class="ui-widget-header">
<ul class="menu">
    <li><a href="#">Test</a>
    </li>
    <li>    <a href="#">Test2</a>

        <ul>
            <li><a href="#">Sub item</a>
            </li>
            <li><a href="#">Sub item</a>
            </li>
            <li>    <a href="#">Sub item</a>

                <ul>
                    <li><a href="#">Sub item</a>
                    </li>
                    <li><a href="#">Sub item</a>
                    </li>
                    <li><a href="#">Sub item</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

ul.menu {
    text-align: left;
    display: inline;
    margin: 0;
    padding: 15px 4px 17px 0;
    list-style: none;
}
ul.menu li {
    float: left;
    margin: 0px 10px 0px 10px;
}
ul.menu li.ui-state-hover {
    margin: -1px 9px -1px 9px;
}
.menu li a {
    display: block;
}
.menu li ul {
    display: none;
    position: absolute;
}
.menu li ul li {
    display: block;
}
li.ui-menu-item.ui-state-hover {
    margin: 0px;
}

JS

$(function () {
    $(".menu li").hover(

function () {
    $(this).addClass("ui-state-hover");
    $("ul", $(this)).show();
},

function () {
    $(this).removeClass("ui-state-hover");
    $("ul", $(this)).hide();
});
$(".menu li ul").each(function () {
    $(this).menu();
});
});

非常感谢任何帮助：）

Answer 1

将float:none应用于您的第一级菜单，如下所示。

.menu li ul li {
display: block;
float:none;
}

FIDDLE DEMO

Answer 2

你已经正确实现了CSS

的细微变化

ul.menu {
    text-align: left;
    display: inline;
    margin: 0;
    padding: 15px 4px 17px 0;
    list-style: none;
}
ul.menu li {
            margin: 0px 10px 0px 10px;
            padding:10px;
}
ul.menu li.ui-state-hover {
    margin: -1px 9px -1px 9px;
}
.menu li a {
    display: block;
}
.menu li ul {
    display: none;
    position: absolute;
}
.menu li ul li {
    display: block;
}
li.ui-menu-item.ui-state-hover {
    margin: 0px;
}

检查一下： - http://jsfiddle.net/uiupdates/76gm29tu/

使用Menus的JQueryUI菜单栏

2 个答案: