我正在尝试为一个类构建一个网站（我只能使用css和html，没有jquery或javascript或任何东西），并且在小屏幕上查看网站时想要一个汉堡包菜单，并且已经按照本教程（{ {3}}），但是菜单上遇到了一些问题..首先，我无法将菜单项添加到汉堡包中，其次，图标不可点击..你能帮我搞清楚吗？请？ 这是我的html代码：
!doctype html>
<html lang="sv" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>...</title>
<link rel="stylesheet" type="text/css" href="css_bildkonst.css">
</head>
<body id="Bildkonst">
<span class="hamburger">
</span>
<!--following is the regular menu-->
<ul>
<li class=" bildkonst"><a href="bildkonst.html">Bildkonst</a></li>
<li><a class="akryl" href="akryl.html">Akryl</a></li>
<li><a class="fresk" href="fresk.html">Fresk</a></li>
<li><a class="oljemalning" href="oljemalning.html">Oljemålning</a></li>
<li><a class="tempera" href="tempera.html">Tempera</a></li>
</ul>
这里是上面的css：
@media screen and (max-width: 480px) {
.hamburger {
position: relative;
display: inline-block;
width: 1.25em;
height: 0.8em;
margin-right: 0.3em;
border-top: 0.2em solid #fff;
border-bottom: 0.2em solid #fff;
}
.hamburger:before {
content: "";
position: absolute;
top: 0.3em;
left: 0px;
width: 100%;
border-top: 0.2em solid #fff;
}
@-ms-viewport{
width: extend-to-zoom;
zoom: 1.0;
}
ul {
float: left;
list-style-type: none;
overflow: hidden;
display: block;
width: 10%;
height: 500%;
margin-top: 15em;
padding: 0;
padding-top: 10%;
padding-bottom: 10%;
border-style: solid;
text-align: center;
font-family: Verdana;
font-size: 0.875em;
background: #d6d6d6;
text-decoration: none;
}
希望有人可以帮我解决这个问题=）