ul navigation over image

Question

Ich habe versucht, eine UL-Navigation über ein Bild ohne Erfolg zu platzieren.

<header> 
    <img src="images/header3.jpg" alt="header"> 
    <ul> 
     <a href="#"><li>Home</li></a> 
     <a href="#"><li>Store</li></a> 
     <a href="#"><li>About</li></a> 
     <a href="#"><li>Contact</li></a> 
    </ul> 
</header> 

Ich habe um mit verschiedenen Positionen wie festes Messing (nicht das, was auch Thoe Ich suche es funktioniert) und absolut. Ich habe auch versucht, das Bild in CSS hinzuzufügen, aber es führt nicht zu guten Ergebnissen. Einschließlich versucht, die meisten Tags zu divs zu ändern, versuchte verschiedene Tags wie Überschrift Elemente.

Ich versuche, die Navigation in der rechten oberen Ecke oben auf dem Bild zu erhalten.

Hinweis: Warum verwende ich das Tag vor li ist einfach wegen schwebender Effekte.

header img { 
width:100%; 
position:relative; 
} 

header ul { 
position:absolute; 

} 

header li { 
float:left; 
list-style-type:none; 
font-size:25px; 
margin-left:2%; 
color:black; 
text-decoration:none; 
border:1px solid black; 
padding:0.5%; 
} 

http://imgur.com/a/CcmaL wie gewünscht.

Answer 1

Versuchen Sie folgendes:

div.wrapper{width:800px;height:500px;background-image: url("https://i.ytimg.com/vi/F2UFAV24QII/maxresdefault.jpg");} 
 
div.bar{float:right;}

<div class="wrapper"> 
 

 
<div class="bar"> 
 
<button>Home</button> 
 
<button>About</button> 
 
<button>Content</button> 
 
</div>

Sie benötigt Hintergrund-Bild-Funktion von CSS3 zu verwenden.

Answer 2

Bitte aktualisierten Code hier: http://codepen.io/jasjain/pen/aBjEjg

header { 
    position: relative; 
} 

header, 
header img { 
    width: 100%; 
} 

header ul { 
    position: absolute; 
    width: 99%; 
    padding: 0; 
    right: 1%; 
    top: 1%; 
    text-align: right; 
} 

header li { 
display: inline-block; 
list-style-type: none; 
font-size: 25px; 
margin-left: 2%; 
color: #fff; 
text-decoration: none; 
border: 1px solid #fff; 
padding: 1% 3%; 
text-align: center; 
} 

I Position hinzugefügt haben: realtive; auf Kopfzeile, anstelle von Bild in der Kopfzeile.
Ich habe auch Positionseigenschaften für UL hinzugefügt.