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

Question

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

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

#menu-my-integra, ul.sub-menu {
    list-style: none;
  padding: 0;
  margin: 0;
}
#menu-my-integra li {
    display: inline;
    margin-right:10px;
}
ul.sub-menu {
    display:none;
}
#menu-my-integra li:hover ul.sub-menu {
    display: block;
    max-height: 200px;
}

所以，这显示了水平位置的菜单，但我想在父项下方的垂直列表中显示子菜单。

我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”元素的宽度百分比。希望对您有所帮助!