I'm trying to make the page just for exercise, and I had a problem, so if you run the code, the logo should be in the top center than the menu below it .. but it falls in the background, please help 1. How to add a drop-down list for every three menu list items where I can add text, images and location.
body {
background-color:lightgray;
font-family: Tahoma, Cambria;
}
#header {
height: 300px;
}
#logo {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
}
#menu {
position: relative;
max-height:60px;
font-family: Cambria;
font-style: bold, italic;
text-align: center;
}
#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
float:none;
}
#menu li a {
display:inline-block;
color:#009CFF;
padding: 10px 200px;
overflow:hidden;
transition: 0.3s;
font-style:italic;
font-weight: bold;
text-decoration:none;
margin: 0 0 0 0;
}
#menu li a:hover {
background-color: dimgray;
color: deepskyblue;
}
body {
border: 2px solid dark-gray ;
}
l>
<!DOCTYPE html >
<html>
<head>
<title></title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<header>
<img src = "http://via.placeholder.com/350x150" id = "logo" alt = "Antomatik logo"/>
</header>
<div id = "menu">
<ul>
<li class="onama">
<a href="antomatik/onama.html">O nama</a></li>
<li class="povijest">
<a href="antomatik/povijest.html">Povijest</a></li>
<li class="kontakt">
<a href="antomatik/kontakt.html">Kontakt</a></li>
</ul>
</div>
<footer>
</footer>
</body>
</html>
source
share