HTML: Как я могу написать текст во втором столбце?

Я пытаюсь создать каталог меню веб-сайта для своего ресторана, и я зациклился на том, как писать текст во второй колонке. См. Рисунок ниже. Это выпадающее меню с двумя столбцами. HTML: Как я могу написать текст во втором столбце?

Также, когда я использую три столбца, это выглядит так.

Как исправить это, чтобы текст был в первом столбце, и они имеют такое же форматирование, как и первое изображение? Вот мой код,

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>

источник

2016-10-23 Feng Guo

Я думаю, вы хотели, чтобы внутренняя ul имела три столбца, а не элементы списка в них. –

Хм, я просто попробовал это и, похоже, приближает меня к решению. Спасибо. –

пытается использовать inline-block дисплей для вас li элементов и сделать их ширину до 50%. то ulwidth до 100%

источник

2016-10-23 09:09:07 Araz

HTML: Как я могу написать текст во втором столбце?

ответ

Смежные вопросы