CSS 子菜单未与父菜单对齐

Question

我一直在努力使子菜单与正确的菜单父项对齐，但无法找出问题所在。

关于我们和艺术家简介都有子菜单。关于我们，我已经按照我想要的方式工作，但它不会转移到其他菜单项，它们都显示在关于我们下面。

这里是 css:

.mainmenu
{
    height:40px;
    background:#333;
    position:relative;
    border-radius:3px 3px 0 0;
    text-align:center;
}

.mainmenu ul
{
    padding:0px;
    margin:0px;
    list-style:none;
}

.mainmenu ul li
{
    display:inline;
    height:40px;
    line-height:38px;
}

.mainmenu ul li a
{
    display:inline-block;
    font-weight:300;
    font-size:18px;
    color:#fff;
    padding:0 20px;
    border-top:2px solid #333;
    height:38px;
}

.mainmenu ul li a:hover 
{
    color:#333538;
    background:#fff;
    border-top:2px solid #cf0a2c;
    text-decoration:none;
}

.mainmenu ul li.current-menu-item a {
    color:#333538;
    background:#fff;
    text-decoration:none;
    }

.mainmenu li ul {
    position: absolute;
    top:40px;
    left:0;
    right:auto;
    display: none;
    margin-left:100px;
    }

.mainmenu li:hover ul {
    display: block;
    background:#fff;
    color:#333;
    border:2px solid #cf0a2c;
    border-top:none;

  }

.mainmenu li ul li {
    display: block;

  }

.mainmenu li ul li a
{
    color:#333;
    background:#fff;
    border-top:none;

}

.mainmenu li ul a:hover
{
    color:#fff;
    background:#000;
    border-top:none;
    text-decoration:none;
    width:auto;
    height:auto;
}

提前致谢！

Answer 1

给你的菜单项一个位置...

.mainmenu ul li
{
  ...
  position: relative;
}

这将允许您相对于父级定位嵌套 ul，而不是树中的下一个定位元素（看起来是 .wrapper）。

从嵌套的 ul 中删除 margin-left，因为它不需要...

.mainmenu li ul {
  position: absolute;
  top: 40px;
  left: 0;
  right: auto;
  display: none;
  margin-left: 100px;
  width: 200px;
}

CSS 子菜单未与父菜单对齐

CSS submenu not aligning to menu parent

css

menu