Я пытаюсь реализовать очень простое маленькое выпадающее мини-меню, которое будет появляться, когда пользователь веб-сайта наводит курсор на изображение. Изображение представляет собой ссылку для загрузки чего-либо, а мини-меню предоставит им выбор формата (плоский файл или диаграмма).
Разметка:
<style>
ol, ul
{
list-style: none;
}
.down-list
{
position:relative;
left:0px;
top:0px;
z-index:2;
}
</style>
...
<td>
<div class="extraDownloadMenu"><img src="/AppName/Images/Icons/Download_15.gif" />
<ul class="down-list" style="display:none;">
<li>Data file</li>
<li>Chart</li>
</ul></div>
</td>
JavaScript:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('.extraDownloadMenu').hover(
function() {
$('.down-list', this).slideDown(100);
},
function() {
$('.down-list', this).slideUp(100);
});
});
</script>
Итак, меню появляется - без проблем. Проблема в том, что ячейка таблицы довольно мала и увеличивается, чтобы вместить дополнительный контент, когда отображается