Submenu is not positioned side by side

Question

I found a problem with .sub_menucode left:-;and transform:translateX(-%);therefore I changed the position to relative and repositioned with the two codes above. This seemed to work, but now the two submenus that I don't have are the longer Side-By-Side. What they do is divided into a few centimeters from above :, Not sure what made this possible, Any help would be appreciated, thanks

JSFiddle appears when you hover over the gallery

.sub_menu {
  display: none;
  position:relative;
  top:-60%;
  left:-350%;
  transform:translateX(-40%);
  width: auto;
}

.sub_menu > li {
  display:inline-block;
}

.sub_menu li a {
  background:-webkit-linear-gradient(#77047e,#FF00FF);
  background:-o-linear-gradient(#77047e,#FF00FF);
  background:-moz-linear-gradient(#77047e,#FF00FF);
  background:linear-gradient(#77047e,#FF00FF);
}

.sub_menu li a:hover {
  background:#FF00FF;
  top:1em;
}

Answer 1

This should come close to what you are looking for. I changed css a lot. Change the position #right_menu line-heightand right, as well as the position .sub_menu top, to change the displacements of height and position in the menu.

EDITED: li. #right_menu li:hover {background-color:#ee00ee;}, .sub_menu li, .

body {
  font-family:Verdana,Geneva,sans-serif;
  color:#FFF;
  font-size:12px;
  font-family:Trebuchet MS,Arial,Helvetica;
  background:url() no-repeat center 0,#000 url() left top;
  background-size:1670px 950px;
}

#right_menu {
    display: table;
    font-size: 15px;
    line-height: 46px; /* Height of menu items */
    margin: 0;
    padding: 0;
    position: fixed;
    right: 46px; /* Offset equal to line-height */
    text-align: center;
    text-transform: uppercase;
    top:0;
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    transform: rotate(-90deg);
    transform-origin: right top 0;
    width: 100vh;
    white-space: nowrap;
}

#right_menu li {
    display: table-cell;
    background-color: #ff00ff;
}

#right_menu li a {
    display: block;
    padding: 0 20px;
    text-decoration: none;
}

.sub_menu /* same as #right_menu li ul */{
    display: none;
    left: 50%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: -46px; /* Offset equal to height (line-height) */
}

.sub_menu li {
    background:-webkit-linear-gradient(#77047e,#ee00ee);
    background:-o-linear-gradient(#77047e,#ee00ee);
    background:-moz-linear-gradient(#77047e,#ee00ee);
    background:linear-gradient(#77047e,#ee00ee);
}

#right_menu li:hover {
    background: none; /* reset */
    background-color: #ee00ee;
}

#right_menu li:hover .sub_menu {
    display: block;
}

<ul id="right_menu">
  <li><a href="#home_page">Home</a></li>
  <li><a href="#profile_about_me_friends">About Me</a></li>
  <li><a href="#profile_interests_content">Interest</a></li>
  <li><a href="#profile_photo_galleries">Gallery</a>
     <ul class="sub_menu">
       <li><a href="#profile_password_photo_galleries">Password</a></li>
       <li><a href="#">Password</a></li>
    </ul>
  </li>
  <li><a href="#profile_comments">Message Me</a></li>
</ul>

Hide result