클릭 후 하위 메뉴가 열리는 수평 메뉴

Question

하위 메뉴가있는 가로 메뉴가 생성되었습니다. jsfiddle에서 하위 메뉴가 로컬 대신 100 %에서 제대로 작동하지 않는다는 것을 알지 못합니다. 여기 http://jsfiddle.net/IronFeast/g8MDP/

그리고 코드입니다 : 다음은 작업 링크입니다

<ul id="navbar"> 
<li><a href="index.php">Home</a></li> 
<li><a href="#">Gallery</a> 
<ul class="submenu"> 
    <li><a href="photogallery1.php">Photogallery 1</a></li> 
    <li><a href="photogallery2.php">Photogallery 2</a></li> 
    <li><a href="photogallery3.php">Photogallery 3</a></li> 
</ul>   
</li> 
<li><a href="events.php">Events</a></li> 
<li><a href="#">Blog</a> 
<ul class="submenu"> 
    <li><a href="personal.php">Personal</a></li> 
    <li><a href="dev.php">Dev</a></li> 
</ul> 
</li> 
<li><a href="#">About</a> 
<ul class="submenu"> 
    <li><a href="page1.php">Page 1</a></li> 
    <li><a href="page2.php">Page 2</a></li> 
</ul> 
</li> 

CSS : 순간

#navbar { 
background-color: #4E78B4; 
position: absolute; 
text-align: center; 
margin: 0; 
padding-bottom: 7px; 
padding-top: 7px; 
float: left; 
left: 10px; 
width: 940px;  
font-size: 14px; 
z-index: 100; 
} 

#navbar li { 
list-style: none; 
float: left; 
color: #E9EBDE; 
padding-left: 24px; 
padding-right: 4px; 
z-index: 100; 
} 

#navbar li a { 
display: inline; 
padding-top: 7px; 
padding-bottom: 7px; 
padding-right: 8px;   
padding-left: 8px; 
text-transform: uppercase; 
text-decoration: none; 
font-weight: bold; 
color: #ffffff; 
z-index: 100; 
text-align: center; 
} 

#navbar ul li a { 
display: block; 
padding-top: 6px; 
padding-bottom: 3px; 
padding-right: 8px; 
padding-left: 8px; 
text-decoration: none; 
z-index: 100; 
} 

#navbar li a:hover { 
color: #000000; 
background-color: #ffffff; 
padding-right: 8px;   
padding-left: 8px; 
z-index: 100; 
} 

#navbar li ul{ 
display: none; 
background-color: #41B6DC; 
z-index: 100; 
} 

#navbar li:hover ul, #navbar li.hover ul { 
position: absolute; 
display: block; 
left: 0; 
width: 940px; 
margin: 0; 
padding: 0;    
z-index: 100; 
margin-top: 7px; 
} 

#navbar li:hover li, #navbar li.hover li { 
float: left; 
z-index: 100; 
} 

#navbar li:hover li a, #navbar li.hover li a { 
color: #000; 
z-index: 100; 
} 

#navbar li li a:hover { 
color: #4E78B4; 
z-index: 100; 
} 

나는 "갤러리에 마우스로 이동 "하위 메뉴가 열립니다. 그러나"Photogallery 1 "을 클릭하면 해당 페이지로 이동하지만 불행히도 해당 페이지에있을 때 메뉴가 닫힙니다.

'갤러리'가 강조 표시되고 하위 메뉴가 열리 며 'Photogallery 1'버튼이 강조 표시됩니다.

도움이 될 것입니다. S

가 당신에게

Answer 1

당신은 photogallery1에 추가해야 희망이 도움 : 나는 어쩌면 당신을 도울 수있는이 튜토리얼 http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu을 발견하지만 난 당신이 HTML과 CSS를 ajust해야합니다 생각 미리

Answer 2

에 감사드립니다. php, photogallery2.php 등의 클래스 속성 값으로 hover.

<ul id="navbar"> 
    <li><a href="index.php">Home</a></li> 
    <li class="<?php echo $_COOKIE["hover"]; ?>"><a href="#">Gallery</a> 
    <ul class="submenu"> 
     <li><a href="photogallery1.php" class="<?php echo $_COOKIE["selected"]; ?>">Photogallery 1</a></li> 
     <li><a href="photogallery2.php">Photogallery 2</a></li> 
     <li><a href="photogallery3.php">Photogallery 3</a></li> 
    </ul>   
    ... 
    ... 
</ul> 

또한 CSS에 추가 : 그것은 더 나은 메뉴 상태를 저장하기 위해 쿠키를 사용하는

.selected { 
    background-color: #ffffff; 
} 

.