html – 子菜单不能并排定位

概述我发现.sub_menu代码存在问题： – ;和transform：translateX( – ％);,所以我将位置更改为相对并重新定位上面的两个代码,它似乎工作但现在我的两个子菜单不再是并排.他们做的是分开几厘米的顶部：,不确定是什么导致这种情况发生,任何帮助将不胜感激,谢谢 将鼠标悬停在图库上时会d出JSFiddle子菜单 .sub_menu { display: none; posi 我发现.sub_menu代码存在问题： – ;和transform：translateX( – ％);,所以我将位置更改为相对并重新定位上面的两个代码,它似乎工作但现在我的两个子菜单不再是并排.他们做的是分开几厘米的顶部：,不确定是什么导致这种情况发生,任何帮助将不胜感激,谢谢

将鼠标悬停在图库上时会d出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;}

解决方法 这应该让你接近你想要的.我严重修改了CSS.更改#right_menu行高和右行位置以及.sub_menu顶部位置以更改菜单的高度和位置偏移.

编辑：将所有背景颜色移动到li元素.添加#right_menu li：hover {background-color：#ee00ee;}使hover上的菜单项变暗并更新.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 >       <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>

总结

以上是内存溢出为你收集整理的html – 子菜单不能并排定位全部内容，希望文章能够帮你解决html – 子菜单不能并排定位所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。