0
如何將鏈接添加到垂直菜單中？ 我試過了我能想到的一切，但它不起作用。添加指向垂直導航菜單的鏈接
下面是代碼：
div.wrapper {
margin: 10px left;
width: 250px;
float: left;
}
nav.vertical {
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,.15);
overflow: hidden;
text-align: center;
}
nav.vertical > ul > li {
display: block;
}
nav.vertical > ul > li > label,
nav.vertical > ul > li > a {
background-color: rgb(157, 34, 60);
background-image: -webkit-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
background-image: -moz-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
background-image: -o-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
background-image: linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
border-bottom: 1px solid rgba(255,255,255,.1);
box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);
color: rgb(255,255,255);
display: block;
font-size: .85rem;
font-weight: 500;
height: 50px;
letter-spacing: .5rem;
line-height: 50px;
text-shadow: 0 1px 1px rgba(0,0,0,.1);
text-transform: uppercase;
transition: all .1s ease;
}
nav.vertical > ul > li > label:hover,
nav.vertical > ul > li > a:hover {
background-color: rgb(114, 51, 98);
background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
cursor: pointer;
}
nav.vertical > ul > li > label + input {
display: none;
visability: hidden;
}
/* unvisited link */
a:link {
color: #AAAAFF;
}
/* visited link */
a:visited {
color: #DD04FF;
}
/* mouse over link */
a:hover {
color: #FF0000;
}
/* selected link */
a:active {
color: #FFCC00;
}
footer {
color: #ffffff;
}
nav{
background-color: dimgrey;
border: 5px solid #333;
}
nav ul{
nav ul: list-style-type: none;
}
nav li{
padding: 2px;
display: inline-block;
border-right: 1px solid #fff;
}
nav li a:link{
text-decoration: none:
font-weight: 700;
text-transform: uppercase;
color:#fff;
font-family: sans-serif;
font-size:0.9em;
}
nav li:hover{
background-color: teal;
}<div class="wrapper">
<nav class="vertical">
<ul>
<li>
<label for="home">Home</label>
<input type="radio" checked="true" name="verticalMenu" id="home" />
</li>
<li>
<label for="blog">Blog</label>
<input type="radio" name="verticalMenu" id="blog" href="blog.html"></a>
</li>
<li>
<label for="work">News</label>
<input type="radio" name="verticalMenu" id="work" />
</li>
<li>
<label for="work">Contact</label>
<input type="radio" name="verticalMenu" id="work" />
</li>
</ul>
</nav>
</div>所以基本上，我不知道在哪裏添加HREF。 任何反饋將不勝感激。
謝謝:)
你爲什麼把標籤和輸入裏面？你可以在裏面使用href：
你需要一個單選按鈕，或者只是鏈接會適合你嗎？ –
爲什麼要使用輸入？你是*要求用戶直接輸入*還是隻想點擊鏈接？ – Scott