드롭 다운 메뉴의 너비를 동적으로 변경하십시오.

Question

My website은 페이지에서 수행 할 수있는 작업에 대한 드롭 다운 메뉴를 사용합니다.

HTML :

<table class="navbar"> 
    <td class="menuNormal geometry" width="135px" onmouseover="menu('exp',this);" onmouseout="menu('col',this);"> 
     <p class="tdesc"> 
      <span lang="hu">Geometria</span> 
      <span lang="en">Geometry</span> 
     </p> 
     <div class="menuNormal dropdown" width="inherit"> 
      <table class="menu" width="inherit"> 
       <tr><td class="menuNormal"> 
        <a href="javascript:geodesc('squa')" class="menuitem"> 
         <span lang="hu">Négyzet</span> 
         <span lang="en">Square</span> 
        </a> 
       </td></tr> 
       ... 
      </table> 
     </div> 
    </td> 
</table> 

CSS :

table { 
padding:0; 
margin:0; 
} 

table.navbar { 
background-color: ButtonFace; 
font: menu; 
} 

p.tdesc { 
margin: 0; 
padding: 0 3px 0 3px; 
text-align:center; 
font: menu; 
} 

table.menu{ 
font-size: 8pt; 
margin: 0px; 
padding: 0px; 
} 

td.menuNormal{ 
padding: 0px; 
color: ButtonText; 
vertical-align: top; 
} 

td.menuHover{ 
padding: 0px; 
color: HighlightText; 
vertical-align: top; 
background-color: Highlight; 
} 

div.menuNormal{ 
display: none; 
position: static; 
} 

div.menuHover{ 
border: 1.5px solid ButtonShadow; 
background-color: Menu; 
display: inline; 
position: absolute; 
} 

a.menuitem:link{ 
text-decoration: none; 
color: ButtonText; 
padding: 2.5px; 
border-bottom: 1px solid GrayText; 
display: block; 
} 

a.menuitem:hover{ 
text-decoration: none; 
color: HighlightText; 
padding: 2.5px; 
background-color: Highlight; 
border-bottom: 1px solid GrayText; 
display: block; 
} 

.hover { 
border:3px ridge #8CA3FF; 
background-color: #C9D4FF; 
font-style:normal; 
} 

현재이 솔루션은 완벽한 하나가 메뉴의 폭이 고정되어 있기 때문에, 아니다, 내가 만들려고 할 때 조금처럼 더 많은 드롭 다운 틱, 실제 옵션을 표시 할 때 맨 위 레이블의 너비를 확장합니다.

옵션을 실제 드롭 다운처럼 보이게하고 레이블 폭을 포함하는 텍스트에 맞출 수있는 방법이 필요합니다.

Answer 1

만약 당신이 함께하고 당신이 그것을 완벽하게 제어 할 수 있고 목표는 멋진 웹 사이트를 만드는 것입니다 (CSS에 대한 이해를 보여주는 것이 아닙니다) 그리고 이 아닌과 같은 제한이 없습니다. 기존 라이브러리라면 Twitter Bootstrap을 시도하고 유체 컨테이너와 탐색을 기본으로 사용하고 필요할 경우 특정 디자인 변경 사항에 대한 CSS를 맨 위에 추가하는 것이 좋습니다.