在html/css中製作簡單的metro風格菜單

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> 

，我想是這個樣子www.metrominimalist.blogspot.com

Answer 1

而不是使用<select><option>的，你應該嘗試<nav><ul><li>，見例如http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

Answer 2

相反使用帶選項的選擇標籤我會建議使用無序列表（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，您可以在頂級菜單（primary-nav）上使用display：inline-table，以便項目彼此相鄰，然後可以使用僞類：hover切換每個子菜單的顯示。確保在主導航UL上聲明高度，否則在子菜單切換時它會展開。

Here's快速的工作例如

或者，你可以使用JavaScript，但應該做的。如果你不想在UL上設置高度，還有其他的方法。