Question

我有一个两级CSS菜单。两个级别都应水平显示。

我已经设置了这个，但是我可以解决一些问题。

1）我可以停止＆＃34;项目＆＃34;获得与以下元素相同宽度的链接？（＆＃34; Live＆＃34;＆＃34;工作＆＃34;合并）

2）我可以左对齐＆＃34;直播＆＃34;和＆＃34;工作＆＃34;以下＆＃34;项目＆＃34;没有弄乱上面的结构？

这是我想要达到的最终结果：

3）这是否可以使用内联块元素而不是浮点数？我应该使用那些吗？知道菜单应该绝对位于页面的右上角。

.menu-block--main      { position: absolute; top: 5%; right: 5%;

  // level 1
  ul                   { list-style-type: none; margin: 0; padding: 0;
    li                 { float: left; background-color: green; }
    li a               { display: block; color: #000; text-align: center; 
      padding: 14px 16px; text-decoration: none; text-transform: uppercase; }
    li a:hover         { background-color: red; }
  }

  // level 2
  ul li ul             { 
    li                 { float: left; }
  }

}

<nav class="menu-block--main">
  <ul class="main-menu">
    <li class="menu-item"><a>Projects</a>
      <ul>
        <li class="menu-item"><a>Live</a></li>
        <li class="menu-item"><a>Work</a></li>
      </ul>
    </li>
    <li class="menu-item"><a>Activities</a></li>
    <li class="menu-item"><a>Team</a></li>
    <li class="menu-item"><a>Blog</a></li>
    <li class="menu-item"><a>Contact</a></li>
  </ul>
</nav>

Answer 1

我建议将子菜单设置为绝对，因此主菜单项不会改变它的大小。你也可以删除float：left，使用display：inline-block，vertical-align：top和text-align：left。您还应该将背景设置为整个菜单和子菜单。

 .menu-block--main {
     background: #008000;
 }

.menu-block--main ul{
    text-align: left;
}

.menu-block--main ul li{
    display: inline-block;
    vertical-align:top;
}

.menu-block--main ul ul {
    position: absolute;
    width: 100%;
    background: #008000;
    top:100%;
    left:0;
}

希望我帮忙;）

Answer 2

也许你的意思是制作子菜单，我想是这样的：

.menu-block--main{
    ul.main-menu{
      background: #444;
      text-align: center;
      padding: 0;
      margin: 0;
      list-style: none;

      li{
        font-family: 'Oswald', sans-serif;
        font-size: 1.2em;
        line-height: 40px;
        text-align: left;

        a{
          text-decoration: none;
          color: #fff;
          display: block;
          padding-left: 15px;
          border-bottom: 1px solid #888;
          transition: .3s background-color;
          &:hover{
            background-color: #005f5f;
          }
          &:active{
            background-color: #aaa;
            color: #444;
            cursor: default;
          }
        }
      }
      li{
        font-size: .8em;
      }
    }
}

...希望可以帮到你

CSS菜单 - 停止更改父宽度的子项

2 个答案: