전체 텍스트와 텍스트가 표시되지 않는 드롭 다운 메뉴

Question

현재 내 하위 제목 추가, 제목 삭제, 제목 삭제, 하위 메뉴의 수동 크롤링은 #menu li li의 텍스트 정렬 중심으로 지정되어 있더라도 중앙 집중식으로 표시되지 않습니다. 에이. 하위 메뉴의 임원 요약도 잘립니다. 하위 메뉴를 확장하고 모든 텍스트를 중앙화하려면 어떻게해야합니까? 감사합니다. (나는 jsfiddle ACCT을 가지고 대기자 명단에 없기 때문에 난 정말 죄송) 여기

내 코드입니다 :

HTML

<div id="menu"> 
<ul> 
    <li><a href="#" >Home</a></li> 
    <li><a href="#" >Executive Summary</a></li> 
    <li><a href="#" > Visual Analytics</a></li> 
    <li><a href="#" >Settings</a> 
     <ul>           
      <li><a href="#">Add Subject</a></li> 
      <li><a href="#">Delete Subject</a></li> 
      <li><a href="#"> Edit Subject</a></li> 
      <li><a href="#" >Manual Crawl</a></li> 
      <li><a href="#" >Executive Summary</a></li> 
     </ul> 
    </li> 
</ul> 

CSS

#menu { 
    position: relative; 
    float: left; 
    width: 1200px; 
    height: 35px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 13px; 
    padding: 0; 
    background: #000; 
    text-align: center; 
} 

#menu ul { 
    position: relative; 
    list-style: none; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
} 

#menu li { 
    position: relative; 
    float: left; 
    height: 100%; 
    padding: 0; 
    line-height: 35px; 
} 

#menu a { 
    position: relative; 
    height: 100%; 
    width: auto; 
    float: left; 
    text-decoration: none; 
    padding: 0 0 0 25px; 
    margin: 0 3px; 
    color: #fff; 
    text-align: center; 
} 

#menu ul ul { 
    display: none; 
    width: 10em; /* Width to help Opera out */ 
    background-color: rgba(0,0,0,0.5); 
} 

#menu li:hover ul { 
    display:block; 
    position: absolute; 
    top: 35px; 
    left: 0; 
    margin: 0; 
    padding: 0; 
    z-index: 1; 
} 

#menu li li a{ 
    height: 35px; 
    width: 100%; 
    float: left; 
    text-decoration: none; 
    padding: 0 0 0 25px; 
    margin: 0 3px; 
    color: #fff; 
    text-align: center; 
} 

#menu li li a:hover{ 
    background: rgba(255,255,255,0.5); 
} 

Answer 1

#menu { 
    position: relative; 
    float: left; 
    width: 1200px; 
    height: 35px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 13px; 
    padding: 0; 
    background: #000; 
    text-align: center; 
} 

#menu ul { 
    position: relative; 
    list-style: none; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
} 

#menu li { 
    position: relative; 
    float: left; 
    height: 100%; 
    padding: 0; 
    line-height: 35px; 
} 

#menu a { 
    position: relative; 
    height: 100%; 
    width: auto; 
    float: left; 
    text-decoration: none; 
    padding: 0px 10px 0px 10px; 
    margin: 0 3px; 
    color: #fff; 
    text-align: center; 
} 

#menu ul ul { 
    display: none; 
    width: 11em; /* Width to help Opera out */ 
    background-color: rgba(0,0,0,0.5); 
} 

#menu li:hover ul { 
    display:block; 
    position: absolute; 
    top: 35px; 
    left: 0; 
    margin: 0; 
    padding: 0; 
    z-index: 1; 
} 

#menu li li a{ 
    height: 35px; 
    width: 100%; 
    float: left; 
    text-decoration: none; 
    padding: 0px 10px 0px 10px; 
    margin: 0 0px; 
    color: #fff; 
    text-align: center; 
} 

#menu li li a:hover{ 
    background: rgba(255,255,255,0.5); 
} 

Answer 2

스타일 추가

#menu li li a{ 
    height: 35px; 
    width: 100%; 
    float: left; 
    text-decoration: none; 
    padding: 0 13px; 
    margin: 0 3px; 
    display: block; 
    color: #fff; 
    text-align: center; 
} 

귀하의 <a>은 왼쪽 패딩 만 있지만 오른쪽 하단 왼쪽 모두이거나 패딩을 제거 할 수 있어야합니다.