仿select选择样式的二级菜单，鼠标经过时显示二级菜单的内容，点击之后可以正常跳转，更加的符合SEO优化需要。同时还会给出平时用到的几种使用select跳转的代码
HTML代码
<span class="hot_myarts lh18" onmouseover="document.getElementById('HotArticle').style.display='';" onmouseout="document.getElementById('HotArticle').style.display='none';">
<span class="myart_n1">
<a href="http://https://qdkfweb.cn/frontend-skills.html">前端开发工程师掌握技能</a>
<em></em>
</span>
<span id="HotArticle" class="myart_n2" style="display: none;">
<span><a href="http://https://qdkfweb.cn/frontend-skills.html">前端开发工程师掌握技能</a><br /></span>
<span><a href="http://https://qdkfweb.cn/frontend-skills.html">前端开发工程师掌握技能</a><br /></span>
<span><a href="http://https://qdkfweb.cn/frontend-skills.html">前端开发工程师掌握技能</a><br /></span>
<span><a href="http://https://qdkfweb.cn/frontend-skills.html">前端开发工程师掌握技能</a><br /></span>
<span><a href="http://https://qdkfweb.cn/frontend-skills.html">前端开发工程师掌握技能</a><br /></span>
</span>
</span>
CSS代码
.hot_myarts{position: relative; float: left; width:180px; height: 18px; background: #fff; border: 1px solid #7F9EBD; padding-left: 3px;}
.myart_n1{line-height: 18px;}
.myart_n1 a{float: left;}
.myart_n1 em{float: right; width: 17px; height: 18px; display: inline; cursor:pointer; background:url(images/art_l006.gif) no-repeat center center;}
.myart_n2{position: absolute; left: -1px; top:18px; border: 1px solid #7F9EBD; padding-left: 3px; background: #fff; width: 180px;}在上面的演示中，可以看到我给出的其他几个真的select点击之后会跳转
例子一：点击后在当前窗口或者新窗口打开
使用JavaScript点击后新窗口跳转：
<select name="pageselect" onchange="window.open(options[selectedIndex].value)" >
<OPTION value="http://www.baidu.com">百度</OPTION>
<OPTION value="http://www.163.com">网易</OPTION>
</select>
<br/>
使用JavaScript点击后当前窗口跳转：
<select name="pageselect" onchange="window.location.href=options[selectedIndex].value" >
<OPTION value="http://www.baidu.com">百度</OPTION>
<OPTION value="http://www.163.com">网易</OPTION>
</select>例子二：在外面定义一个函数，里面再引入动作跳转
<script type="text/javascript">
function setsubmit()
{
if(mylink.value == 0)
window.location='https://qdkfweb.cn';
if(mylink.value == 1)
window.location='http://www.163.com';
if(mylink.value == 2)
window.location='http://www.sina.com';
}
</script>
<select name="mylink" id="mylink">
<OPTION value="0">百度</OPTION>
<OPTION value="1">网易</OPTION>
<OPTION value="2">新浪</OPTION>
</select>
<input type="button" id="btn" value="提交" onclick="setsubmit(this)" />
<br/>
通过自定义跳转是在当前窗口打开或者新窗口打开
<script>
function goUrl(obj){
if(obj.getAttribute('target')=='_blank') open(obj.value);
if(obj.getAttribute('target')=='_self') window.location.href=obj.value;
}
</script>
<select onchange="goUrl(this.options[this.selectedIndex])">
<option>==</option>
<option value='https://qdkfweb.cn' target="_blank">qdkfweb.cn</option>
<option value='https://qdkfweb.cn' target="_self">wpbars.com</option>
</select>
