在 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

您应该尝试<nav><ul><li>，而不是使用<select><option>，参见示例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 上设置高度，还有其他方法可以做到这一点。