如何制作比其母li更宽的中心子菜单？

Question

我正在努力尝试在html / css中重新创建这个子菜单。子菜单更大 更宽，而父<li>似乎是主要问题。我需要子菜单大于父<li>并且以它为中心。这就是我想要重新创建的内容：

当前进展的屏幕截图：

因此，您可以在我的版本中看到子菜单<ul>的宽度仅与父<li>一样大。我需要子菜单大于父<li>并以其为中心。

＆＃13;

＆＃13;

.navbar {
    width: 100%;    
    height:80px;    
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    color: #111111;
    background-color: #F9F9F9;
    margin: 0;
    padding: 0;
    position: relative;
}

.logo {
    font-size: 1.8em;
    float: left;
    line-height:80px;
    width: 35%;
    margin: 0;
    padding: 0;
}

.nav {
    float: right;
    line-height:80px;
    width: 65%;
    margin: 0;
    padding: 0;
    font-size:0.8em;
    text-align: right;
    position: relative;
}

.nav li {
    display: inline-block;
    width: 75px;
    text-align: center;
}

.nav li a {
    position: relative;
}

.nav li ul {
    position: absolute;
    width: inherit;
    text-align: center;
    margin: -20px auto 0;
  }

.nav > li > ul {
    display: block;
    border: 1px solid #111111;
    padding: 0;
    text-align: center;
}

.nav li ul li {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.flLeft {
    float: left;
}

.flRight {
    float: right;
}

.white {
    color: #ffffff;
}

.darkOrange {
    color: #BF3600;
}

.black {
    color: #111111;
}

.orange {
    color: #FF6200;
}

a:link, a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.nav li a:link, .nav li a:visited {
    color: #111111;
}

.nav li a:hover {
    text-decoration: none;
    border-bottom: 4px solid #FF6200;
    font-weight: bold;
}

＆＃13;

<div class="navbar">
    <div class="container">     
        <div class="logo">
            <span class="black">YOUR</span><span class="orange">LOGO</span>
        </div>
        <ul class="nav">
            <li>
                <a href="#">TITLE 1</a>
            </li>
            <li>
                <a href="#">TITLE 2</a>
                <ul>
                    <li>SUBMENU 1</li>
                    <li>SUBMENU 2</li>
                    <li>SUBMENU 3</li>
                </ul>
            </li>
            <li>
                <a href="#">TITLE 3</a>
            </li>
            <li>
                <a href="#">TITLE 4</a>
            </li>
            <li>
                <a href="#">TITLE 5</a>
            </li>
            <li>
                <a href="#">TITLE 6</a>
            </li>
            <li>
                <a href="#">TITLE 7</a>
            </li>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我创造了一个小提琴：https://jsfiddle.net/gsmzhptu/embedded/result/

更新了宽子菜单，但不在主菜单项下方居中：https://jsfiddle.net/gsmzhptu/1/embedded/result/

Answer 1

我增加了线高。你想要这样的东西吗？

.nav li ul li {
  line-height: 2;
}

检查此JSFiddle：https://jsfiddle.net/gsmzhptu/11/

Answer 2

定位解决方案

  

margin: -20px;和padding: adjustable 20px;

     

margin-left right和padding- left right应该完全且相反。

.nav > li > ul{
    margin:-20px;
    padding: 20px;
}

.nav li ul li {
{
    margin:10px 0;
}

＆＃13;

＆＃13;

  .navbar {
  width: 100%;
  height: 80px;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  color: #111111;
  background-color: #F9F9F9;
  margin: 0;
  padding: 0;
  position: relative;
}

.logo {
  font-size: 1.8em;
  float: left;
  line-height: 80px;
  width: 35%;
  margin: 0;
  padding: 0;
}

.nav {
  float: right;
  line-height: 80px;
  width: 65%;
  margin: 0;
  padding: 0;
  font-size: 0.8em;
  text-align: right;
  position: relative;
}

.nav li {
  display: inline-block;
  width: 75px;
  text-align: center;
}

.nav li a {
  position: relative;
}

.nav li ul {
  position: absolute;
  width: inherit;
  text-align: center;
}

.nav>li>ul {
  display: block;
  border: 1px solid #111111;
  padding: 0;
  text-align: center;
  margin: -20px;
  padding: 20px;
}

.nav li ul li {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1;
  margin: 10px 0px;
}

.flLeft {
  float: left;
}

.flRight {
  float: right;
}

.white {
  color: #ffffff;
}

.darkOrange {
  color: #BF3600;
}

.black {
  color: #111111;
}

.orange {
  color: #FF6200;
}

a:link,
a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.nav li a:link,
.nav li a:visited {
  color: #111111;
}

.nav li a:hover {
  text-decoration: none;
  border-bottom: 4px solid #FF6200;
  font-weight: bold;

＆＃13;

<div class="navbar">
  <div class="container">
    <div class="logo">
      <span class="black">YOUR</span><span class="orange">LOGO</span>
    </div>
    <ul class="nav">
      <li>
        <a href="#">TITLE 1</a>
      </li>
      <li>
        <a href="#">TITLE 2</a>
        <ul>
          <li>SUBMENU 1</li>
          <li>SUBMENU 2</li>
          <li>SUBMENU 3</li>
        </ul>
      </li>
      <li>
        <a href="#">TITLE 3</a>
      </li>
      <li>
        <a href="#">TITLE 4</a>
      </li>
      <li>
        <a href="#">TITLE 5</a>
      </li>
      <li>
        <a href="#">TITLE 6</a>
      </li>
      <li>
        <a href="#">TITLE 7</a>
      </li>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;