Question

我有一张包含5张图片的桌子。当用户将鼠标悬停或鼠标悬停在图像上时，我希望在图像正下方显示约5个链接。我在这里有hs和css代码jsfiddle.net/0d8gxuos。飞出的是在右边，但我想它是每张照片的底部。可能吗？

＆＃13;

/* Base CSS */
#cssmenu {padding: 0; margin: 0; border: 0;}
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {list-style: none; margin: 0; padding: 0; border: 0;}
#cssmenu ul {position: relative; z-index: 397;}
#cssmenu ul li {min-height: 1px; line-height: 1em; vertical-align: middle;}
#cssmenu ul li:hover {position: relative; z-index: 399; cursor: default;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 398; width: 100%;}
#cssmenu ul ul ul {top: 0px; left: 99%;}
#cssmenu ul li:hover > ul { visibility: visible;}
#cssmenu ul ul {top: 0px; left: 99%;}

/* Custom CSS Styles */
#cssmenu ul {width: 200px; background: #efefef;}
#cssmenu ul ul {width: 150px; }
#cssmenu ul li {padding: 7px 10px; color: #000;}
#cssmenu ul li.hover,
#cssmenu ul li:hover {background: #ccc; color: #fff;}
#cssmenu ul a:link,
#cssmenu ul a:visited {color: #000; text-decoration: none;}
#cssmenu ul a:hover {color: #000;}
#cssmenu ul a:active {color: #ffa500;}

＆＃13;

<div id='cssmenu'>
<ul>
   <li><img src="http://s1.2mdn.net/viewad/4601119/200x60_logo.png" alt="http://s1.2mdn.net/viewad/4601119/200x60_logo.png" /></li>
   <li><img src="http://static1.squarespace.com/static/51009bd0e4b0f1d8c3160fda/t/5575d9c5e4b09a6eed955b29/1433786822030/BJy1VKFe.png" alt="" />
      <ul>
         <li><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

<table border="1" cellpadding="1" cellspacing="1" style="width: 100%;">
	<tbody>
		<tr>
			<li>
      <td><img alt="CNN" src="http://static1.squarespace.com/static/51009bd0e4b0f1d8c3160fda/t/5575d9c5e4b09a6eed955b29/1433786822030/BJy1VKFe.png" style="width: 100px; height: 100px;" /></td>
      
      <ul>
               <li><a href='#'><span>CNN Item 1</span></a></li>
               <li><a href='#'><span>CNN Item 2</span></a></li>      
      </ul>
      
      </li>
      
			<td><img alt="E-Trade" src="http://s1.2mdn.net/viewad/4601119/200x60_logo.png" style="width: 100px; height: 30px;" /></td>
			<td><img alt="NBC" src="http://sliptalk.s3.amazonaws.com/wp-content/uploads/2014/07/08195333/Screen-Shot-2014-07-08-at-1.41.24-PM.png" style="width: 100px; height: 89px;" /></td>
			<td><img alt="ABC" src="http://www.brandsoftheworld.com/sites/default/files/styles/logo-thumbnail/public/092015/abc_network_logo.png?itok=M5JV7TOM" style="width: 100px; height: 100px;" /></td>
			<td><img alt="FOX" src="http://vignette4.wikia.nocookie.net/logopedia/images/b/b2/Fox1987.png/revision/latest?cb=20140131183312" style="width: 100px; height: 76px;" /></td>
		</tr>
	</tbody>
</table>

＆＃13;

Answer 1

#cssmenu ul ul {bottom: 0px; left: 0;}代替#cssmenu ul ul {top: 0px; left: 99%;}

我还添加了这个：#cssmenu li li {background: red;}，以便您可以正确地看到更改。

以下是结果的小提琴：http://jsfiddle.net/0d8gxuos/2/

CSS悬停在Image上的效果，以显示图像下方的链接

1 个答案: