悬停框内的项目符号列表CSS
问题描述:
我试图在悬停框内获得一个项目符号列表,但它显示在外面。链接悬停框内的项目符号列表CSS
http://jsfiddle.net/krs8785/kzd1zw6c/
需要得到它悬停箱内。把它放在盒子里很好。什么才是正确的方法呢?
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>
答
尝试更多的东西是这样的: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/
你不能在'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