下拉按钮怎么实现,类似网易邮箱上面那一排

比如按钮为     "标记为",点上去下拉有"已读","未读" 

解决方案 »

  1.   

    一个Div，再一个浮动的DIV就行了蛮
    控制好那个浮动菜单的位置
      

  2.   

    <html>  
      <style type="text/css">
    div{
    cursor:pointer;
    }
    li{
    list-style:none;
    }
      </style>  
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"/></script>
      <script type="text/javascript">  
    $(function() {
    $('li').bind('click',function() {
    $('#').html($(this).html());
    $('#state').hide(100);
    });
    })
    function show() {
    $('#state').show(100);
    }
      </script>  
      <body>  
    <div id='main'>
    <div id="" onclick="show()"/>标记为</div>
    <ul id="state" style="border:1px solid #333;display:none;width:50px;height:50px;">
    <li>已读</li>
    <li>未读</li>
    </div>
    </div>  
      </body>  
      </html>
      

  3.   

    下面是模拟163的那个例子,原理就是找到你点击的那个图片的位置,然后让div在那个位置显示就可以了.
    <script>    // 获取页面元素的Y 坐标
        function GetTop(id) {
            var obj = document.getElementById(id);
            if (!obj) return 0;
            var top = 0;
            while (obj) {
                top += obj.offsetTop;
                obj = obj.offsetParent;
            }
            return top;
        }
        // 获取页面元素的X 坐标
        function GetLeft(id) {
            var obj = document.getElementById(id);
            if (!obj) return 0;
            var left = 0;
            while (obj) {
                left += obj.offsetLeft;
                obj = obj.offsetParent;
            }
            return left;
        }    function Show() {        var divPanel = document.getElementById("divPanel");
            var divTargetHeight = document.getElementById("divTarget").style.height;
            divTargetHeight = divTargetHeight.replace("px", "");
            with (divPanel.style) {
                top = (GetTop("divTarget") + divTargetHeight*1) + "px";
                left = GetLeft("divTarget") + "px";
                position = "absolute";
                zIndex = 9999;
            }
            if (divPanel.style.display == "none") {
                divPanel.style.display = "block";
            }
            else {
                divPanel.style.display = "none";
            }    }</script><html>
    <body>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <div id="divTarget" style=" border: solid 1px blue; width: 100px; height: 30px; text-align:center; vertical-align:middle; " onclick="Show(); ">标记为
        </div>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <div id="divPanel" style="list-style-type: none; display: none; border: solid 1px gray;">
            <ul>
                <li>已读</li>
                <li>未读</li>
            </ul>
        </div>
    </body>
    </html>
      

  4.   

    5楼的不符合条件呢,你在下面两句中加上<br/>就知道咯!!!
    <div id="" onclick="show()"/>标记为</div>
    <ul id="state" style="border:1px solid #333;display:none;width:50px;height:50px;">
    你没法确定实际开发中,那个ul是紧挨着上面的div的.