Question

我发现.sub_menu代码left:-;和transform:translateX(-%);存在问题，所以我将位置更改为相对位置并重新定位上面的两个代码，它似乎工作但现在两个我所拥有的子菜单不再是并排的。他们做的是分开几厘米的顶部：，不确定是什么导致这种情况发生，任何帮助将不胜感激，谢谢

将鼠标悬停在图库

上时会弹出

JSFiddle子菜单

.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

这应该让你接近你想要的。我严重修改了css。更改#right_menu line-height和right位置以及.sub_menu top位置，以更改菜单的高度和位置偏移。

已编辑：将所有背景颜色移至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>

子菜单不能并排定位

1 个答案: