html - 尝试制作一个包含多列的子菜单

Question

因此，我正在尝试创建一个 css 菜单，子项旁边将有一列，而不是在一个下拉列中显示所有子项。好吧，我正在尝试编辑一些预制模板。这是我能找到的所有带有“菜单”的东西。请帮助我

#menu-wrapper{background: #505050;

width: 100%;
padding: 0 0 0;
margin: 0 auto;
min-height: 50px;    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 15px;}
.menu,.menu ul,.menu li,.menu a{border:none;outline:none;margin:0 auto;padding:0;z-index:999}

li.active {
background: #f86a38;
color: #fff;
padding: 29px;
}

.menu li.active > a {

color: #fff;

}


.menu li:hover {
background: #f86a38;
}

.menu li:hover > a {
color:#fff;
text-decoration: none;
}



.featuredPost p {
    font-size: 15px;
    line-height: 25px;
}
.menu li:last-child{border-right:none}


.menu li{      padding: 0 2px 0 0;
    margin: 0;
    float: left;
    position: relative;
    padding: 0 30px;
    text-align: center;
    height: 50px;
    background: url(https://1.bp.blogspot.com/-iChwtMwQaic/V7mPzfx-fEI/AAAAAAAAI70/2GTeDPxecJo_6vS6AZ02awbd5hCfuWznQCLcB/s1600/nav-border.gif) right top no-repeat;}
.menu li a{   font-weight: normal;
    font-size: 16px;
    font-family: 'Pontano Sans', sans-serif;
    height: 50px;
    line-height: 50px;
    color: white;
    position: relative;
    width: 108px;
    text-align: center;
    padding: 0;
    text-transform: uppercase;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.27);}
.menu li:first-child a{background-image: none;}
.menu li:hover > a{color:#fff}
.menu ul{position: absolute;
top: 100px;
left: 0;
opacity: 0;
background:#37393E;
width: 229px;
border: none;

padding: 0px 0 40px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}

.menu ul li:hover {
    background: none;
}
.menu li:hover > ul{opacity:1}
.menu ul li{height:0;overflow:hidden;-webkit-transition:height .25s ease .1s;-moz-transition:height .25s ease .1s;-o-transition:height .25s ease .1s;-ms-transition:height .25s ease .1s;transition:height .25s ease .1s;padding:0}
.menu li:hover > ul li{height:36px;overflow:visible;padding:0}
.menu ul li a{    color: #fff;
    font-weight: 400;
    width: 184px;
    margin: 0;
    padding: 6px 0 6px 32px;}

.menu ul li {
    border-right: 0;


}
.menu ul li:first-child a{padding:6px 14px  6px 30px}
.menu ul li:last-child a{border:none}
.menu ul li a{border:none}

<div id='menu-wrapper'>
<ul class='menu' id='menu-main' itemscope='' itemtype='http://schema.org/SiteNavigationElement'>
<li class='active'><a href='/'>Home</a></li>
<li><a href='#'>Category</a>
<ul>
<li><a class='trigger' href='#'>Pretty Girl</a></li>
<li><a class='trigger' href='#'>Sub Menu 2</a></li>
<li><a class='trigger' href='#'>Sub Menu 3</a></li>
<li><a class='trigger' href='#'>Sub Menu 4</a></li>
<li><a class='trigger' href='#'>Sub Menu 5</a></li>
<li><a class='trigger' href='#'>Sub Menu 6</a></li>
<li><a class='trigger' href='#'>Sub Menu 7</a></li>
<li><a class='trigger' href='#'>Sub Menu 8</a></li>
<li><a class='trigger' href='#'>Sub Menu 9</a></li>
<li><a class='trigger' href='#'>Sub Menu 10</a></li>
<li><a class='trigger' href='#'>Sub Menu 11</a></li>
<li><a class='trigger' href='#'>Sub Menu 12</a></li>
<li><a class='trigger' href='#'>Sub Menu 13</a></li>
<li><a class='trigger' href='#'>Sub Menu 14</a></li>
<li><a class='trigger' href='#'>Sub Menu 15</a></li>
</ul></li>

Answer 1

是这样的吗？

我第一次添加:list-style-type: none;

第二次我使用 width: 80vw; 作为子菜单宽度。

第三次移除 top: 100px; 所以子菜单就在主菜单下面

#menu-wrapper {
  background: #505050;
  width: 100%;
  padding: 0 0 0;
  margin: 0 auto;
  min-height: 50px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 15px;
}

.menu,
.menu ul,
.menu li,
.menu a {
  border: none;
  outline: none;
  margin: 0 auto;
  padding: 0;
  z-index: 999;
  list-style-type: none;
}

li.active {
  background: #f86a38;
  color: #fff;
  padding: 29px;
}

.menu li.active>a {
  color: #fff;
}

.menu li:hover {
  background: #f86a38;
}

.menu li:hover>a {
  color: #fff;
  text-decoration: none;
}

.featuredPost p {
  font-size: 15px;
  line-height: 25px;
}

.menu li:last-child {
  border-right: none
}

.menu li {
  padding: 0 2px 0 0;
  margin: 0;
  float: left;
  position: relative;
  padding: 0 30px;
  text-align: center;
  height: 50px;
  background: url(https://1.bp.blogspot.com/-iChwtMwQaic/V7mPzfx-fEI/AAAAAAAAI70/2GTeDPxecJo_6vS6AZ02awbd5hCfuWznQCLcB/s1600/nav-border.gif) right top no-repeat;
}

.menu li a {
  font-weight: normal;
  font-size: 16px;
  font-family: 'Pontano Sans', sans-serif;
  height: 50px;
  line-height: 50px;
  color: white;
  position: relative;
  width: 108px;
  text-align: center;
  padding: 0;
  text-transform: uppercase;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.27);
}

.menu li:first-child a {
  background-image: none;
}

.menu li:hover>a {
  color: #fff
}

.menu ul {
  position: absolute;
  left: 0;
  opacity: 0;
  background: #37393E;
  width: 80vw;
  border: none;
  padding: 0px 0 40px;
  -webkit-transition: opacity .25s ease .1s;
  -moz-transition: opacity .25s ease .1s;
  -o-transition: opacity .25s ease .1s;
  -ms-transition: opacity .25s ease .1s;
  transition: opacity .25s ease .1s;
}

.menu ul li:hover {
  background: none;
}

.menu li:hover>ul {
  opacity: 1
}

.menu ul li {
  height: 0;
  overflow: hidden;
  -webkit-transition: height .25s ease .1s;
  -moz-transition: height .25s ease .1s;
  -o-transition: height .25s ease .1s;
  -ms-transition: height .25s ease .1s;
  transition: height .25s ease .1s;
  padding: 0;
}

.menu li:hover>ul li {
  height: 36px;
  overflow: visible;
  padding: 0
}

.menu ul li a {
  color: #fff;
  font-weight: 400;
  width: 184px;
  margin: 0;
  padding: 6px 0 6px 32px;
}

.menu ul li {
  border-right: 0;
}

.menu ul li:first-child a {
  padding: 6px 14px 6px 30px
}

.menu ul li:last-child a {
  border: none
}

.menu ul li a {
  border: none
}

<div id='menu-wrapper'>
  <ul class='menu' id='menu-main' itemscope='' itemtype='http://schema.org/SiteNavigationElement'>
    <li class='active'><a href='/'>Home</a></li>
    <li><a href='#'>Category</a>
      <ul>
        <li><a class='trigger' href='#'>Pretty Girl</a></li>
        <li><a class='trigger' href='#'>Sub Menu 2</a></li>
        <li><a class='trigger' href='#'>Sub Menu 3</a></li>
        <li><a class='trigger' href='#'>Sub Menu 4</a></li>
        <li><a class='trigger' href='#'>Sub Menu 5</a></li>
        <li><a class='trigger' href='#'>Sub Menu 6</a></li>
        <li><a class='trigger' href='#'>Sub Menu 7</a></li>
        <li><a class='trigger' href='#'>Sub Menu 8</a></li>
        <li><a class='trigger' href='#'>Sub Menu 9</a></li>
        <li><a class='trigger' href='#'>Sub Menu 10</a></li>
        <li><a class='trigger' href='#'>Sub Menu 11</a></li>
        <li><a class='trigger' href='#'>Sub Menu 12</a></li>
        <li><a class='trigger' href='#'>Sub Menu 13</a></li>
        <li><a class='trigger' href='#'>Sub Menu 14</a></li>
        <li><a class='trigger' href='#'>Sub Menu 15</a></li>
      </ul>
    </li>