Question

我一直在努力让子菜单与正确的菜单父项对齐，但无法弄清楚问题。

关于我们和艺术家的bios都有子菜单。关于我们我的风格几乎是我想要的，但它并没有延续到其他菜单项目，它们都出现在我们身上。

这是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

Give your menu items a position...

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

This will allow you to position your nested ul relative to the parent rather that the next positioned element up the tree (which looks to be .wrapper).

Remove the margin-left from the nested ul as it is not needed...

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

CSS子菜单未与菜单父

1 个答案: