중첩 된 목록을 사용하여 하위 메뉴가있는 수평 메뉴를 만들려면

하위 메뉴가있는 가로 메뉴를 만들려고합니다 (그림 C). 그러나 그림 A 만 얻을 수는 있지만 그림 B 또는 그림 C와 같은 것을 원합니다. 그림 A에 대한중첩 된 목록을 사용하여 하위 메뉴가있는 수평 메뉴를 만들려면

enter image description here

HTML과 CSS 코드 :

<html> 
<head> 
<style type="text/css"> 
ul li{ 
    display:inline; 
    background-color:red; 
} 
ul li ul{ 
    display:inline; 
} 
ul li li{ 
    position:relative; 
    top:20px; 
    display:inline; 
    background-color:green; 
} 
li{ 
    border:1px solid white; 
} 
li:hover{ 
    border:1px solid blue; 
} 
</style> 
<title>Untitled Document</title> 
</head> 

<body> 
<ul> 
    <li>overview</li> 
    <li>alarm 
    <ul> 
     <li>view</li> 
     <li>config</li> 
    </ul> 
    </li> 
    <li>log</li> 
    <li>config 
    <ul> 
     <li>tag</li> 
     <li>security</li> 
    </ul> 
    </li> 
</ul> 
</body> 
</html>

질문은 : 나는 무화과 B 또는 무화과 C와 같은 출력을 만드는 방법? 부모 메뉴를 너무 오랫동안 확장하지 않고 하위 메뉴를 부모 메뉴 바로 아래에 표시하고 싶습니다.

출처

2011-08-31 AlexStack

이미지가 –

내가 무화과 잘못 이해하지 않는 고장 (가) 당신이 달성하려고하는거야? –

부모 메뉴를 너무 오랫동안 확장하지 않고 하위 메뉴를 부모 메뉴 바로 아래에 표시하려고합니다. – AlexStack

@Alex; 이 링크를 확인하십시오 http://jsfiddle.net/sandeep/9SH4S/ 그게 도움이 될지도 모릅니다.

CSS :

ul li{ 
    display:inline; 
    background-color:red; 
    position:relative; 
} 
ul li ul{ 
    display:inline; 
    position:absolute; 
    top:20px; 
    left:0; 
    white-space:nowrap; 
} 
ul li li{ 
    display:inline; 
    background-color:green; 
} 
li{ 
    border:1px solid white; 
} 
li:hover{ 
    border:1px solid blue; 
}

출처

2011-08-31 12:36:21 sandeep

이것은 그 것이다! 고맙습니다. – AlexStack

나는 또한 당신에게 도움이 행복해 :) – sandeep

중첩 된 목록을 사용하여 하위 메뉴가있는 수평 메뉴를 만들려면

답변

관련 문제