Проблема с меню наведения по ссылке

Я пытаюсь получить ссылку (), содержащую изображение, когда ссылка зависеть от того, что под ней появляется меню зависания (в данном случае одна кнопка). Появится кнопка, я хочу иметь ссылку на нее.

HTML:

<a href="#" target="_blank">
 
 </a><ul><a href="#" target="_blank">
 </a><li>Buy</li>
 </ul>

CSS:

a {
 padding: 5px; margin: 0px;
 position: relative;
 display: inline-block;
}
a ul{
 padding: 0px; margin: 0px;
 list-style: none;
 position: absolute;
 left: -9999px;
 width: 100%;
}
a ul li{
 padding: 5px;
 background-color: black;
 white-space: nowrap;
 text-align: center;
}
a:hover ul {
 left: 0;
}

Моя проблема в том, что когда я добавляю теги link (a) внутри тега ul css-форматирование для ul и все его потомки больше не подбирают. Надеюсь, это достаточно ясно, дайте мне знать, если вы хотите, чтобы я объяснил еще кое-что.

2 ответа

Начиная с вашего первого комментария к Adrian, вы хотите, чтобы текст ссылки отображался поверх изображения, а при наведении на изображение кнопка "Купить" будет отображаться под изображением. Предполагая, что это может сработать:

div {
 padding: 5px; margin: 0px;
 position: relative;
}
div ul{
 list-style: none;
 display: inline-block;
}
div ul li{
 padding: 5px;
 white-space: nowrap;
 text-align: center;
 margin-bottom: 10px;
}
div ul li a{
 position: relative;
}
div ul li a span{
 position: absolute;
}
div ul li button{
 visibility: hidden;
}
div ul li:hover button{
 visibility: visible;
}

и HTML что-то вроде:

<div>
 <ul>
 <li><a href="#" target="_blank"><span>Description</span></a>
 <button>Buy Image 1</button>
 </li>
 <li><a href="#" target="_blank"><span>Description</span></a>
 <button>Buy Image 2</button>
 </li>
 </ul>
</div>


Синтаксис "неправильный". Элементы блока в встроенных элементах запрещены по спецификации. Если вам нужно создать меню на основе списка, установите "Подменю" после Link-Tag:

<ul>
 <li>
 <a href="#" target="_blank">Your Link</a>
 <ul>
 <li><a href="#" target="_blank">Sublink</a></li>
 </ul>
 </li>
 </ul>

licensed under cc by-sa 3.0 with attribution.