CSS Menus에서는 Single Level, Dropdown, Dropline, Flyout 네 가지 형태의 메뉴 예제를 제공하고 있는데, 일반적인 형태의 Single Level을 제외한 나머지 예제들에서 IE 6과 7을 지원하기 위한 Conditional Comments가 마크업에 포함된 것을 볼 수 있으며, 상대적으로 CSS에서는 특별히 Hacks을 사용하지 않고 있는것 같습니다.(Conditional Comments 도 Hacks로 보자면 Hacks일 수 있겠지만...)
다음은 네 가지 예제중 Dropdown 예제의 마크업중 일부:
<li><a class="fly" href="#url">Dropdown one<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown 1.1</a></li>
<li><a href="#url">Dropdown 1.2</a></li>
<li><a href="#url">Dropdown 1.3</a></li>
<li><a href="#url">Dropdown 1.4</a></li>
<li><a href="#url">Dropdown 1.5</a></li>
<li><a href="#url">Dropdown 1.6</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown 1.1</a></li>
<li><a href="#url">Dropdown 1.2</a></li>
<li><a href="#url">Dropdown 1.3</a></li>
<li><a href="#url">Dropdown 1.4</a></li>
<li><a href="#url">Dropdown 1.5</a></li>
<li><a href="#url">Dropdown 1.6</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
Internet Explorer 6,7을 위해서 Conditional Comments가 사용된 것을 볼 수 있습니다. 특히 IE 6을 위햇 2차 메뉴(하위 메뉴)에 대한 <UL>요소를 <TABLE>요소로 감싸서 레이아웃 문제를 해결하고 있음을 볼 수 있습니다.
Dropdown 이나 Flyout 형태의 메뉴 네비게이션을 제작하기 위해서 간혹 CSS 내부에 Hacks을 사용하는 경우가 발생하는데 호환성 문제를 야기시킬 수 있는 CSS Hacks을 사용하기보다는 위와 같이 Conditional Comments을 이용해서 요소를 추가하는 방법도 하나의 방법이 될 수 있을것 같습니다.
