從老外的教學學到如何讓網頁上的選單，

會根據不同的解析度改變呈現方式

http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly

這篇文章目前我只學到上半部CSS的部分，

下半部似乎是介紹javascript的方法？

１．先在之間放入選單的html語法（就像一般的一樣）

<nav id="nav" role="navigation">

<a href="#nav" title="Show navigation">Show navigation</a>

<a href="#" title="Hide navigation">Hide navigation</a>

<ul>

<li><a href="/">Home</a></li>

<li>

<a href="/" aria-haspopup="true">Blog</a>

<ul>

<li><a href="/">Design</a></li>

<li><a href="/">HTML</a></li>

<li><a href="/">CSS</a></li>

<li><a href="/">JavaScript</a></li>

</ul>

</li>

<li>

<a href="/" aria-haspopup="true">Work</a>

<ul>

<li><a href="/">Web Design</a></li>

<li><a href="/">Typography</a></li>

<li><a href="/">Front-End</a></li>

</ul>

</li>

<li><a href="/">About</a></li>

</ul>

</nav>

２．在css樣式的地方，放入一般情況下nav的設定（也跟平常一樣）

#nav

{

/* container */

}

#nav > a

{

display: none;

}

#nav li

{

position: relative;

}

/* first level */

#nav > ul

{

height: 3.75em;

}

#nav > ul > li

{

width: 25%;

height: 100%;

float: left;

}

/* second level */

#nav li ul

{

display: none;

position: absolute;

top: 100%;

}

#nav li:hover ul

{

display: block;

}

３．接下來，就是設定螢幕大小不相同的時候的下拉式選單樣式（作者這邊是設定螢幕小於等於640px）

@media only screen and ( max-width: 40em ) /* 640 */

{

#nav

{

position: relative;

}

#nav > a

{

}

#nav:not( :target ) > a:first-of-type,

#nav:target > a:last-of-type

{

display: block;

}

/* first level */

#nav > ul

{

height: auto;

display: none;

position: absolute;

left: 0;

right: 0;

}

#nav:target > ul

{

display: block;

}

#nav > ul > li

{

width: 100%;

float: none;

}

/* second level */

#nav li ul

{

position: static;

}

}

接著，網頁下拉選單真的很神奇的會隨著解析度不同而改變嘍！