要素が被ってしまい、隠れてしまっている状態にいます。

今現在、ボタンにカーソルを置くと、メニューが表示されるようにしています。しかし、そのメニューが真下にいかないで、要素が被ってしまい、ずれてしまっている状態になっています。もしわかるかたがいらしたら、教えていただきたいです。

app/assets/stylesheets/style.scss

.photo {
  padding: 0;
}
.head-container {
  background-color: white;
}
.headed {
  list-style: none;
  display: flex;
  height: 75px;
}

.headed li {
  width: 150px;
  text-align: right;
  height: 50px;
  line-height: 50px;
  font-size: 22px;
  margin-top: 0.8%;
  margin-bottom: 1%;
  color: $accent;
}

li.left {
  width: 400px;
  font-size: 34px;
  margin-left: 3.5%;
  margin-right: 5%;
  color: $accent;
  font-weight: bold;
}

li.first {
  width: 630px;
}

/* Chance to Chance */
a.home {
  color: $accent;
}

/* logout */

a.logout {

  display: inline-block;
  color: $accent;
  margin-top: 3.0px;
  margin-right: 10.0px;
  padding-right: 5.0px;
  text-decoration: none;
  border-radius: 3px;
  transition: .4s;
}

/* */

/* guider */
.guider_nav {
    
    height: 100px;
    width: 400px;
    margin-left: 500px;
    position: relative;
    right: 0;
    span {
      top: 5px;
      display: block;
      float: left;
      margin-left: 0px;
      margin-top: 11px;
      width: 100px;
      height: 50px;
      font-size: 25px;
      cursor: pointer;
      position: absolute;
      color: $accent;
      left: 48px;
      &:after {
        content: '▼';
        font-size: .7em;
        margin-left: -4px;
      }
      &:hover ul {
        color: $accent;
        display: block;
      }
    }
    ul {
      display: none;
      position: absolute;
      top: 46px;
      right: 0;
      border-left: 1px solid #d8d8d8;
      border-right: 1px solid #d8d8d8;
      box-shadow: 1px 2px 5px rgba(0,0,0,0.1);
      li {
        background-color: #f0f0f0;
        a {
          display: block;
          padding: 10px 20px;
          text-align: left;
          border-bottom: 1px solid #d8d8d8;
        }
      }
     }
  }

  li.category {
    font-size: 19px;
    width: 150px;
    background-color: white;
    height: 214px;
    text-align: center;   
    left: 5px;
  }
  a.guider-category {
    color: $accent;   
  }
  a.plan {
  font-size: 25px;
  color: $accent;
  display: inline-block;
  padding: 0.1em 0.8em 0.1em 1em;
  text-decoration: none;
  border: solid 2px white;
  border-radius: 3px;
  transition: .4s;
  float: right;
  margin-right: 100px;
  margin-top: 15px;
}
  a.plan:hover {
  background: #67c5ff;
  color: white;
}

app/assets/style.scss

div.contents.row {
  h2 {
    
    @include boxBase(20px 0, 0);
    font-weight: normal;
    strong {
      font-weight: bold;
      padding-right: 5px;
      font-size: 1.2em;
    }
  }

  div.avicii {
      top: 12%;
      bottom: 0;
      right: 0;
      font-size: 15px;
      padding: 0 auto;
      
  }
  div.martin.garrix {
      top: 12%;
      bottom: 0;
      right: 0;
      font-size: 15px;
      padding: 0 auto;
      .clear {
        clear: left;
      }
  }

  .new_user{
  font-family: "游ゴシック", "YuGothic";
  }

  div.content_post, .edm_post {
    @include boxBase(20px 0 ,30px);

    position: relative;
    height: 400px;
    color: #fff;
    background-size: cover;
    background-position: center center;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba($black,0.2);
    &:after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      @include filter-gradient(#000000, #a60000, vertical);
      @include background-image(linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 62%,rgba(0,0,0,0.85) 100%));
      z-index: 1;
      border-radius: 3px;
    } 
    .more {
      position: absolute;
      cursor: pointer;
      top: 20px;
      right: 30px;
      z-index: 2;
      height: 100px;
      width: 80px;
      text-align: right;
      &:hover ul.more_list {
        display: block;
      }
      ul.more_list {
        position: absolute;
        text-align: left;
        width: 80px;
        right: 0;
        font-size: 12px;
        background-color: #fff;
        border: 1px solid #ddd;
        display: none;
        box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        border-radius: 3px;
        li {
          border-bottom: 1px solid #ddd;
          &:last-child {
            border-bottom: 0;
          }
          a {
            display: block;
            padding: 5px;
            &:hover {
              background-color: $accent;
              color: #fff;
            }
          }
        }
      }
    }

app/views/layout/application.html.erb

<body class="photo">
    <header>
     <div>
      <div class="head-container">
       <nav class="headed">
         <li class="left"><a class="home" href="/plans">Chance to Chance</a></li>
       
        <% if guider_signed_in? %>
          <div class="guider_nav">
            <span><%= current_guider.nickname %>
              <ul>
                  <li class="category">
                    <a class="guider-category", href="/guiders/<%= current_guider.id %>">マイページ</a>
                    <a class="guider-category", href="/guiders/<%= current_guider.id %>/go">プロブレム</a>
                    <%= link_to "ログアウト", destroy_guider_session_path, method: :delete, class: 'guider-category' %>
                  </li>
              </ul>
            </span>
            <a class="plan" href="/plans/new">プラン</a>
          </div>
          
        <% end %>

        <% if tourist_signed_in? %>
             <li class="first">
                <%= link_to "Logout", destroy_tourist_session_path, method: :delete, class: 'logout' %>
              </li>
              <li class="second">
                <a class='post' href="/tourists/show">Contact</a>
              </li>
        <% end %>

        <% if ! (guider_signed_in? or tourist_signed_in?) %>
         
             
             <li class="first"><%= link_to "traveller", new_tourist_session_path, class: 'post' 
            %></li>
             <li class="second"><%= link_to "guider", new_guider_session_path, class: 'post' %> 
            </li>         
        <% end %>
       </nav>
       <hr class="bar">
      </div>
     </div>
    </header>

app/view/plans/index.html.erb

<div class="contents row">
   <% @plans.each do |plan| %>
    <div class="content_post" style="background-image: url(<%= plan.image %>);">
        <div class="more">
          <span><%= image_tag 'arrow_top.png' %></span>
           <ul class="more_list">
            <li>
              <%= link_to 'detail', "/plans/#{plan.id}", method: :get %>
            </li>
            <% if guider_signed_in? && current_guider.id == plan.guider_id %>
             <li>
               <%= link_to '編集', "/plans/#{plan.id}/edit", method: :get %>
             </li>
             <li>
               <%= link_to '削除', "/plans/#{plan.id}", method: :delete %>
             </li>
            <% end %>
           </ul>
        </div>
        <%= simple_format(plan.title) %>
      <span class="name">
        <a href="/guiders/<%= plan.guider_id %>">
          <span>guider</span><%= plan.guider.nickname %>
        </a>
      </span>
    </div>
   <% end %>
</div>