тег <a> перед <li> выдает ошибку в валидаторе HTML

[Nailya]

Добрый день.

 

Я использую адаптивную верстку. Вот ссылка на сайт: http://test.w-complex.ru/w_complex/complex.php.

В разделе портфолио, при наведении курсора мыши на картинку, появляеся синий фон с крестиком, весь синий фон являеся ссылкой, как и задумывалось.

Для этого я поставила тег <a> перед <li>, но валидатор html выдает ошибку вот такую:

 

Line 183, Column 40: Element a not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

…                           <a href="#"><li class="one_li">Compatible with popu…

То есть нельзя тег <a> использовать внутри элемента <ul>, как только тег <a> помещаю внутри <li>, то в валидаторе ошибка исчезает, но тогда только текст становится ссылкой, а не весь синий фон.

<ul class="ul_portfolio">                            <a href="#"><li class="one_li">Compatible with popular<br> plugins</li></a></ul>

.portfolio .ul_portfolio li{    width:24.9%;    float:left;    padding-bottom:20px;    padding-top:17%;}.portfolio .ul_portfolio .one_li{    background:#fff url(img/pic1.jpg) no-repeat 0 0;    background-size:100%;}.portfolio .ul_portfolio li:hover{    background:#4fc1e9 url(img/krest.png) no-repeat 50% 30%;    color:#fff;}

Вопрос, как можно сделать так, чтобы весь синий фон был ссылкой, и при этом был валидным код?

[ryter]

ссылку в li 

[DivMan]

Немного не потеме. Я бы меню через медиа запросы бы сделал, а то когда браузер сильно сжимаешь, оно некрасиво смотрится.

[SelenIT]

ссылку в li

...и ей display:block

[Nailya]

Немного не потеме. Я бы меню через медиа запросы бы сделал, а то когда браузер сильно сжимаешь, оно некрасиво смотрится.

Сайт еще не доделан, да собираюсь медиа запросы использовать и другую структуру меню

 

ссылку в li

...и ей display:block

 

попробую