Отображение подменю для кнопки значка

Question

Я пытаюсь создать меню навигации. Некоторые элементы должны получить подменю, которое будет отображаться щелчком/наведении указателя стрелки.

Но я получил некоторые проблемы, чтобы позиционировать подменю правильно

JSFiddle:http://jsfiddle.net/g651mwdu/

<nav> 
    <div class="nav-button-group"> <span class="nav-button-group-title">Title</span> 

     <div class="nav-button-container"> <span class='fa fa-plus button-icon'></span> 
<span class="button-text">Add</span> 

      <div class="button-arrow-down"></div> 
      <div class="submenu">Show some more elements</div> 
     </div> 
     <div class="nav-button-container"> <span class='fa fa-cog button-icon'></span> 
<span class="button-text">Change</span> 

      <div class="button-arrow-down"></div> 
     </div> 
     <div class="nav-button-container"> <span class='fa fa-link button-icon'></span> 
<span class="button-text">Link</span> 

     </div> 
     <div class="nav-button-container"> <span class='fa fa-comment-o button-icon'></span> 
<span class="button-text">Tooltip</span> 

     </div> 
     <div class="nav-button-container"> <span class='fa fa-trash-o button-icon'></span> 
<span class="button-text">Remove</span> 

     </div> 
    </div> 
</nav> 

CSS

.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; 
} 

Answer 1

Является ли это то, что вы пытаетесь достичь (навигации с шрифта удивительные значки, выровненные по выпадающему тексту)?

Вы используете кнопки для создания своего меню, которое не является необходимым (или рекомендуется). Используйте ulнеуказанные записи и элементы списка li чтобы построить ваш nav. Тогда вставка значков довольно проста.

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

Пример сниппета

.navbar { 
 
    border-radius: 0px; 
 
} 
 
.dropdown-submenu { 
 
    position: relative; 
 
} 
 
.dropdown-submenu > .dropdown-menu { 
 
    top: 0; 
 
    left: 100%; 
 
    margin-top: -6px; 
 
    margin-left: -1px; 
 
    -webkit-border-radius: 0px; 
 
    -moz-border-radius: 0px 6px 6px 6px; 
 
    border-radius: 0px; 
 
} 
 
.dropdown-submenu:hover > .dropdown-menu { 
 
    display: block; 
 
} 
 
.dropdown-submenu > a:after { 
 
    display: block; 
 
    content: " "; 
 
    float: right; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-color: transparent; 
 
    border-style: solid; 
 
    border-width: 5px 0px 5px 5px; 
 
    border-left-color: #cccccc; 
 
    margin-top: 5px; 
 
    margin-right: -10px; 
 
} 
 
.dropdown-submenu:hover > a:after { 
 
    border-left-color: #ffffff; 
 
} 
 
.dropdown-submenu.pull-left { 
 
    float: none; 
 
} 
 
.dropdown-submenu.pull-left > .dropdown-menu { 
 
    left: -100%; 
 
    margin-left: 10px; 
 
    -webkit-border-radius: 6px 0px 6px 6px; 
 
    -moz-border-radius: 6px 0px 6px 6px; 
 
    border-radius: 6px 0px 6px 6px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav role="navigation" class="navbar navbar-inverse"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
    </button> <a href="#" class="navbar-brand">Brand</a> 
 

 
    </div> 
 
    <!-- Collection of nav links, forms, and other content for toggling --> 
 
    <div id="navbarCollapse" class="collapse navbar-collapse"> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a> 
 

 
     </li> 
 
     <li><a href="#">Profile</a> 
 

 
     </li> 
 
     <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a> 
 

 
     <ul role="menu" class="dropdown-menu"> 
 
      <li><a href="#"><i class="fa fa-envelope-o fa-fw"></i> Inbox</a> 
 

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

 
      </li> 
 
      <li><a href="#"><i class="fa fa-paper-plane-o fa-fw"></i> Sent Items</a> 
 

 
      </li> 
 
      <li class="divider"></li> 
 
      <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Trash</a> 
 

 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Hello</a> 
 

 
     </li> 
 
     <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Things <b class="caret"></b></a> 
 

 
     <ul role="menu" class="dropdown-menu"> 
 
      <li><a href="#"><i class="fa fa-envelope-o fa-fw"></i> Inbox</a> 
 

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

 
      </li> 
 
      <li><a href="#"><i class="fa fa-paper-plane-o fa-fw"></i> Sent Items</a> 
 

 
      </li> 
 
      <li class="divider"></li> 
 
      <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Trash</a> 
 

 
      <li class="dropdown-submenu"> <a tabindex="-1" href="#"><i class="fa fa-hand-o-right fa-fw"></i> Profile</a> 
 

 
       <ul class="dropdown-menu"> 
 
       <li><a tabindex="-1" href="#"><i class="fa fa-calendar-o fa-fw"></i> Account</a> 
 

 
       </li> 
 
       <li><a tabindex="-1" href="#"><i class="fa fa-folder-open-o fa-fw"></i> Users</a> 
 

 
       </li> 
 
       <li><a tabindex="-1" href="#"><i class="fa fa-file-o fa-fw"></i> Login</a> 
 

 
       </li> 
 
       </ul> 
 
      </li> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Login</a> 
 

 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav>