2012-07-02 4 views
2

현재 순수 CSS 다중 레벨 드롭 다운 메뉴에서 작업 중이며 드롭 다운 메뉴가 부모 메뉴의 왼쪽에 자동 정렬되도록하는 방법을 생각할 수 없습니다 . 여기 드롭 다운 메뉴의 CSS 정렬

는 HTML/PHP ,745,151

여기

Click to see Drop-down screenshot

가 CSS 여기

/*---------HEADER MENU---------*/ 
#header .content ul.menu li ul{ 
    display: none; 
    margin: 0; 
    float: left; 
    padding: 0; 
    position: absolute; 
    z-index: 200; 
} 
#header .content ul.menu li ul li{ 
position: relative; 
top: 20px; 
margin: 0; 
} 
#header .content ul.menu li:hover > ul{ 
display: inline; 
float: left; 
width: 125px; 
} 

#header .content ul.menu li ul li li{ 
width: 125px; 
float: left; 
position: absolute;} 

/*---------VISITORS MENU---------*/ 
#block-menu-menu-visitors .content ul.menu{ 
    z-index: 200; 
} 
#block-menu-menu-visitors .content ul.menu li{ 
padding: 2px 15px 2px 15px; 
display: inline-block; 
float: left; 
background-color: #ffff90; 
} 

#block-menu-menu-visitors .content ul.menu li:hover{ 
padding: 2px 15px 2px 15px; 
float: left; 
display: inline-block; 
background-color: #ffffaa; 
} 

을하는 화면이다

이 바로 메인 메뉴 섹션에서 (이 경우 메뉴입니다) 내가 가진 무엇이든 "헤더"요소를 넣습니다.

도움말이나 올바른 방향으로 밀면 도움이 될 것입니다. 감사합니다.

+0

'left : 0px;'또는 다른'display :'값을 사용해 보셨습니까? – poepje

+0

예 그 두 가지를 모두 시도했지만 제대로 작동하지 않습니다. – Jeff

+0

페이지의 HTML을 제공 할 수 있습니까? –

답변

3

내 생각은 ...

#header .content ul.menu li:hover > ul{ 
display: block; 
float: left; 
width: 125px; 
} 

는 작동 할 수 있습니다. html을 추가하지 않으면 올바른 답을 줄 수 있습니다. 벤.

0

나는이 요소들이 가지고있는 들여 쓰기를 제거하기 때문에 아이템을 나열하기 위해 list-style-type: none;을 추가하려고합니다.

관련 문제