html 문법이 잘못 되었습니다.

<div class="irum">
    <ul class="menu">
        <li>시</li>
        <li class="box"><a href="#">구</a></li>
    </ul>
</div>

위와 같은 식으로 마크업 하셔야 합니다. ul > li > 내용 이 맞습니다. ul > 내용, li 는 잘못된 것입니다.

.box 에는 display:block 혹은 display:inline-block 을 적용해보세요.

ㅎㅎㅎㅎ 굿이네요

이걸

<div class="irum">
    <ul class="menu">
        <li>시</li>
        <li class="box"><a href="#">구</a></li>
    </ul>
</div>

이런식으로 바꾸시면 불필요한 li 하나가 없어지니까...  저 같으면 이렇게 더 간결하게 마크업을 할 것 같습니다.

<div class="irum">
    <ul class="menu">
        <li>시</li>
        <a class="box"href="#" >구</a>
    </ul>
</div>

지운아빠님이 틀렸다는 얘기가 아니고, 저같으면 이렇게 하겠다구요.

ul > a 는 문법 오류입니다. HackYa님이 예전에 하신 말처럼 한국의 디자이너들만 validation 을 신경쓰는 걸지 몰라도요. ;)

사실 제가 생각하는 더 좋은 코드는

<div class="irum">
    <hn>시</hn>
    <ul>
        <li><a href="#">구</a></li>
    </ul>
</div>

혹은

<div class="irum">
    <strong>시</strong>
    <ul>
        <li><a href="#">구</a></li>
    </ul>
</div>

정도라고 생각합니다.

CSS 잡기도 편하죠.

.irum strong {}
.irum ul {}
.irum li {}
.irum a {}

아... 오류인가요? ㅎㅎㅎㅎ

W3 validation 별로 신경을 안쓰는지라....

///////////////////////////////////

아... 그게 아니고 제가 잘못 적었네요.

li 로 a 를 감싸려고 한건데 잘못 적었습니다.

이렇게요.

<div class="irum">
    <ul>
        <li><a class ="box" href="#">구</a></li>
    </ul>
</div>


그러니까 li 에 적용된 class "box" 를 a 로 옮기고 li 하나를 없앤....

그리고 css 처음 하실때 이런 거 (block 과 inline-block 의 차이 같은것들)  많이 헷갈리시거든요.  참조 하시라구요.  그림으로 보면 아주 쉽게 이해되십니다.

저도 유용한정보 알게됐네여..감사드립니다~~

건전한 오고감으로 서로 배우고 좋죠...
적절한 책 한 권 구입하시고.. 웹에서도 자료를 모아서 정리하고 그러시다보면 어느새 머리 속에 박히게 됩니다.

익플에서 레이아웃이 깨지면 메타코드 최적화 넣어보세요~

와우~~ 진짜 여기 싸이트는 친절한분들이 많아요~^^