이건 xe에만 국한되는게 아니라 그냥 코딩에 관한 일반적인 사항 입니다.

<ul>

     <li>일차메뉴1

           <ul>

               <li>이차메뉴1<li>

               <li>이차메뉴2</li>

          </ul>

     </li>

     <li>일차메뉴2</li>

</ul>

html문서의 이 부분을

li {float: left}

li li {float: none}

과 같은 css를 적용하면

일차메뉴는 가로로 나열되고 그에따른 2차메뉴들은 1차메뉴 하단에 세로로 나열됩니다.

이렇게 만든 메뉴를

ul{display: none}으로 감추어 두었다가 자바스크립트, jQuery등을 통해 버튼을 누르면 나타나게 하는 식으로 만들어 주는 겁니다.

대략의 개념은 이렇구요, 코딩을 못하시면 단기간에 처리하시기는 힘들거 같습니다.