간단한 지하철 작풍 메뉴를 html/css에서 만든다

Question

우선, 며칠 동안 나는 이것에 대해 인터넷 검색을 시도했다. html/css를 배우기 시작했다. 1에서 100까지의 나의 기술은 6과 같다. . 블로거 html 위젯으로 작동하는이 코드를 가지고 있지만 좀 다른 것이 좋겠어요. 이 코드입니다 :

:root .css3-metro-dropdown option, 
:root .css3-metro-dropdown:after, 
:root .css3-metro-dropdown::after, 
:root .css3-metro-dropdown select 
{ 
color: #fff; 
} 

:root .css3-metro-dropdown select, 
:root .css3-metro-dropdown:after, 
:root .css3-metro-dropdown::after 
{ 
display: block; 
background: #2b5797; 
} 

:root .css3-metro-dropdown select, 
:root .css3-metro-dropdown option 
{ 
padding: 8px; 
} 

:root .css3-metro-dropdown 
{ 
position: relative; 
display: inline-block; 
border: 0; 
} 

:root .css3-metro-dropdown::after 
{ 
content: "\25bc"; 
position: absolute; 
top: 0; 
right: 0; 
display: block; 
width: 32px; 
font-size: 15px; 
line-height: 34px; 
text-align: center; 

-webkit-pointer-events: none; 
-moz-pointer-events: none; 
pointer-events: none; 
} 

:root .css3-metro-dropdown select 
{ 
height: 34px; 
border: 0; 
vertical-align: middle; 
font: normal 12px/14px "Segoe UI", Arial, Helvetica, Sans-serif; 
outline: 0 none; 
} 

:root .css3-metro-dropdown option 
{ 
background: #fff; 
color: #333; 
} 

<span class="css3-metro-dropdown"> 
<select name="dropdown-1"> 
    <option value="0">Client-side Languages</option> 
    <option value="1">JavaScript</option>  
    <option value="2">CSS3</option> 
    <option value="3">HTML5</option> 
</select> 
</span> 
<span class="css3-metro-dropdown css3-metro-dropdown-color-ff1d77"> 
<select name="dropdown-2"> 
    <option value="0">Server-side Languages</option> 
    <option value="1">PHP</option>  
    <option value="2">JAVA</option> 
    <option value="3">ASP.NET</option> 
    <option value="4">Perl</option> 
</select> 
</span> 
<span class="css3-metro-dropdown css3-metro-dropdown-color-2673ec"> 
<select name="dropdown-3"> 
    <option value="0">JavaScript Libraries</option> 
    <option value="1">jQuery</option>  
    <option value="2">Y!UI</option> 
    <option value="3">ASP.NET AJAX</option> 
    <option value="4">CoffeeScript</option> 
</select> 
</span> 
<span class="css3-metro-dropdown css3-metro-dropdown-color-ff2e12"> 
<select name="dropdown-4"> 
    <option value="0">Guitars</option> 
    <option value="1">B.C. Rich</option>  
    <option value="2">ESP</option> 
    <option value="3">Ibanez</option> 
    <option value="4">Jackson</option> 
</select> 
</span> 

그리고 난, 당신이 예를 참조 http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

Answer 1

같은 것을보고 싶지 옵션이있는 선택 태그를 사용하는 대신 정렬되지 않은 목록 (UL)을 사용하는 것이 좋습니다. 선택 항목 대신 다음과 같이 입력하십시오.

<ul class="primary-nav"> 
<li>Client-side Languages 
    <ul class="primary-nav__subnav"> 
    <li>JavaScript</li> 
    <li> CSS </li> 
    <li> HTML </li> 
    </ul> 
</li> 
<li> Server Side Languages 
    <ul> 
    <li> 1 </li> 
    <li> 2 </li> 
    <li> 3 </li> 
    </ul> 
</li> 
<li> JavaScript Languages </li> 
</ul> 

등등. CSS의 경우 최상위 메뉴 (기본 탐색)에서 display : inline-table을 사용하여 항목이 서로 옆에 나타나면 pseudoclass : hover를 사용하여 각 하위 메뉴의 표시를 전환 할 수 있습니다. primary-nav UL에서 높이를 선언해야합니다. 그렇지 않으면 하위 메뉴가 전환 될 때 확장됩니다.

Here's 빠른 작업 예를

양자 택일로, 당신은 자바 스크립트를 사용할 수 있지만이 수행해야합니다. UL에 높이를 설정하지 않으려면 다른 방법이 있습니다.

Answer 2

대신을 <nav><ul><li>을 시도해야하는 대신 <select><option>를 사용하는이 www.metrominimalist.blogspot.com