어떻게 보여지고 싶은건지 먼저 고민해보셔야 합니다.

보통..

PC에서는

회사소개, 하드웨어, 소프트웨어

이렇게 옆으로 표시가 되도록 만들죠.

(width 값 고정)

모바일에서는

회사소개
하드웨어
소프트웨어

이런식으로 아래로 떨어지게 만듭니다.

(width 값 100%)

태그는 아래처럼 구성이 가능합니다.

<ul class="main-menu">
    <li>
        회사소개
        <ul class="sub-menu">
            <li><a href="#">인사말</a></li>
            <li><a href="#">사업분야</a></li>
            <li><a href="#">연혁</a></li>
        </ul>
    </li>
    <li>
        하드웨어
        <ul class="sub-menu">
            <li><a href="#">제품</a></li>
            <li><a href="#">판매가</a></li>
            <li><a href="#">기타</a></li>
        </ul>
    </li>
    <li>
        소프트웨어
        <ul class="sub-menu">
            <li><a href="#">개발툴</a></li>
            <li><a href="#">안내</a></li>
            <li><a href="#">사이트맵</a></li>
        </ul>
    </li>
</ul>

PC 에서는 이렇게 하시고

.sub-menu { width: 200px; }

모바일에서는 이렇게 하시면 화면 꽉차게 보여질겁니다.

.sub-menu { width: 100%; }

설명과 예제를 간략하게 올려드렸는데 도움이 되었으면 합니다^^

워드프레스 테마는 구글에서 검색하시면 아주 많이 나오겁니다.

다양하게 설치해서 참고 해보세요.