ちょっと確認
★header内のナビゲーションは:focus、section内のナビゲーションは:target
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )
で検証済みのHTML5 + CSS3(targetのみ)
★タブは＿に置換してあるので戻す。文字コードUTF-8
★リキッド(640px～900px)
<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="IRUKA">
＿<style media="screen">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
header,section,footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}
/* プルダウンメニュー */
nav{line-height:2em;text-align:center;}
nav ul,nav ul li{list-style:none;margin:0;padding:0;}
nav ul{font-size:0;}
nav ul li{font-size:16px;display:inline-block;position:relative;width:25%;}
nav ul li ul{font-size:16px;position:absolute;top:2em;width:100%;display:none;}
nav ul li ul li{width:100%;}
/* header内のナビ */
header nav ul li:hover ul,header nav ul li:focus ul{display:block;}
/* 本文内のナビ */
section nav ul li ul:target{display:block;}
/* 色分けなど */
nav ul li a{display:block;width:100%;height:100%;text-decoration:none;}
nav ul li{background-color:yellow;}
nav ul li:hover{background-color:orange;}
nav ul li ul li:hover{background-color:lime;}
body{background-color:gray;}
header,section,footer{background-color:white;}
-->
＿</style>
</head>
<body>
＿<header>
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="/">Top</a></li>
＿＿＿＿<li><a href="/Books">Books</a>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="/Books/001.html">ABCD</a></li>
＿＿＿＿＿＿<li><a href="/Books/002.html">EFGH</a></li>
＿＿＿＿＿＿<li><a href="/Books/003.html">IJK</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿＿<li><a href="/Product">Product</a>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="/Product/001.html">LMNO</a></li>
＿＿＿＿＿＿<li><a href="/Product/002.html">PQRS</a></li>
＿＿＿＿＿＿<li><a href="/Product/003.html">TUVW</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿＿<li><a href="/Manual">Manual</a>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="/Manual/001.html">XYZA</a></li>
＿＿＿＿＿＿<li><a href="/Manual/002.html">BCDE</a></li>
＿＿＿＿＿＿<li><a href="/Manual/003.html">FGHI</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<section>
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</section>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="/">Top</a></li>
＿＿＿＿<li><a href="#Book">Book</a>
＿＿＿＿＿<ul id="Book">
＿＿＿＿＿＿<li><a href="/Books/001.html">ABCD</a></li>
＿＿＿＿＿＿<li><a href="/Books/002.html">EFGH</a></li>
＿＿＿＿＿＿<li><a href="/Books/003.html">IJK</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿＿<li><a href="#Products">Products</a>
＿＿＿＿＿<ul id="Products">
＿＿＿＿＿＿<li><a href="/Product/001.html">LMNO</a></li>
＿＿＿＿＿＿<li><a href="/Product/002.html">PQRS</a></li>
＿＿＿＿＿＿<li><a href="/Product/003.html">TUVW</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿＿<li><a href="#Manuales">マニュアル</a>
＿＿＿＿＿<ul id="Manuales">
＿＿＿＿＿＿<li><a href="/Manual/001.html">XYZA</a></li>
＿＿＿＿＿＿<li><a href="/Manual/002.html">BCDE</a></li>
＿＿＿＿＿＿<li><a href="/Manual/003.html">FGHI</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿</ul>
＿＿</nav>
＿</section>
＿<footer>
＿＿<h2>文書情報</h2>
＿＿<dl id="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</footer>
</body>
</html>
補足
先ほど実践してみました。しかし、結局スマートフォンなどのタッチデバイスで動作確認すると出っぱなしの状態でした。