메뉴에서 드롭 다운 상자를 만드는 방법

내 웹 사이트에 대한 메뉴가 있는데 어떻게 드롭 다운 할 수 있습니까? 탐색 바는 내 가상 항공사에서 ccvg (도트) 그물에있는 것입니다.메뉴에서 드롭 다운 상자를 만드는 방법

약 페이지와 같이 다른 곳으로 이동할 수 있도록 아래쪽으로 떨어 뜨리고 싶습니다. 등은

여기에 대한 CSS입니다 :

여기

#bar { 
    position:fixed; 
    top:0; 
    left:0; 
    background:#fff url(images/barlogo.png) no-repeat 10px 50%; 
    border-bottom:1px solid #999; 
    height:48px; 
    width:100%; 
    z-index:2; 
    font-family:Corbel, sans-serif; 
    font-weight:bold; 
    font-size:14px; 
} 

#bar .btn { 
    float:right; 
    height:100%; 
    border-left:1px solid #999; 
    text-transform:uppercase; 
} 

#bar .btn a { 
    display:table-cell; 
    width:100%; 
    height:45px; 
    padding:0 20px; 
    vertical-align:middle; 
    text-decoration:none; 
    color:#999; 
    border-top:3px solid #fff; 
} 

#bar .btn a:hover, #bar .btn a.selected { 
    background-color:#e6e6e6; 
    color:#5c5c5c; 
} 

#bar .btn img { 
    border:0; 
    vertical-align:middle; 
} 

#bar .btn .value { 
    vertical-align:middle; 
    padding-left:14px; 
    font-family:Arial, sans-serif; 
    font-weight:normal; 
    font-size:20px; 
} 

#bar .icon{ 
    background-position:0 0; 
    display:inline-block; 
    vertical-align:middle; 
    margin:0; 
} 

#barmenu { 
    position:fixed; 
    width:250px; 
    right:0; 
    top:48px; 
    background:#fff; 
    border-left:1px solid #999; 
    border-bottom:1px solid #999; 
    font-size:8pt; 
    font-family:Verdana; 
    font-weight:normal; 
    z-index:1; 
    display:none; 
} 

#btn_menu:hover~#barmenu, #barmenu:hover { 
    display:block; 
} 

#barmenu a { 
    display:block; 
    padding:10px; 
    text-decoration:none; 
    color:#5c5c5c; 
    border-top:1px solid #999; 
} 

#barmenu a:hover { 
    background:#e6e6e6; 
}

간단한 버튼 버튼을 만들기 위해 HTML입니다.

<div class="bar"><div class="btn"><a href="<?php echo url('/'); ?>" title="Homepage" style="border-color: #40E0D0;">Homepage</a></div></div>

출처

2014-12-07 Kieran Cross

이 필요하시면, W3 스쿨에서 무엇입니까? http://jsfiddle.net/v3xLkvke/1/ – user2570380

그게 내가 원하는거야! 이미 만든 물건들과 함께 작동하게하려면 어떻게해야합니까? –

좋아, 내 단추 위로 마우스를 가져 가면 나타납니다. 그러나 페이지의 왼쪽에 상단 모서리에 나타납니다. –

HTML 태그가 필요하다고 생각합니다. 다음의 예는 즉 http://www.w3schools.com/tags/tag_select.asp

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<select> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="opel">Opel</option> 
 
    <option value="audi">Audi</option> 
 
</select> 
 
    
 
</body> 
 
</html>

출처

2014-12-07 19:23:29

W3Schools의 인용을 피하십시오. 널리 알려지지 않은 것으로 널리 알려진 출처입니다. 자세한 내용은 [W3Fools.com] (http://www.w3fools.com/)을 참조하십시오. – trejder

메뉴에서 드롭 다운 상자를 만드는 방법

답변

관련 문제