悬停框内的项目符号列表CSS

-2

我试图在悬停框内获得一个项目符号列表，但它显示在外面。链接悬停框内的项目符号列表CSS

需要得到它悬停箱内。把它放在盒子里很好。什么才是正确的方法呢？

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; 
 
    }

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

来源

2014-09-26 krs8785

你不能在'p'中做'ul'。改用'div'。而且你不能在一个内联元素'span> ul'中放置一个块元素！ – loveNoHate 2014-09-26 14:16:14

我做到了。它确实在盒子里面..但是我如何增加盒子来自动适合列表大小？ – krs8785 2014-09-26 14:18:56

刷新行内与块的元素，以及你应该如何嵌套它们将在这里帮助你很多。 – 2014-09-26 14:19:23

尝试更多的东西是这样的：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/

来源

2014-09-26 14:23:24

小提琴不工作 – Suresh 2014-09-26 14:24:17

它不工作？ ul在“悬停”区域内呈现。它不再是风格，但krs从未指定它应该如何风格。 – 2014-09-26 14:29:43

我做了什么可能是错误的，但它不应该像http://jsfiddle.net/krs8785/kzd1zw6c/7/ – krs8785 2014-09-26 14:32:19

-3

如何添加一些风格UL标签。你可以将它定位到绝对位置，然后应用left，top将它放到弹出框的中心，然后通过z-index将它放到前面。

来源

2014-09-26 14:22:59 Sadik

谢谢。我肯定会这样做 – krs8785 2014-09-26 14:23:52

小提琴相同：http://jsfiddle.net/kzd1zw6c/5/ – Sadik 2014-09-26 14:25:06

添加绝对定位到一个混乱的布局不是一个好的解决方案。在许多情况下，需要使用绝对定位来强制某些东西到达您想要的位置，这是您需要退后一步并重新设计html的标志。 – 2014-09-26 14:25:13

悬停框内的项目符号列表CSS

回答

相关问题