码云链接：https://gitee.com/QJLLL/codes/evldmn9i7q8fbskyaguo083
原网页链接：http://www.xiachufang.com/
本次主要实现了左侧的二级菜单以及鼠标放在某些字体上变色
效果图：
部分代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sushi is coming!</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="page">
<div id="header">
<div id="sidebar">
<a href="index.html" id="logo"><img src="images/logo.png" alt="LOGO"></a>
<div id="navigation">
<ul>
<li class="selected">
<a href="index.html">首页</a>
</li>
<li class="menu">
<a href="index.html">寿司</a>
<div class="sub">
<a href="index.html">卷寿司</a> <a href="index.html">饭团</a> <a href="index.html">握寿司</a> <a href="index.html" class="last-child">手卷寿司</a>
</div>
<span></span>
</li>
<li>
<a href="index.html">福袋</a>
</li>
<li class="last">
<a href="index.html">军舰</a>
</li>
</ul>
</div>
</div>
<div id="adbox">
<h1>Hey！ Sushi is coming!</h1>
<div class="frame">
<div class="section">
<p>
      有谁能抗拒在花团锦簇的春光中安逸静坐，享受醋饭在口中与新鲜鱼生完全融合那一瞬间，整个身心都忘怀于自然的寿司体验？不管是传统还是现代的寿司店，醋饭和鱼生的组合给了天才厨师最多的创意可能，超低的热量、无火的生食方式、有机的食材、新鲜的味道、漂亮的造型，寿司满足了人们一切想象。(*^▽^*)</span>
</p>
</div>
<div class="section">
<h2>寿司了解一下吧！</h2>
<p>
      寿司是日本的一种传统食物，主要材料是用醋调味过的冷饭，再加上鱼肉、海鲜、蔬菜或鸡蛋等作配料，其味道鲜美，很受日本民众的喜爱。
</p>
</div>
</div>
</div>
</div>
<div id="contents">
<div id="articles">
<div>
<div class="frame">
<img src="images/sushi9.png" alt="Img" height="213" width="218">
<h2>握寿司</h2>
<p>
用手的挤压来完成寿司而不是用石头挤压，也是寿司文化进程中一个著名的拐点，这样做出来的寿司叫做江户手握寿司。
</p>
<a href="index.html" class="more">Learn More</a>
</div>
<div class="frame">
<img src="images/sushi10.png" alt="Img" height="192" width="189">
<h2>箱寿司</h2>
<p>
在一个木盒子中放入鲷鱼、星鳗、虾等各种各样的材料，经过压紧成形来制作的.这种其它地区不多见的、工艺复杂的“箱寿司”就被人们称为“大阪寿司”，主要用在婚宴等重要仪式上。
</p>
<a href="index.html" class="more">Learn More</a>
</div>
<div id="featured">
<ul>
<li>
<a href="index.html"> <img src="images/sushi1.png" alt="Img">
<h3>Low Calorie</h3>
</a>
</li>
<li>
<a href="index.html"> <img src="images/sushi2.png" alt="Img">
<h3>Low Fat</h3>
</a>
</li>
<li>
<a href="index.html"> <img src="images/sushi3.png" alt="Img">
<h3>Healthy</h3>
</a>
</li>
<li>
<a href="index.html"> <img src="images/sushi4.png" alt="Img">
<h3>Delicious</h3>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="dummy">
</div>
</div>
<div id="footer">
<div class="header">
<div class="body">
<ul>
<li>
<h4>卷寿司</h4>
<span>> <a href="#header">樱花之恋</a></span> <span>> <a href="#header">招牌黄金脆</a></span> <span>> <a href="#header">焦糖三文鱼卷</a></span>
</li>
<li>
<h4>饭团</h4>
<span>> <a href="#header">孜然牛肉饭团</a></span> <span>> <a href="#header">烤肉海苔饭团</a></span> <span>> <a href="#header">鸡排海苔饭团</a></span>
</li>
<li>
<h4>握寿司</h4>
<span>> <a href="#header">牛油果芒果握寿司</a></span> <span>> <a href="#header">鳗鱼炙烤握寿司</a></span> <span>> <a href="#header">火炙玉子烧握寿司</a></span>
</li>
<li class="last-child">
<h4>手卷寿司</h4>
<span>> <a href="#header">鱼籽手卷</a></span> <span>> <a href="#header">蟹肉手卷</a></span> <span>> <a href="#header">泡菜手卷</a></span>
</li>
</ul>
</div>
<div class="footer">
</body>
</html>
CSS代码详见码云