CODEWITHSUNDEEP
htmlcss
V_JOSH_C
V_JOSH_C

Reputation: 172

sub menu not positioning side by side

I found an issue with .sub_menu code left:-; and transform:translateX(-%);,So I changed position to relative and re-positioned with the two codes above, It seemed to work but now the two sub menus i have are no longer Side-By-Side. What they do is separate by a few centimeters top:, Not sure what made this happen, Any help would be appreciated,Thanks

JSFiddle sub menu pops up when you hover over 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;
}

Upvotes: 4

Views: 112

Answers (1)

IMI
IMI

Reputation: 2469

This should get you close to what you are looking for. I modified the css heavily. Change the #right_menu line-height and right position as well as the .sub_menu top position to change the height and position offsets of the menus.

EDITED: Moved all background colors to the li elements. Added #right_menu li:hover {background-color:#ee00ee;} to darken menu item on hover and updated the .sub_menu li gradient to match.

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>

Upvotes: 1

Related Questions