너비가 너비보다 긴 텍스트를 감쌀 때 줄 바꿈 할 하위 메뉴가 있습니다.

Question

안녕하세요 : 밑줄 WP 테마의 기본 구조를 기반으로하는 사이트를 만들고 있습니다. 긴 텍스트 줄이있는 하위 메뉴 항목이 있습니다. 줄이 너비를 초과하면 자동으로 줄 바꾸기를 원한다. (내가 원하는 효과는 youthconnectionwilmette.org의 "programs"에서 볼 수 있습니다.)

"Schedule Lessons"에있는 puckpros.edkatzman.com에서 지금 여기 있습니다. "신규 고객을 : 평가와 교훈 - 50 % Off"를 첫 번째 하위 메뉴 항목을 읽을하도록되어 있지만이 잘립니다 점점 ​​"신규 고객 : 평가와"

내 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를 보았다하지만, 자동 줄 바꿈이 일이 이루어지고 어디서 볼 수 없었다.)

Answer 1

목록 기반 메뉴를 만들기의 핵심 :

1 - 목록 표시 스타일을 지정하지 마십시오.

2 - display:block을 사용하고 모든 스타일링을 A 태그 (이 값은 호버 및 활성 상태 포함)에 넣으십시오.

당신은 모든 것을 높이고 있습니다. 두 줄을 원하면 높이가 자동으로 커야합니다.