Html 显示图标按钮的子菜单

我尝试创建一个导航菜单。某些项目应获得一个子菜单，通过单击/悬停箭头图标可显示该子菜单

但是我在正确定位子菜单时遇到了一些问题

JSFiddle:

---

这就是您试图实现的目标（与下拉文本对齐的字体图标导航）

您正在使用按钮构建菜单，这是不必要的（或推荐的）。使用

ul

无序列表和列表项

li

构建导航。那么插入图标就相当简单了

<li><a href="#"><i class="fa fa-pencil-square-o fa-fw"></i> Drafts</a>

切换导航

您的预期目标是什么？我尝试获得类似的结果-这意味着如果用户单击箭头，我希望显示一个子菜单（.子菜单）：

.nav-button-container {
    display: inline-block;
    width: 2em;
    height: 2.5em;
    padding: .25em;
    text-align: center;
    color: #555;
}
.button-text {
    display: block;
    font-size: .5em;
    margin: .5em 0;
}
.button-icon {
    vertical-align: middle;
    font-size: 1.3em;
}
.button-arrow-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #B4B4B4;
    margin: 0 auto;
}
.line-separator {
    display: inline-block;
    width: 1em;
}
nav {
    background-color: #f2f2f2;
    padding: .3em 0;
    border-radius: 7px;
}
.nav-button-group {
    display: inline-block;
    background-color: #fafafa;
    padding: .3em;
    border-radius: 5px;
}
.nav-button-group-title {
    display: block;
    font-weight: bold;
    font-size: .7em;
    color: #555;
    padding: 0 .5em;
    background-color: #F2F2F2;
    border-radius: 4px;
}

<li><a href="#"><i class="fa fa-pencil-square-o fa-fw"></i> Drafts</a>