1
我是整個響應式網頁設計領域的新故障。我已經設法從我發現的一個模板創建一個基於CSS的菜單，UL以其線性形式很好地工作，但是分鐘移動到下降形式@media 480px及以下，懸停一側工作，但實際鏈接不工作。我的CSS響應下拉菜單鏈接無法在響應式視圖中工作
HTML
enter code here
<nav>
a href="#" id="menu-icon"><span>Menu</span></a>
<ul id="value">
<li id="valueli"><a href="#hello">WELCOME</a></li>
<li id="valueli"><a href="http://www.valueportfolio.co.za"
target="_blank">ABOUT US</a></li>
<li id="valueli"><a href="#methodology">METHODOLOGY</a></li>
<li id="valueli"><a href="#interaction">GUIDANCE</a></li>
<li id="valueli"><a href="#services">SERVICES</a></li>
<li id="valueli"><a href="#team">OUR TEAM</a></li>
<li id="valueli"><a href="#contact">TALK TO US</a></li>
</ul>
</nav>
下面的CSS代碼：1）@media之前。 2）@media 240px例如。
前@MEDIA
enter code here
a { text-decoration: none; }
a:hover { color: transparent; }
#nav-wrap {
margin-top: 20px;
}
nav { width: 1000px; height: 20px; float: left; }
#menu-icon {
display: none;
width: 25px;
height: 25px;
margin-left: 10px;
background: url(images/value_images/menu_png.png) center no-repeat;
}
a:hover#menu-icon {
background-color: transparent;
border-radius: 0 0 0 0;
}
#menu-icon span { display: none;
float: left;
margin-left: 50px;
padding-top: 3px;
width: 115px;
position: absolute;
font-family:"Verdana", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
}
ul#value { list-style-type: none; display:block; width: 100%; margin: 0; padding: 0;}
li#valueli {font-family: "Verdana", Arial, Helvetica, sans-serif; font-size:12px;
font-weight: normal;
text-decoration: none;
padding-left: auto;
padding-right: auto;
display: inline-block;
line-height: 20px;
float: left;
text-align: center;
height: 20px;
width: 14.2%;
padding-start: 0;
-moz-padding-start: 0;
-webkit-padding-start: 0;
-o-padding-start: 0;
margin: 0;
}
li#valueli a {color: #000; }
li#valueli a:hover { color: #fa7b27; }
AT MEDIA 320x240像素
@media screen and (min-width: 240px) and (max-width: 319px) {
#menu-icon {
display:inline-block;
}
#menu-icon span { display: inline-block;
float: left;
margin-left: 35px;
padding-top: 3px;
width: 115px;
position: absolute;
font-family:"Verdana", Arial, Helvetica,
sans-serif;
font-size: 12px;
color: #000;
}
nav { width: 100%; height: 25px; float: right; background: #ffffff; margin-left:
-1px; }
nav:hover ul#value {
display: inline-block;
list-style: none; width: 100%; margin: 0 auto;
}
nav ul#value {
display: none;
overflow: hidden;
position: relative;
top: 0;
left: 0;
float: left;
padding: 5px;
background: #fff;
width: 100%;
}
nav ul#value, nav:active ul#value {
display: none;
overflow: hidden;
position: relative;
top: 0;
left: 0;
float: left;
padding: 5px;
background: #fff;
width: 100%;
}
nav li#valueli { font-family:"Verdana", Arial, Helvetica, sans-serif;
font-size:12px;
font-weight: normal;
text-decoration: none;
display: inline-block;
text-align: left;
border-bottom: #808080 1px dotted;
width: 100%;
height: 30px;
margin: 0;
padding: 3px;
}
}
'A HREF = 「＃」 ID = 「菜單圖標」>菜單'是否缺少'<了'？可以這樣做 –