怎么在更多下，加一个类似下拉框的效果？

怎么在更多下，加一个类似下拉框的效果？意思就是，鼠标移动到更多或点击更多时，出现一个下拉框，然后出现，文字4，文字5.（<li><a href="javascript:void(0)" id="tab8_4" onClick="shosearch(4);" target="_self" onFocus="this.blur
()">文字4</a></li>）等内容~<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">

</style>
<script src="http://product.pcpop.com/js/jquery.js"></script>
<script>
function subQuery()
                {
                    var searchTypeId = document.sform1.searchType.value;
                    //alert(document.sform1.searchType.value);
                    var keyWord =document.getElementById("query").value;
                    var keyWordNews =document.getElementById("query1").value;
                    var url = "";

                      switch(searchTypeId)
                        {
                            case "1":
                                url ='1';
                                break;
                            case "2":
                                url ='1';
                                break;
                            case "3":
                                     url ='1';
                                break;

                        }
                        var formSubmit =document.getElementById('sform1');
                        formSubmit.action=url;
                        //formSubmit.submit();
                        //return false;

                }


function shosearch(sid)
    {
        var searchform = document.sform1.searchType;
        var hform = document.sform1;
        searchform.value=sid;
        for(var si =1;si<=3;si++)
        {
           document.getElementById("tab8_"+si).className="";
        }
        document.getElementById("tab8_"+sid).className="here";
        var keyWord =document.getElementById("query").value;
        var keyWordNews =document.getElementById("query1").value;
        switch(sid)
        {
            case 1:
                 hform.query1.style.display="none";
                 hform.query.style.display="";
                break;
            case 2:
                   hform.query1.style.display="";
                   hform.query.style.display="none";
                break;
            case 3:
                 hform.query1.style.display="";
                 hform.query.style.display="none";
                break;
            default:
                 hform.query.style.display="";
                 hform.query1.style.display="none";
                break;
        }
        if (sid==1)
        {
           if (keyWordNews!="")
               document.getElementById("query").value =  keyWordNews;

        }
        else
        {
           if (keyWord!="")
           {
             document.getElementById("query1").value = keyWord;
           }
        }
     }
</script>
</head>
<body>
<div class="box">
    <div class="top">
            <div class="logo"></div>
            <div class="con">
             <div class="lc">
             <ul class="tab_btn">
               <li><a class="here" href="javascript:void(0)" id="tab8_1" onClick="shosearch(1);" target="_self"
onFocus="this.blur()">文字1</a>
</li>
               <li><a href="javascript:void(0)" id="tab8_2" onClick="shosearch(2);" target="_self" onFocus="this.blur
()">文字2</a></li>
               <li><a href="javascript:void(0)" id="tab8_3" onClick="shosearch(3);" target="_self" onFocus="this.blur
()">文字3</a>
</li>
               <li><a target="_self">更多</a>
</li>
             </ul>
               <div class="wrap">

                        <div class="tab_box">
                           <div class="guang">
                            <form name="sform1" id="sform1" method="post" target="_blank" action="" onSubmit="subQuery();">
                              <input type="text" class="zltsearch_i" id="query" name="query" value="" /><input type="text"
class="zltsearch_i" id="query1" name="query1" style="display:none;" onClick="sform1.query.value=''" /><input type="submit"
class="zltsearch_s" id="btnFSearch" value="搜索" /><input type="hidden" value="1" name="searchType" id="searchType">
                            </FORM>
                           </div>
                           <div class="keyword">
                            <script src="1.js"></script>
                           </div>
                        </div>



               </div>
        </div>
         <div class="ls">
           <ul>
             <li></li>
            </ul>
           </div>
     </div>
    </div>

</div>
</body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

搞得这么复杂  直接hover不就可以了
<style type="text/css">
body{width:500px;margin:0 auto;}
* {margin:0;padding:0;font-size:12px;}
.menu li {float:left;list-style:none;position:relative;}
.menu a {display:block;height:32px;width:100px;line-height:32px;background:#a9ea00;color:red;text-decoration:none;text-align:center;}
.menu a:hover {background:#5C5C5C;color:#fff;}
.menu ul ul {visibility:hidden;position:absolute;left:0px;top:32px;}
.menu ul li:hover ul{visibility:visible;}
</style>
<div class="menu">
<ul>
<li>
<a href="#">1</a>
<ul>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
</ul>
</li>
<li>
<a href="#">2</a>
<ul>
<li><a href="#">21</a></li>
<li><a href="#">22</a></li>
</ul>
</li>
<li>
<a href="#">3</a>
<ul>
<li><a href="#">31</a></li>
<li><a href="#">32</a></li>
</ul>
</li>
<li>
<a href="#">4</a>
<ul>
<li><a href="#">41</a></li>
<li><a href="#">41</a></li>
</ul>
</li>
</ul>
用ajax， <div>更多</div>  点击后触发事件，返回下拉框，然后替掉div里面的内容
找个jquery插件就解决了,没必要这么麻烦
ajaxvar xmlHttpfunction showHint(str)
{
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("浏览器不支持HTTP请求，请更换一个浏览器")
  return
  }
var url="gethint.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}
return xmlHttp;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">

</style>
<script src="http://product.pcpop.com/js/jquery.js"></script>
<script>
function subQuery()
                {
                    var searchTypeId = document.sform1.searchType.value;
                    //alert(document.sform1.searchType.value);
                    var keyWord =document.getElementById("query").value;
                    var keyWordNews =document.getElementById("query1").value;
                    var url = "";

                      switch(searchTypeId)
                        {
                            case "1":
                                url ='1';
                                break;
                            case "2":
                                url ='1';
                                break;
                            case "3":
                                     url ='1';
                                break;

                        }
                        var formSubmit =document.getElementById('sform1');
                        formSubmit.action=url;
                        //formSubmit.submit();
                        //return false;

                }


function shosearch(sid)
    {
        var searchform = document.sform1.searchType;
        var hform = document.sform1;
        searchform.value=sid;
        for(var si =1;si<=3;si++)
        {
           document.getElementById("tab8_"+si).className="";
        }
        document.getElementById("tab8_"+sid).className="here";
        var keyWord =document.getElementById("query").value;
        var keyWordNews =document.getElementById("query1").value;
        switch(sid)
        {
            case 1:
                 hform.query1.style.display="none";
                 hform.query.style.display="";
                break;
            case 2:
                   hform.query1.style.display="";
                   hform.query.style.display="none";
                break;
            case 3:
                 hform.query1.style.display="";
                 hform.query.style.display="none";
                break;
            default:
                 hform.query.style.display="";
                 hform.query1.style.display="none";
                break;
        }
        if (sid==1)
        {
           if (keyWordNews!="")
               document.getElementById("query").value =  keyWordNews;

        }
        else
        {
           if (keyWord!="")
           {
             document.getElementById("query1").value = keyWord;
           }
        }
     }
</script>
</head>
<body>
<div class="box">
    <div class="top">
            <div class="logo"></div>
            <div class="con">
             <div class="lc">
             <ul class="tab_btn">
               <li><a class="here" href="javascript:void(0)" id="tab8_1" onClick="shosearch(1);" target="_self"
onFocus="this.blur()">文字1</a>
</li>
               <li><a href="javascript:void(0)" id="tab8_2" onClick="shosearch(2);" target="_self" onFocus="this.blur
()">文字2</a></li>
               <li><a href="javascript:void(0)" id="tab8_3" onClick="shosearch(3);" target="_self" onFocus="this.blur
()">文字3</a>
</li>
               <li><a target="_self" id="more1" onclick="showDiv()">更多</a></li>
             </ul>
               <div class="wrap">

                        <div class="tab_box">
                           <div class="guang">
                            <form name="sform1" id="sform1" method="post" target="_blank" action="" onSubmit="subQuery();">
                              <input type="text" class="zltsearch_i" id="query" name="query" value="" /><input type="text"
class="zltsearch_i" id="query1" name="query1" style="display:none;" onClick="sform1.query.value=''" /><input type="submit"
class="zltsearch_s" id="btnFSearch" value="搜索" /><input type="hidden" value="1" name="searchType" id="searchType">
                            </FORM>
                           </div>
                           <div class="keyword">

                           </div>
                        </div>



               </div>
        </div>
         <div class="ls">
           <ul>
             <li></li>
            </ul>
           </div>
     </div>
    </div>

</div><div id=pop style="position: absolute; display: none; background-color: red;">
      <li><a target="_self" style="cursor: hand" onclick="setText(this)">内容1</a></li>
      <li><a target="_self" style="cursor: hand" onclick="setText(this)">内容2</a></li>
      <li><a target="_self" style="cursor: hand" onclick="setText(this)">内容3</a></li>
      <li><a target="_self" style="cursor: hand" onclick="setText(this)">内容4</a></li>
      <li><a target="_self" style="cursor: hand" onclick="setText(this)">内容5</a></li>
      <li><a target="_self" style="cursor: hand" onclick="setText(this)">内容6</a></li>
      <li><a target="_self" style="cursor: hand" onclick="setText(this)">内容7</a></li>
      <li><a target="_self" style="cursor: hand" onclick="setText(this)">内容8</a></li>
</div>
<script>
function $$$(id){
  return document.getElementById(id);
}
function showDiv(){
  var more = $$$('more1');
  $$$('pop').style.left = countLeft(more) + "px";
  $$$('pop').style.top = (parseInt(countTop(more))+parseInt(more.offsetHeight)) + "px";
  $$$('pop').style.display = '';
}
//计算左边
function countLeft(obj){
  return count(obj, "offsetLeft");
}
//计算上边
function countTop(obj){
  return count(obj, "offsetTop");
}
//计算位置
function count(obj, attr){
  var offset = 0;
  while(obj){
      offset += obj[attr];
      obj = obj.offsetParent;
  }
  return offset;
}
//设置more文本
function setText(obj){
  $$$('more1').innerHTML = obj.innerHTML;
  $$$('pop').style.display = 'none';
}
</script>
</body>
</html>