중첩 UL로 사이트맵 표현 방법??

[d2icid2]

ul테그로 카테고리를 표현 하고 싶은데 쉽지 않아 도움을 구합니다.

<code>
여성상의/자켓 블라우스/셔츠 | 티셔츠 (라운드,브이넥,카라) | 원피스 | 정장
자켓/점퍼 | 니트 | 스웨터 | 코트 | 가디건

여성하의 스커트(A라인,H라인,플래어...) | 바지(일자,카고,나팔,정장)...


</code>

이렇게 표현 하고 싶은데 밤을 꼬박 새도 답이 안나오네요.
사이즈는 유동적이고 여성상의/자켓,여성하의만 같은 폭을 가지게 되면 됩니다.괄호나 콤마 바등은 없어도 무관합니다.
혹시 이런 레이아웃으로 구현하신분 있으시면 조언 부탁드립니다.
<code>


<ul id="category">
<li><h2><a href="#">여성상의/자켓</a></h2>
<ul>
<li><a href="#">블라우스/셔츠</a></li>
<li><a href="#">티셔츠</a>
<ul>
<li><a href="#">라운드</a></li>
<li><a href="#">브이넥</a></li>
<li><a href="#">카라</a></li>
</ul>
</li>
<li><a href="#">원피스</a></li>
<li><a href="#">정장</a></li>
<li><a href="#">자켓/점퍼</a></li>
<li><a href="#">니트</a></li>
<li><a href="#">스웨터</a></li>
<li><a href="#">코트</a></li>
<li><a href="#">가디건</a></li>
</ul>
</li>
<li><h2><a href="#">여성하의</a></h2>
<ul>
<li><a href="#">스커트</a>
<ul>
<li><a href="#">A라인</a></li>
<li><a href="#">H라인</a></li>
<li><a href="#">플레어</a></li>
<li><a href="#">미니</a></li>
<li><a href="#">청/데님</a></li>
<li><a href="#">롱스커트</a></li>
</ul>
</li>
<li><a href="#">바지</a>
<ul>
<li><a href="#">일자</a></li>
<li><a href="#">카고</a></li>
<li><a href="#">나팔</a></li>
<li><a href="#">정장</a></li>
</ul>
</li>
<li><a href="#">반바지</a></li>
</ul>
</li>
</ul>
</code>

[oragi]

http://css.macple.com/forum/showthread.php?t=455

http://css.macple.com/forum/showthread.php?t=471

http://www.xs4all.nl/~peterned/examples/cssmenu.html

[hyeonseok]

Code: Select all

<style type="text/css">
h2 {
	margin: 0;
	display: inline;
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#category li {
	display: block;
}
#category li ul, 
#category li li {
	display: inline;
}
</style>

혹시 이게 원하시는 건가요?

[d2icid2]

혹시 이게 원하시는 건가요?

비슷한 레이아웃인데.....

http://www.timemail.co.kr/goods/maincategory.asp

정확히는 위 유알엘에서 보는 것 같은 레이아웃입니다.
일단 폭이 가변인것(좁아 졌을때 여성상의/자켓 밑으로 하위 분류가 감싸지 않을것)과 최 상위분류는 분류명에 상관없이 같은 폭을가질것(%든 px이든..)

위 두가지를 ul로 동시에 지키기기에는 내공이 한참 부족해 몇시간전에 dl태그와 em등으로 표현은 해냈습니다만... 이게 의미를 살린 마크업이라 할 수 있는건지...

될듯될듯 하면서 쉽지 않네요.
한번 더 부탁드립니다.

[oragi]

Code: Select all

  #category { border: 1px solid rgb(0, 0, 0);
    margin: 0pt;
    padding: 0pt;
    overflow: auto;
    }

  #category li, #category li ul { margin: 0pt;
    padding: 0pt;
    display: inline;
    }

  #category li li li { color: rgb(255, 204, 255);
    }

  #category h2 { margin: 0pt;
    padding: 0pt;
    font-size: 1em;
    width: 150px;
    float: left;
    clear: left;
    }

  #category ul { margin: 0pt;
    padding: 0pt;
    float: left;
    clear: none;
    }

  #category ul ul { float: none;
    }

파폭에서는 되는데 ie에서는 안되는군요.
float를 clear 한걸 모르는 모양입니다.

덧. category에 고정폭 width: 800px; 을 주면 일단은 보이긴 하는군요.

[d2icid2]

두분 올려주신 css로 이것저것 해보았는데 정확히 제가 원하는 레이아웃이 나오질 않네요.
해서 일단 dl태그로 마무리하고 시간 나는대로 다시 도전해볼 생각입니다.
두분 도와주셔서 감사합니다.

[zotoon]

두분 올려주신 css로 이것저것 해보았는데 정확히 제가 원하는 레이아웃이 나오질 않네요.
해서 일단 dl태그로 마무리하고 시간 나는대로 다시 도전해볼 생각입니다.
두분 도와주셔서 감사합니다.