Хотите, чтобы элемент подменю был обернут, когда текст длиннее ширины

Question

Привет: Я работаю над сайтом, основанным на базовой структуре подчеркивания темы WP. У меня есть элемент подменю с длинной строкой текста. Я хочу, чтобы текст автоматически обернулся, если линия превышает ширину ли. (Эффект, который я хочу, можно увидеть на youthconnectionwilmette.org в разделе «программы»)

Вот что у меня есть сейчас, на странице puckpros.edkatzman.com в разделе «Расписание занятий». Первый пункт подменю должен прочитать «новых клиентов: Оценка и Урок - 50% Off», но она становится усечен в «Новых Покупателей: Оценка и»

My WP генерируется HTML является:

<nav class="site-navigation main-navigation" role="navigation"> 
    <h1 class="assistive-text">Menu</h1> 
    <div class="assistive-text skip-link"> 
    <ul id="menu-puckpros" class="menu"> 
    <li id="menu-item-798" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-798"> 
    <li id="menu-item-866" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-866"> 
     <a href="https://server21.securedata-trans.com/ap/discoverymarketingt/index.php?page=10">Schedule Lessons</a> 
     <ul class="sub-menu"> 
     <li id="menu-item-924" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-924"> 
      <a href="https://server21.securedata-trans.com/ap/discoverymarketingt/index.php?page=10">New Customer: Evaluation & Lesson – 50% OFF</a> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</nav> 

И CSS-код я использую:

.main-navigation { 
list-style-type: none; 
margin: 0; 
padding: 0; 
height: 30px; 
background-color: #00497e; 
clear:both; 
width: 100%; 
} 

.main-navigation li { 
float: left; 
height: 30px; 
line-height: 30px; 
display: block; 
position:relative; 
} 


.main-navigation li a { 
display:block; 
color:#fde218; 
text-decoration:none; 
height: 30px; 
line-height: 30px; 
padding: 0 70px; 
} 
.main-navigation a:hover { 
color: #004973; 
background-color: #fde218; 
} 

.main-navigation ul ul li { 
float: left; 
width: 150px; 
background-color:maroon; 
top: 5px; 
position:relative; 
display:block; 
} 

.main-navigation ul ul li a { 
background-color:#00497e; 
color: #ffffff; 
width: 200px; 
display:block; 
} 

Я пробовал разные значения для отображения :, но не нашли ничего, что делает никакой разницы, за исключением дисплея: таблицы-клетки; который обертывает второй выбор подменю, но разбивает верхнюю часть и помещает ее часть под третьим пунктом меню.

Должно быть, мне не хватает чего-то простого, но после нескольких часов поиска и поиска любых предложений, которые я нашел, ничего не работает. (Я посмотрел на CSS сайта, который работает в Firebug, но я не мог видеть, где обертка линия делается случиться.)

Answer 1

Ключ к созданию списка на основе меню:

1 - НЕ СТИЛЯЙТЕ СПИСОК (кроме отображения, положения и поплавка и полей и отступов)

2 - Используйте display:block и положите ВСЕ СТИЛИНГ на тег A (это включает в себя ваши зависания и активные состояния).

Вы ставите высоту на все. Если вам нужны две линии, вам нужно, чтобы высота увеличивалась автоматически.