仿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://http://caibaojian.com/frontend-skills.html">前端开发工程师掌握技能</a> <em></em> </span> <span id="HotArticle" class="myart_n2" style="display: none;"> <span><a href="http://http://caibaojian.com/frontend-skills.html">前端开发工程师掌握技能</a><br /></span> <span><a href="http://http://caibaojian.com/frontend-skills.html">前端开发工程师掌握技能</a><br /></span> <span><a href="http://http://caibaojian.com/frontend-skills.html">前端开发工程师掌握技能</a><br /></span> <span><a href="http://http://caibaojian.com/frontend-skills.html">前端开发工程师掌握技能</a><br /></span> <span><a href="http://http://caibaojian.com/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='http://caibaojian.com'; 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='http://caibaojian.com' target="_blank">caibaojian.com</option> <option value='http://caibaojian.com' target="_self">wpbars.com</option> </select>

演示地址