положить меню в нижней части изображения (внутри изображения)

Question

Мне нужно поместить меню, прикрепленное к нижней части изображения, но не снаружи изображения. Я использую HTML, CSS с начальной загрузкой 4, я немного разбираюсь в CSS, надеюсь, вы мне поможете.

У меня что-то подобное (навигация вниз по изображению, но снаружи)

, и мне нужно что-то вроде этого (меню внизу изображения)

У меня есть этот код

<img src="car.png">
        <ul>
                <li>
                    <a> HOME</a>
                </li>

                <li>
                    <a href="#contact">NEWS</a>
                </li>
                <li>
                    <a href="#about">CONTACT</a>
                </li>
            </ul>

Answer 1

Исходя из вашего описания, я думаю, что вы хотите что-то вроде этого.

Сверните ваш код в один div и установите position в relative, чем в ul тег position absolute с bottom 0;

Надеюсь, это поможет ...

* {
  margin: 0;
}

img {
  width: 100%;
  height: 100%;
}
.parent{
  position:relative;
}

ul {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: gray;
  color: white;
}

<div class="parent">
  <img src="http://1.bp.blogspot.com/-CGiYA8pN7HM/T_bKK0hOrpI/AAAAAAAACVQ/-ws96c-wkB8/s1600/audi-r8-v12-tdi-concept-2008-797153.jpg">
<ul>
  <li>
    <a> HOME</a>
  </li>

  <li>
    <a href="#contact">NEWS</a>
  </li>
  <li>
    <a href="#about">CONTACT</a>
  </li>
</ul>
</div>