0
私のレストランのウェブサイトメニューカタログを設定しようとしています.2番目の列にテキストを書き込む方法が固まっています。下の図を参照してください。これは2列のドロップダウンメニューです。 
HTML：実際に2番目の列にテキストを書き込むにはどうすればよいですか？
また、3つの列を使用しているときは、次のようになります。 
テキストは最初の列にあり、最初の画像と同じ書式になるように修正するにはどうすればよいですか？ここに私のコードは
body {
background: #db2811;
margin: 0 auto;
padding: 2em 2em 4em;
max-width: 65%;
box-shadow: 0 0 2px rgba(0, 0)
}
h1 {
text-align: center;
color: #fff200;
font-size: 50px;
}
.bold {
font-weight: 600;
}
.nav ul {
*zoom: 1;
list-style: none;
margin-top: 20%;
margin-left: -3%;
padding: 0;
}
.nav ul:before,
.nav ul:after {
content: "";
display: table;
}
.nav ul:after {
clear: both;
}
.nav ul > li {
float: left;
position: relative;
}
.nav a {
display: block;
padding: 10px 20px;
line-height: 1em;
color: #fff;
border-left: 1px solid #595959;
font-size: 16px
}
.nav a:hover {
text-decoration: none;
background: #595959;
}
.nav li ul {
background: #273754;
}
.nav li ul li {
-webkit-column-count: 3;
/* Chrome, Safari, Opera */
-moz-column-count: 3;
/* Firefox */
column-count: 3;
-webkit-column-rule: 1px solid lightblue;
/* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue;
/* Firefox */
column-rule: 1px solid lightblue;
width: 500px;
}
.nav li ul a {
border: none;
}
.nav li ul a:hover {
background: rgba(0, 0, 0, 0.2);
}
.nav li ul {
position: absolute;
left: 0;
top: 36px;
z-index: 1;
max-height: 0;
overflow: hidden;
-webkit-transform: perspective(400) rotate3d(1, 0, 0, -90deg);
-webkit-transform-origin: 50% 0;
-webkit-transition: 350ms;
-moz-transition: 350ms;
-o-transition: 350ms;
transition: 350ms;
}
.nav ul > li:hover ul {
max-height: 1000px;
-webkit-transform: perspective(400) rotate3d(0, 0, 0, 0);
}<h1>Menu</h1>
<nav class="nav">
<ul>
<li>
<a href="#">Drinks</a>
<ul>
<li><a>Pepsi</a></li>
<li><a>Diet Pepsi</a></li>
<li><a>Mountain Dew</a></li>
<li><a>Lemonade</a></li>
<li><a>Sierra Mist</a></li>
<li><a>Dr. Pepper</a></li>
<li>
<a></a>
</li>
</ul>
</li>
</ul>
</nav>
私は内側のulに3つの列を持たせたいと思っています。 –
ええと私はちょうどそれを試み、それは私にソリューションに近づくように思われる。ありがとうございました。 –