html - 在下拉菜单中链接问题

Question

我在导航栏中添加了带有标志的下拉菜单，这样我就可以转到其他语言的页面。这是我进行测试的开发站点的链接:my dev site

正如您所看到的那样，下拉菜单在那里，但链接不起作用...这是代码本身:

<div id="image-dropdown" style=" float: right; position: relative; top: 30px;width: 45px;">

<a href="http://www.uprightpose.com/">
<input checked="checked" type="radio" id="line1" name="line-style" value="1"  />
<!--hyperlink to the language page-->
<label for="line1"></label>
</a>

<a href="http://www.uprightpose.com/home-es-new/">
<input type="radio" id="line2" name="line-style" value="2"  />
<label for="line2"></label>
</a>
</div>

这是CSS:

<style>

#image-dropdown {
    /*style the "box" in its minimzed state*/
    width:80px; height:50px; overflow:hidden;
    /*animate collapsing the dropdown from open to closed state (v. fast)*/
    -moz-transition: height 0.1s; 
    -webkit-transition: height 0.1s; 
    -ms-transition: height 0.1s;  
    -o-transition: height 0.1s;  
    transition: height 0.1s;
}
#image-dropdown:hover {
    height:200px; /*overflow-y:scroll;*/
    /*nice and smooth expand - speed this up at your preference or remove animation altogether*/
    -moz-transition: height 0.5s; 
    -webkit-transition: height 0.5s; 
    -ms-transition: height 0.5s;  
    -o-transition: height 0.5s;  
    transition: height 0.5s;
}
#image-dropdown input {
    /*hide the nasty default radio buttons. like, completely!*/
    position:absolute;top:0;left:0;opacity:0;
}


#image-dropdown label[for="line1"] {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:46px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("https://lipis.github.io/flag-icon-css/flags/4x3/gb.svg");
    background-size: 40px;
    background-repeat: no-repeat;
    border-radius: 7px;
    width: 40px;
    height: 30px;
    }
    #image-dropdown label[for="line2"] {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:46px; opacity:0.7; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute*/
    background:url("https://lipis.github.io/flag-icon-css/flags/4x3/es.svg");
    background-size: 40px;
    background-repeat: no-repeat;
    border-radius: 7px;
    width: 40px;
    height: 30px;
    }   
#image-dropdown:hover label{
    /*this is how labels render in the "expanded" state. we want to see only the selected radio button in the collapsed menu, and all of them when expanded*/
    display:block;
}
#image-dropdown label:hover {
    opacity:0.5;
}
#image-dropdown input:checked + label {
    /*tricky! labels immediately following a checked radio button (with our markup they are semantically related) should be fully opaque regardless of hover, and they should always be visible (i.e. even in the collapsed menu*/
    opacity:1 !important; display:block;
}

/*pfft, nothing as cool here, just the value trace*/
#trace {margin:0 0 20px;}
</style>

我知道输入有问题并且它不适用于链接但是...我可以用任何一种方式...帮助某人？

Answer 1

链接中有一个 radio button 元素。当您单击它时，将选择该元素(因为您的链接中没有文本，当您按下标志时 - 您实际上是在选择单选按钮 - 没有启动任何重定向)。将 onclick 事件添加到将启动重定向的 input 标记:

<input... onclick='window.location="http://www.uprightpose.com/home-es-new/";' />

Here is a working example with your code and an added onclick which will reload jsfiddle onclick :

<a href="http://www.uprightpose.com/">
  <input checked="checked" type="radio" id="line1" name="line-style" value="1" onclick='window.location="https://jsfiddle.net/";'  />
  <!--hyperlink to the language page-->
  <label for="line1"></label>
</a>