I'm sorry if somebody has already answered this but I tried looking for some information and I couldn't find anything that worked. My code is below, I have my header has a Home/About/Contact/Profile system that I really enjoy, but when I hover over Profile I'm hoping I can list links to my Github/Facebook etc, how can I do this? I've tried looking at forums on this website/youtube so far but nothing yet has worked. I'm very confused and just trying to solve this issue. A recap of what I'm hoping to do is when I click or hover over the Profile box I want a list of links to be displayed, how can I do this? Thank you so much for your time and answers and again all answers are appreciated and honestly any and all comments will help almost no matter what they are, forgive my ignorance as I'm new and still trying to solve and learn HTML/CSS/JS
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<header>
<div class="Top">
<a class="active" href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<a href="#profile">Profile</a>
<input type="text" placeholder="Search..">
</div>
<div style="padding-left:16px">
</div>
</header>
<nav>
</nav>
<main>
</main>
<aside>
</aside>
<footer>
<center><sub id="sub2">Contact Me:</sub></center>
<center><sub id="sub1">JoeyCline101@gmail.com</sub></center>
</footer>
</body>
</html>
body {
margin: 0;
font-family:Andale Mono, monospace;
}
.top {
overflow: hidden;
background-color: #dfe3ee;
}
.top a {
float: left;
display:block;
color: black;
text-align:center;
padding: 15px 15px;
text-decoration: none;
font-size: 20px;
}
.top a:hover {
background-color: lightgrey;
color: darkred;
}
.active {
background-color: #44E6F2;
color: Ivory;
}
.top input[type=text] {
float: right;
padding:4px;
margin-top: 10px;
margin-right: 16px;
border: none;
font-size: 18px;
width:250px;
border-style:solid;
}
#sub1 {
color:black;
font-size:12px;
font-family:"Arial Black", Gadget, sans-serif;
}
#sub2 {
color:black;
font-size:12px;
font-family:"Arial Black", Gadget, sans-serif;
}
Aucun commentaire:
Enregistrer un commentaire