将图像添加到标题会添加重叠文本

Question

我添加了一个带有基本CSS的下拉菜单。在添加此代码之前，我的标题看起来很完美，但是一旦添加它，对齐就完全被抛弃了。

在：

后：

这里是前面的代码（没有下拉菜单）用Slim写的ruby on rails：

  #header
    .wrapper
      .login_sec
        .col
          a href="" 
            =image_tag "login_icon1.png"
            span 
              'Welcome, 
              = logged_in_user.username
            =image_tag "profile_link_img.png", class: 'img'
        .col.col2
          a href="/conversations"
            =image_tag "login_icon2.png"
            span Messages
            / =image_tag "login_icon4.png", class: 'img4'
            span class="messbg_icon" =unread_messages(current_user)
            / =unread_messages(current_user)
        .col.col3
          a href="/logout" 
            =image_tag "login_icon3.png", class: 'img3'
            span Logout

在下面的下拉菜单中显示以下内容：

  #header
    .wrapper
      .login_sec
        .col
            span 
            nav.menu
              i.guy
              a href="" 
                =image_tag "login_icon1.png"
              | Welcome, admin!
              i.down
              ul.menu_items
                li
                  a href=""  Action 1
                li
                  a href=""  Action 2
                li
                  a href=""  Action 3
                li
                  a href=""  Action 4
                li
                  a href=""  Action 5
        .col.col2
          a href="/conversations"
            =image_tag "login_icon2.png"
            span Messages
            / =image_tag "login_icon4.png", class: 'img4'
            span class="messbg_icon" =unread_messages(current_user)
            / =unread_messages(current_user)
        .col.col3
          a href="/logout" 
            =image_tag "login_icon3.png", class: 'img3'
            span Logout

单个下拉菜单的原始HTML代码：

<nav class="menu">
    <i class="guy"></i>Welcome admin!<i class="down"></i>
    <ul class="menu_items">
        <li><a href="">Action 1</a></li>
        <li><a href="">Action 2</a></li>
        <li><a href="">Action 3</a></li>
        <li><a href="">Action 4</a></li>
        <li><a href="">Action 5</a></li>
    </ul>
</nav>

单下拉菜单CSS：

.menu {
    position: absolute;
}

.menu .menu_items {
    position: absolute;
    display: none;
}

.menu:hover .menu_items {
    display: block;
}


.menu {
    color: grey;
    background-color: #eee;
}

.menu .menu_items {
    padding: 0.5em;
    margin: 0;        
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 7px;
    list-style: none;
    box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.5);
}

.menu .menu_items a {
    text-decoration: none;
    color: grey;
}
.menu .menu_items a:hover {
    color: black;
}

.content {
    background-color: skyblue;
}

i {
    font-style: normal;
    color: black;
    font: 'wingdings';
}

i.down:before {
  content: '\25BE';
}