일단은 메뉴쪽 분리, 메뉴 바깥족으로 div를 따로 분리를 해놨는데 이걸 어떻게 해야될지 모르겠네요.

몇백번 설명하는것보단 코드를 보여드리는게 나을것같습니다.

<div id="header">
				<div id="menu">
					<ul class="all">
						<li class="active"><a href="#">메뉴1</a></li>
						<li><a href="#">메뉴2</a></li>
						<li><a href="#">메뉴3</a></li>
						<li><a href="#">메뉴4</a></li>
					</ul>
				</div>
			</div>
			<div id="menu_subcontents">
				<div class="subcontent menu1">
					<div class="lc">
						<ul>
							<li class="active"><a href="#">메뉴1-1</a></li>
							<li><a href="#">메뉴1-2</a></li>
							<li><a href="#">메뉴1-3</a></li>
							<li><a href="#">메뉴1-4</a></li>
							<li><a href="#">메뉴1-5</a></li>
						</ul>
					</div>
					<div class="rc">
						<ul>
							<li><img class="thumbnails" src="./thumbnail.jpg" /><p class="title">제목</p><p class="scripts">내용</p></li>
							<li><img class="thumbnails" src="./thumbnail.jpg" /><p class="title">제목</p><p class="scripts">내용</p></li>
							<li><img class="thumbnails" src="./thumbnail.jpg" /><p class="title">제목</p><p class="scripts">내용</p></li>
							<li><img class="thumbnails" src="./thumbnail.jpg" /><p class="title">제목</p><p class="scripts">내용</p></li>
						</ul>
					</div>
				</div>
			</div>
		</div>

대략 이렇게 되어있습니다.

#menu ul li a에 focus, hover가 발동하면 순서를 확인해서 subcontent menu + n 의 div를 활성화시킨다는건데, 이걸 말이야 쉽지 자바스크립트로 짜기 쉽지가 않을것 같습니다.

그래서 자문을 구하려고 합니다.

li안에 넣으면 본문이 밀려나지 않고 무엇보다 드롭다운 형식으로 되어서 원하는 모양이 나오질 않고, 그렇다고 이렇게 하자니 코딩할때 대책이 안섭니다. 어떻게 할까요. 살려주세요

subcontent 클래스의 내용을 li안에 쑤셔넣을까요? 아니면 그냥 이상태로 유지시켜서 자바스크립트로 뻘짓을 하는게 나을까요?

(디자인은 아무래도 공개할수가 없어서 올려드리질 못합니다. 죄송합니다 ㅠㅠ)