Question

我正试图在悬停框内找到一个子弹列表，但它出现在外面。链接

需要将它放在悬停盒内。将它放在盒子里会很棒。对此有什么正确的方法？

＆＃13;

span{
        background:#F8F8F8;
        border: 5px solid #DFDFDF;
        color: #717171;
        font-size: 13px;
        height: 30px;
        letter-spacing: 1px;
        line-height: 30px;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        top: -80px;
        left:-30px;
        display:none;
        padding:0 20px;
        
    }
    
    p{
        margin:100px;
        float:left;
        position:relative;
        cursor:pointer;
    }
    
    p:hover span{
        display:block;
    }

＆＃13;

    <p>Hover here<span>
    
    <ul>  
        <li>mark</li>
        <li>john</li>
        <li>Katty</li>
    </ul>    
    </span></p>

＆＃13;

Answer 1

尝试更类似的内容：http://jsfiddle.net/kzd1zw6c/4/

<div>Hover here
    <ul>  
        <li>mark</li>
        <li>john</li>
        <li>Katty</li>
    </ul>
</div>

它更简单，你并没有试图将ul置于p（和span）内，这不仅没有真的很有意义，但它过于复杂。你必须调整你的造型，但这种方法更容易纠结。

有一些风格...... http://jsfiddle.net/kzd1zw6c/6/

Answer 2

如何在UL标签中添加一些样式。您可以将其定位为绝对值，然后应用left，top将其置于弹出框的中心，然后您可以通过z-index将其置于前面。

子弹列表里面的子弹列表CSS

2 个答案: