左上角第二行的 CSS 下拉菜单

Question

我在页面底部有菜单位置。 我需要有三级菜单，当每个级别都在行中并位于左侧时。

我的 CSS 代码:

.primary-navigation {
    clear: both;
    float: left;
    display: block;
    position: relative;
    width: 100%;
    top: 80px;
    border: 2px solid red;
}
.primary-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}
.primary-navigation ul > li,
.primary-navigation ul > li > ul > li,
 {
  position: relative;
  float: left;
  padding: 3px 5px;
  margin: 10px 5px;
  cursor: pointer;
}
.primary-navigation ul ul ul li {
  float: none;
}
.primary-navigation li > ul {
  display: none;
  position:absolute;
  bottom: 100%;
  left: -50%;
  border: 2px solid red;
}
.primary-navigation li:hover > ul {
  position: absolute;
  display: block;
  width: 600px;

}

.primary-navigation li {
    float: left;
    position: relative;
    font-size: 20px;
}
.primary-navigation li ul li {
    float: left;
    position: relative;
    font-size: 15px;
}
.primary-navigation a {
    color: #FFF;
    display: block;
    line-height: 16px;
    padding: 9px 15px;
    text-decoration: none;
}

<nav class="primary-navigation">
<ul>
  <li>Ahoj</li>
  <li>Test A
    <ul>
      <li>Test 1</li>
      <li>Test 2
        <ul>
      <li>Test A</li>
      <li>Test B</li>
      <li>Test C</li>
    </ul></li>
      <li>Test 3</li>
    </ul></li>
  <li>Test B
    <ul>
      <li>Test 4</li>
      <li>Test 5</li>
      <li>Test 6</li>
    </ul></li>
  </ul>
</nav>

我知道，li > ul 部分有问题，什么时候

  position:absolute;
  bottom: 100%;
  left: -50%;

我知道，“左”给我一个水平位置。

问题是，如何将第二行移到左边并使其全长变宽

Answer 1

给你，你必须删除 position: relative出你的 child <li>元素，因为这就是这些元素的子元素与其父元素(<li> 而不是 <nav> 本身)绝对对齐的原因。此外，您必须对边框做一些小技巧，因为它会影响绝对定位.所以在这里我使用box-shadow在元素的左侧实现相同的无边框效果。 border-bottom不需要，因为无论如何您都会堆叠元素。

边框“技巧”的 CSS

border-right: 2px solid red;
border-top: 2px solid red;
box-shadow: inset 2px 0 0 red //imitates a border-left

片段

html * {
  box-sizing: border-box;  
}
.primary-navigation {
    clear: both;
    float: left;
    display: block;
    position: relative;
    width: 100%;
    top: 80px;
    border: 0;
    box-shadow: inset 0 0 0 2px red;
}
.primary-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}
.primary-navigation ul > li,
.primary-navigation ul > li > ul > li,
 {
  float: left;
  padding: 3px 5px;
  margin: 10px 5px;
  cursor: pointer;
}
.primary-navigation ul ul ul li {
  float: none;
}
.primary-navigation li > ul {
  display: none;
  position:absolute;
  bottom: 100%;
  left: 0;
  border-right: 2px solid red;
  border-top: 2px solid red;
  box-shadow: inset 2px 0 0 red
}
.primary-navigation li:hover > ul {
  position: absolute;
  display: block;
  width: 600px;

}

.primary-navigation li {
    float: left;
    font-size: 20px;
}
.primary-navigation li ul li {
    float: left;
    font-size: 15px;
}
.primary-navigation a {
    color: #FFF;
    display: block;
    line-height: 16px;
    padding: 9px 15px;
    text-decoration: none;
}

<nav class="primary-navigation">
<ul>
  <li>Ahoj</li>
  <li>Test A
    <ul>
      <li>Test 1</li>
      <li>Test 2
        <ul>
      <li>Test A</li>
      <li>Test B</li>
      <li>Test C</li>
    </ul></li>
      <li>Test 3</li>
    </ul></li>
  <li>Test B
    <ul>
      <li>Test 4</li>
      <li>Test 5</li>
      <li>Test 6</li>
    </ul></li>
  </ul>
</nav>