Question

我有一些菜单的HTML代码，我已经开始为菜单创建CSS但是我已经停止了，因为我不知道下一步要去哪里

到目前为止，我已经添加了这个CSS：

Grant All On Customers to Admin with grant option;

因此，这会显示水平位置的菜单，但我想在父项目下方的垂直列表中显示子菜单。

我created a fiddle在这里：

Answer 1

我通过实现box-sizing：border-box属性来实现它：

/*Initialize*/
ul#menu-my-integra, ul#menu-my-integra ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu-my-integra li, ul#menu-my-integra ul.sub-menu li {
    list-style-type: none;
    display:inline-block;
    width:20%;
    background: #666;
    text-align:center;
}
/*Link Appearance*/
ul#menu-my-integra li a, ul#menu-my-integra li ul.sub-menu li a {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    padding: 8px;
    display:inline-block;
    margin:0;
    box-sizing:border-box;
}
/*Make the parent of sub-menu relative*/
ul#menu-my-integra li {
    position: relative;
}
/*sub menu*/
ul#menu-my-integra li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
}
ul#menu-my-integra li:hover ul.sub-menu {
    display:block;
}

注意：您必须根据有多少元素来调整'li'元素的％宽度。希望有所帮助！

如何从原始HTML代码制作CSS菜单

1 个答案: