I have no idea why my drop down menu that im trying to include is not appearing and i cant seem to find whats wrong, i saw that the only way for it to appear is to remove hidden but if i do that i doesnt look how i want it to, yet if i have the hidden when i hover over the servicios tab its not showing anything which i cannot find the reason on why it doesnt appear there
{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.hero{
height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.6)), url(bp.jpg);
background-position: center;
background-size: cover;
overflow-x: hidden;
position: relative;
}
.nav_bar{
display: flex;
padding: 40px 120px;
}
.nav-logo img{
width: 135px;
}
.nav_links{
flex: 1;
}
.nav_links ul{
margin-left: 50px;
display: inline;
list-style: none;
}
.nav_links ul li{
list-style: none;
display: inline-block;
padding: 8px 25px;
}
.nav_links ul a{
color: #fff;
text-decoration: none;
font-size: 18px;
}
.nav_links ul li::after{
content: '';
width: 0;
height: 2px;
background: red;
display: block;
margin: auto;
transition: 0.45s;
}
.nav_links ul li:hover::after{
width: 100%;
}
.btn{
padding: 10px 10px;
border: 0;
background: red;
font-weight: bold;
cursor: pointer;
}
.nav_links .btn{
float: center;
}
.frase{
margin: 100px 130px;
color: #fff;
}
.frase h1{
font-size: 56px;
margin-bottom: 30px;
}
.vertical_bar{
height: 100%;
background: red;
top: 0;
left: 0;
position: absolute;
}
.icono_busqueda{
height: 60%;
width: 80px;
}
.icono_busqueda .fa{
margin: 45px 23px;
display: block;
color: white;
font-size: 30px;
cursor: pointer;
}
.iconos_sociales{
height: 60%;
width: 80px;
}
.iconos_sociales .fa{
margin: 45px 23px;
display: block;
color:black;
font-size: 30px;
cursor: pointer;
}
.iconos_sociales{
height: 35%;
width: 80px;
background: white;
text-align: center;
padding-top: 27%;
bottom: 0;
position: absolute;
}
.iconos_sociales .fa{
margin: 15px 15px;
display: block;
padding: 8px;
border: 1px solid black;
border-radius: 0;
cursor: pointer;
}
*{
margin: 0;
padding: 0;
}
.sub_menu_ser
{
display: none;
}
.nav_links ul li:hover .sub_menu_ser
{
display: block;
position: absolute;
background: red;
margin-top: 15px;
margin-left: -15px;
}
.nav_links ul li:hover .sub_menu_ser ul
{
display: block;
margin: 10px;
}
.nav_links ul li:hover .sub_menu_ser li
{
width: 150px;
padding: 10px;
border-bottom: 1px dotted white;
background: transparent;
border-radius: 0;
text-align: left;
}
:last-child
{
border-bottom: none;
}
.nav_links ul li:hover .sub_menu_ser ul li a:hover
{
color: red;
}
<html>
<head>
<title> Animal Care</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="hero">
<div class="nav_bar">
<div class="nav_logo">
<img src="logo.png">
</div>
<div class="nav_links">
<ul>
<li>Sobre Nosotros</li>
<li>Servicios</li>
<div class="sub_menu_ser">
<ul>
<li>Peluqueria</li>
<li>Veterinario</li>
<li>Cirugia</li>
<li>Limpieza</li>
</ul>
</div>
<li>Contacto</li>
</ul>
<button type="button" class="btn">Registrarse</button>
</div>
<div class="frase">
<h1>Cuidando a Nuestros <br> Mas Queridos</h1>
<button type="button" class="btn">Explorar</button>
</div>
<div class="vertical_bar">
<div class="icono_busqueda">
<i class="fa fa-search"></i>
<i class="fa fa-list"></i>
</div>
<div class="iconos_sociales">
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-envelope-o"></i>
</div>
</div>
</div>
</body>
</html>
Code to hide the element:
#element {
display: none;
}
Code to show the element:
#element:hover {
display: block;
}
Related
i have a proplem with my navbar
the content comes up on my navbar
so can any one help me to fix it
i useing django include to get the navbar
so can any one help me plese
the image
some text pec there a err while post the q
some text pec there a err while post the q
some text pec there a err while post the q
some text pec there a err while post the q
.................................................
this is my code
{% block content %}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
{% if user.is_authenticated %}
<div class="wrapper">
<nav>
<input type="checkbox" id="show-search">
<input type="checkbox" id="show-menu">
<label for="show-menu" class="menu-icon"><i class="fas fa-bars"></i></label>
<div class="content">
<li class="logo"><a class="alog" href="#">Website</a></li>
<ul class="links">
<li>Home</li>
<li>lunchers</li>
<li>resourepacks</li>
<li>aboutus</li>
<li>
More
<input type="checkbox" id="show-services">
<label for="show-services">More</label>
<ul>
<li>Create Post</li>
<li>Drop Menu 2</li>
<li>Drop Menu 3</li>
</li>
</div>
<a style="padding-top: -50px;" class="aimpro" href="{% url 'profile' user.profile.id %}"><img style="padding-top: -10px;" src="{{ user.profile.avatar.url }}" alt="Avatar" class="avatar"></a>
<label for="show-search" class="search-icon"><i class="fas fa-search"></i></label>
<form action="{% url 'sh' %}" class="search-box">
<input name="title" type="text" placeholder="Type Something to Search..." required>
<button type="submit" class="go-icon"><i class="fas fa-long-arrow-alt-right"></i></button>
</form>
</nav>
</div>
{% else %}
<div class="wrapper">
<nav>
<input type="checkbox" id="show-search">
<input type="checkbox" id="show-menu">
<label for="show-menu" class="menu-icon"><i class="fas fa-bars"></i></label>
<div class="content">
<li class="logo"><a class="alog" href="#">Website</a></li>
<ul class="links">
<li>Home</li>
<li>lunchers</li>
<li>resourepacks</li>
<li>aboutus</li>
<li>login</li>
</div>
<label for="show-search" class="search-icon"><i class="fas fa-search"></i></label>
<form action="{% url 'sh' %}" class="search-box">
<input name="title" type="text" placeholder="Type Something to Search..." required>
<button type="submit" class="go-icon"><i class="fas fa-long-arrow-alt-right"></i></button>
</form>
</nav>
</div>
{% endif %}
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
.wrapper{
background: #171c24;
position: fixed;
width: 100%;
}
.wrapper nav{
position: relative;
display: flex;
max-width: calc(100% - 200px);
margin: 0 auto;
height: 70px;
align-items: center;
justify-content: space-between;
top: 4px;
}
a .aimpro {
padding-bottom: 10px;
}
nav .content{
display: flex;
align-items: center;
text-decoration: none;
top: 10px;
}
nav .content .links{
margin-left: 40px;
display: flex;
text-decoration: none;
padding-top: 11px;
}
.content .logo .alog{
color: #fff;
font-size: 25px;
font-weight: 60;
padding-top: 0px !important;
text-decoration: none;
top: -5px;
}
.content .links .logo .alog label:hover {
background-color: #171c24;
}
.content .links li{
list-style: none;
line-height: 70px;
top: 5px;
}
.content .links li a,
.content .links li label{
color: #fff;
font-size: 18px;
font-weight: 500;
padding: 9px 17px;
border-radius: 5px;
transition: all 0.3s ease;
text-decoration: none;
top: -5px;
}
.content .links li label{
top: 5px;
display: none;
text-decoration: none;
}
.content .links li a:hover,
.content .links li label:hover{
background: #323c4e;
text-decoration: none;
}
.wrapper .search-icon,
.wrapper .menu-icon{
color: #fff;
font-size: 18px;
cursor: pointer;
line-height: 70px;
width: 70px;
text-align: center;
text-decoration: none;
top: -5px;
}
.wrapper .menu-icon{
display: none;
text-decoration: none;
top: -5px;
}
.wrapper #show-search:checked ~ .search-icon i::before{
content: "\f00d";
text-decoration: none;
top: -5px;
}
.wrapper .search-box{
position: absolute;
height: 100%;
max-width: calc(100% - 50px);
width: 100%;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
text-decoration: none;
top: -5px;
}
.wrapper #show-search:checked ~ .search-box{
opacity: 1;
pointer-events: auto;
text-decoration: none;
top: -5px;
}
.search-box input{
width: 100%;
height: 100%;
border: none;
outline: none;
font-size: 17px;
color: #fff;
background: #171c24;
padding: 0 100px 0 15px;
text-decoration: none;
top: -5px;
}
.search-box input::placeholder{
color: #f2f2f2;
text-decoration: none;
}
.search-box .go-icon{
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
line-height: 60px;
width: 70px;
background: #171c24;
border: none;
outline: none;
color: #fff;
font-size: 20px;
cursor: pointer;
text-decoration: none;
}
.wrapper input[type="checkbox"]{
display: none;
text-decoration: none;
}
/* Dropdown Menu code start */
.content .links ul{
position: absolute;
background: #171c24;
top: 80px;
z-index: -1;
opacity: 0;
visibility: hidden;
text-decoration: none;
}
.content .links li:hover > ul{
top: 65px;
padding-bottom: 5px;
padding-top: 5px;
opacity: 1;
visibility: visible;
transition: all 0.3s ease;
text-decoration: none;
}
.content .links ul li a{
display: block;
width: 100%;
line-height: 30px;
border-radius: 0px!important;
text-decoration: none;
}
.content .links ul ul{
position: absolute;
top: 0;
right: calc(-100% + 8px);
}
.content .links ul li{
position: relative;
}
.content .links ul li:hover ul{
top: 0;
}
/* Responsive code start */
#media screen and (max-width: 1250px){
.wrapper nav{
max-width: 100%;
padding: 0 20px;
}
nav .content .links{
margin-left: 30px;
}
.content .links li a{
padding: 8px 13px;
}
.wrapper .search-box{
max-width: calc(100% - 100px);
}
.wrapper .search-box input{
padding: 0 100px 0 15px;
}
}
#media screen and (max-width: 900px){
.wrapper .menu-icon{
display: block;
}
.wrapper #show-menu:checked ~ .menu-icon i::before{
content: "\f00d";
}
nav .content .links{
display: block;
position: fixed;
background: #14181f;
height: 100%;
width: 100%;
top: 70px;
left: -100%;
margin-left: 0;
max-width: 350px;
overflow-y: auto;
padding-bottom: 100px;
transition: all 0.3s ease;
text-decoration: none;
}
nav #show-menu:checked ~ .content .links{
left: 0%;
}
.content .links li{
margin: 15px 20px;
}
.content .links li a,
.content .links li label{
line-height: 40px;
font-size: 20px;
display: block;
padding: 8px 18px;
cursor: pointer;
text-decoration: none;
}
.content .links li a.desktop-link{
display: none;
text-decoration: none;
}
/* dropdown responsive code start */
.content .links ul,
.content .links ul ul{
position: static;
opacity: 1;
visibility: visible;
background: none;
max-height: 0px;
overflow: hidden;
top: -5px;
}
.content .links #show-features:checked ~ ul,
.content .links #show-services:checked ~ ul,
.content .links #show-items:checked ~ ul{
max-height: 100vh;
top: -5px;
}
.content .links ul li{
margin: 7px 20px;
top: -5px;
}
.content .links ul li a{
font-size: 18px;
line-height: 30px;
border-radius: 5px!important;
top: -5px;
}
}
#media screen and (max-width: 400px){
.wrapper nav{
padding: 0 10px;
}
.content .logo a{
font-size: 27px;
}
.wrapper .search-box{
max-width: calc(100% - 70px);
}
.wrapper .search-box .go-icon{
width: 30px;
right: 0;
}
.wrapper .search-box input{
padding-right: 30px;
}
}
.dummy-text{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
z-index: -1;
padding: 0 20px;
text-align: center;
transform: translate(-50%, -50%);
}
.dummy-text h2{
font-size: 45px;
margin: 5px 0;
}
.avatar {
vertical-align: middle;
width: 40px;
height: 40px;
border-radius: 50%;
}
</style>
{% endblock %} ```
body {
background-image: url("pirat.jpg");
}
h1{
font-size :100px;
}
h3{
font-size :50px;
}
<style type="text">
*{
box-sizing: border-box;
outline: none;
}
body{
margin: 0;
padding: 0;
}
.container{
width: 100%;
height: 100px;
margin: 0;
padding: 0;
}
img{
width: 100%;
height: 100vh;
}
.container nav{
position: absolute;
width: 100%;
top: 0;
height: 60px;
background-color: #383838;
color: white;
}
nav ul{
float: right;
list-style: none;
margin: 0;
padding: 0;
width: 600px;
}
nav li{
display: inline-block;
line-height: 56px;
margin:0 25px;
}
nav li a{
display: block;
color: white;
text-decoration: none;
font-size: 13px;
transition: .5s all;
}
a:hover{
color:#808080;
border-bottom: 5px solid white;
}
#myInput{
position: relative;
margin-top: 10px;
padding: 5px 10px 5px 20px;
width: 2300x;
height: 25px;
border-bottom: 2px solid#006699;
font-size: 15px;
color: #006699;
border-radius: 50px;
align-items: center;
float: right;
z-index: 0;
}
#btn{
display: none;
}
.check{
font-size: 30px;
color: white;
float: right;
line-height: 60px;
margin-right: 20px;
margin-left: 10px;
cursor: pointer;
transform: rotate(-90deg);
display: none;
}
#media(max-width: 800px){
nav ul{
position: fixed;
width: 40%;
height: 100vh;
top: 60px;
left: 100%;
text-align: center;
background-color: #2c3e50;
transition: all .5s;
}
nav ul li{
display: block;
}
nav ul li a{
font-size: 20px;
color: white;
}
.check{
display: block;
}
#btn:checked ~ ul{
left: 60%;
}
#media(max-width: 500px){
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px; color: black;
display: block;
}
#myUL li a:hover:not(.header) {
background-color: #eee; /* Add a hover effect to all links, except for headers */
}
.text input:focus + .hide {
display: block !important;
}
.hide {
display: none;
}
.container { position: relative; }
<html>
<head><title>Home</title>
<font color="white">
<center>
<h1></h1>
</center>
<link rel="stylesheet" type="text/css" href="Principala.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<font color="white">
<div class="relative">
<font color = "blue">
<h3></h3>
<div class="container">
<nav>
<input type="checkbox" name="" id="btn">
<label for="btn" class="check">!!!</label>
<div class="search"><input type="text" id="myInput" onkeyup="myFunction()" placeholder="search engine"></div>
<ul>
<li>HOME</li>
<li>SERVICE</li>
<li>CONTACT</li>
<li>FAQ</li>
<li>ABOUT US</li>
</ul>
</nav>
<div class=hide>
<ul id="myUL">
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li></ul></div>
<script src="Principala.js"></script>
</script>
</body>
</html>
What is wrong? The suggestions don't want to show when I write in the search box
I am currently building a dashboard for a project I'm workig on - as i didn't touch css for years now i kinda struggle with a side Nav Bar.
<div id="nav">
<div id="nav-wrapper">
<ul>
<li><i class="fas fa-home"></i></li>
<li><i class="fas fa-home"></i></li>
<li><i class="fas fa-home"></i></li>
<li><i class="fas fa-home"></i></li
<li><i class="fas fa-home"></i></li>
</ul>
</div> <!--End of nav-wrapper-->
</div> <!--End of nav-->
#nav{
width: 10%;
height: 100%;
background-color: #273138;
position: fixed;
a{
color: white;
text-decoration: none;
}
#nav-wrapper{
padding: 30px 0px 30px;
font-size: 2em;
}
}
This is what my navbar basicaly looks like. I want the elements centered and rounded - similarly to the style discord uses for it's server list (Link)
Any idea how i can build this in css?
I have created a solution in JSFiddle
JSFiddle
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
#nav {
width: 10%;
height: 100%;
background-color: #273138;
position: fixed;
}
#nav-wrapper {
font-size: 1.5em;
}
#nav-wrapper ul {
display: block;
}
#nav-wrapper li {
list-style: none;
background-color: #d24d57;
height: 50px;
width: 50px;
margin: 10px auto;
border-radius: 100%;
text-align: center;
line-height: 50px;
}
#nav-wrapper li a {
color: white;
text-decoration: none;
}
I have made something, does it looks like what you want?
body{
margin: 0px;
}
#nav {
height: 100%;
width: 10%;
background-color: #273138;
position: fixed;
}
#nav-wrapper{
display: flex;
justify-content: center;
align-items: center;
}
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
li{
margin-top: 2px;
background-color: orange;
border-radius: 100%;
padding: 5px;
font-size: 2em;
}
a{
color: white;
text-decoration: none;
}
plus, this is not recommended to nest classes
I hope this can help you.
body {
background-color: #36393e;
}
#nav {
width: auto;
height: 100%;
background-color: #1f2125;
position: fixed;
}
#nav ul {
list-style: none;
padding-left: 0;
margin: 0;
position: relative;
padding-top: 20px;
padding-bottom: 20px;
}
#nav ul::before {
position: absolute;
content: '';
top: 15px;
left: 25%;
background-color: #2E3136;
width: 50%;
height: 1px;
}
#nav ul::after {
position: absolute;
content: '';
bottom: 15px;
left: 25%;
background-color: #2E3136;
width: 50%;
height: 1px;
}
#nav ul li {
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
margin: 10px;
}
#nav a {
background-color: #2E3136;
border-radius: 100%;
padding: .5em;
color: white;
text-decoration: none;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
#nav a {
animation: hover-out 0.6s ease;
}
#nav a:hover, #nav a:focus {
animation: hover-in 0.8s ease forwards;
}
#nav a i {
font-size: 1em;
}
#nav #nav-wrapper {
font-size: 2em;
}
#keyframes hover-in {
0% {
border-radius: 100%;
background-color: #2E3136;
}
40% {
border-radius: 12px;
}
70% {
border-radius: 16.7px;
}
80% {
background-color: #7289DA;
}
100% {
border-radius: 15px;
background-color: #7289DA;
}
}
#keyframes hover-out {
0% {
border-radius: 15px;
background-color: #7289DA;
}
45% {
border-radius: 70%;
background-color: #2E3136;
}
65% {
border-radius: 70%;
}
75% {
border-radius: 75%;
}
100% {
border-radius: 100%;
}
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="nav">
<div id="nav-wrapper">
<ul>
<li><i class="fa fa-home"></i></li>
<li><i class="fa fa-home"></i></li>
<li><i class="fa fa-home"></i></li>
<li><i class="fa fa-home"></i></li>
<li><i class="fa fa-home"></i></li>
</ul>
</div> <!--End of nav-wrapper-->
</div> <!--End of nav-->
Editing and adding code to snippet .This is the full code extraced from the below two links.
body {
font-family: 'Alegreya Sans', sans-serif;
overflow-x: hidden;
background: gray;
color: white;
}
#content {
padding: 15px;
transition: margin-left 0.7s;
overflow: hidden;
width: 100%;
}
.slide a {
color: #000;
font-size: 36px;
}
.nav .close {
position: absolute;
top: 8px;
right: 22px;
margin-left: 50px;
font-size: 30px;
color: #ccc;
}
.nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #282828;
overflow-x: hidden;
padding-top: 60px;
transition: 0.7s;
}
.nav a.item {
display: flex;
flex-direction: row;
padding: 18px 30px;
font-size: 30px;
text-decoration: none;
color: #ccc;
background-color: #3d3d3d;
border-top: 1px solid #ccc;
}
.nav .last {
border-bottom: 1px solid #ccc;
}
.nav a.item:hover {
color: #fff;
background-color: #cf0000;
transition: 0.4s;
}
.nav .icon {
padding-right: 10px;
font-size: 35px;
}
.nav ul {
display: flex;
position: absolute;
width: 100%;
margin-top: 50px;
}
.nav ul li {
list-style: none;
}
.nav ul li a.inline {
font-size: 26px;
color: #ccc;
padding: 6px 5px 3px;
}
.nav ul li a.inline:hover {
color: #cf0000;
}
.content p{
font-size: 18px;
text-align: center;
margin-left: 310px;
}
.footer-home{
position: fixed;
left: 0;
bottom: 0;
width:100%;
height: auto;
background-color:#282828;
color: white;
padding: 10px;
text-align: center;
}
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<script src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<link rel="stylesheet" href="style.css">
<script>
function openSlideMenu(){
document.getElementById('menu').style.width = '250px';
document.getElementById('content').style.marginLeft = '250px';
}
function closeSlideMenu(){
document.getElementById('menu').style.width = '0';
document.getElementById('content').style.marginLeft = '0';
}
</script>
</head>
<body>
<div id="content">
<span class="slide">
<a href="#" onclick="openSlideMenu()">
<i class="fas fa-bars"></i>
</a>
</span>
<div id="menu" class="nav">
<a href="#" class="close" onclick="closeSlideMenu()">
<i class="fas fa-times"></i>
</a>
<img src="#" alt="" width="150" height="100">
<i class="fas fa-home icon"></i>Home
<i class="fas fa-desktop icon"></i>Dashboards
<i class="fas fa-map-marker icon"></i>Engagements
<i class="fab fa-wpforms icon"></i>Contact
<ul>
Can't get dropdown to work.
Tried several ways to make dropdown active.
html - http://textsnip.com/nau26f
css - http://textsnip.com/dyk75z
Trying to make dropdown active when hovering over dashboards. Any help would be greatly appreciated.
Here's my solution
function openSlideMenu(){
document.getElementById('menu').style.width = '250px';
document.getElementById('content').style.marginLeft = '250px';
}
function closeSlideMenu(){
document.getElementById('menu').style.width = '0';
document.getElementById('content').style.marginLeft = '0';
}
body {
font-family: 'Alegreya Sans', sans-serif;
overflow-x: hidden;
background: gray;
color: white;
}
#content {
padding: 15px;
transition: margin-left 0.7s;
overflow: hidden;
width: 100%;
}
.slide a {
color: #000;
font-size: 36px;
}
.nav .close {
position: absolute;
top: 8px;
right: 22px;
margin-left: 50px;
font-size: 30px;
color: #ccc;
}
.nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #282828;
overflow-x: hidden;
padding-top: 60px;
transition: 0.7s;
}
.nav a.item {
display: flex;
flex-direction: row;
padding: 18px 30px;
font-size: 30px;
text-decoration: none;
color: #ccc;
background-color: #3d3d3d;
border-top: 1px solid #ccc;
}
.nav .last {
border-bottom: 1px solid #ccc;
}
.nav a.item:hover {
color: #fff;
background-color: #cf0000;
transition: 0.4s;
}
.nav .icon {
padding-right: 10px;
font-size: 35px;
}
.nav ul {
display: flex;
position: absolute;
width: 100%;
margin-top: 50px;
}
.nav ul li {
list-style: none;
}
.nav ul li a.inline {
font-size: 26px;
color: #ccc;
padding: 6px 5px 3px;
}
.nav ul li a.inline:hover {
color: #cf0000;
}
.content p{
font-size: 18px;
text-align: center;
margin-left: 310px;
}
.footer-home{
position: fixed;
left: 0;
bottom: 0;
width:100%;
height: auto;
background-color:#282828;
color: white;
padding: 10px;
text-align: center;
}
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
.dropbtn {
display: flex;
flex-direction: row;
padding: 18px 30px;
font-size: 30px;
text-decoration: none;
color: #ccc;
background-color: #3d3d3d;
border-top: 1px solid #ccc;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
width: 100%;
}
.dropdown-content a {
display: flex;
width: 100%;
flex-direction: row;
padding: 18px 30px;
font-size: 30px;
text-decoration: none;
color: #ccc;
background-color: #3d3d3d;
border-top: 1px solid #ccc;
}
.dropdown-content a:hover {background-color: #cf0000;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #cf0000;}
<script src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<div id="content">
<span class="slide">
<a href="#" onclick="openSlideMenu()">
<i class="fas fa-bars"></i>
</a>
</span>
<div id="menu" class="nav">
<a href="#" class="close" onclick="closeSlideMenu()">
<i class="fas fa-times"></i>
</a>
<img src="#" alt="" width="150" height="100">
<i class="fas fa-home icon"></i>Home
<div class="dropdown">
<a class="dropbtn">
<i class="fas fa-desktop icon"></i>
Dashboards
</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<a href="maps.html" class="item">
<i class="fas fa-map-marker icon"></i>
Engagements
</a>
<a href="contact.html" class="item last">
<i class="fab fa-wpforms icon"></i>
Contact
</a>
</div>
</div>
I am a new learner of CSS and I have a problem with the position of dropdown menu, does not stay on hover. I have done some testing and I found that the problem is the position of left element because when I chance the value of left, the dropdown stay on hover and it lets do it but it is not in its position.
I do not know how to fix it, I will appreciate any help of anyone.
/* Grid View*/
* {
box-sizing: border-box;
}
/* Body Size*/
body {
background-color: white;
position: relative;
margin-right: 150px;
margin-left: 150px;
margin-top: 20px;
}
/*Header*/
header {
position: fixed;
top: 0;
margin: 80%;
height: 100px;
background-color: whitesmoke;
color: black;
padding: 10px;
text-align: center;
}
/* Header <Logo> */
logo {
position: fixed;
left: 180px;
top: 0px;
width: 250px;
height: 140px;
}
/* Header < Social Bar>*/
.icon-bar {
width: 100px;
overflow: auto;
}
/* Social Icons */
.icon-bar {
float: right;
width: 30%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
top: 100px;
}
.icon-bar a:hover {
background-color: yellow;
}
/* Header <Menu>*/
.menu-button1 {
position: relative;
left: 300px;
top: -48px;
background-color: #47037A;
border: none;
color: #cccc00;
padding: 8px 40px 8px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: Arial;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
}
.menu-button2 {
position: relative;
left: 293px;
top: -48px;
background-color: #47037A;
border: none;
color: #cccc00;
padding: 8px 40px 8px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: Arial;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
}
.menu-button3 {
position: relative;
left: 286px;
top: -48px;
background-color: #47037A;
border: none;
color: #cccc00;
padding: 8px 40px 8px 40px;
text-align: center;
text-decoration: none;
font-size: 20px;
font-family: Arial;
margin: 4px 2px;
border-radius: 6px;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
display: inline-block;
position: relative;
}
.dropdown-menu {
display: none;
position: absolute;
top: 0px;
left: 256px;
margin: 4px 2px;
padding: 4px 28px 4px 28px;
text-align: center;
text-decoration: none;
font-size: 20px;
font-family: Arial;
border-radius: 6px;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-menu a {
background-color: #cccc00;
color: #47037A;
text-decoration: none;
display: block;
padding: 4px 28px 4px 28px;
border-radius: 6px;
margin-bottom: 1px;
}
/* Change color of dropdown links on hover */
.dropdown-menu a:hover {
display: block;
background-color: #47037A;
color: #cccc00;
padding: 4px 28px 4px 28px;
border-radius: 6px;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-menu {
display: inline-block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .menu-button3 {
background-color: #cccc00;
}
.menu-button4 {
position: relative;
left: 280px;
top: -48px;
background-color: #47037A;
border: none;
color: #cccc00;
padding: 8px 40px 8px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: Arial;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
}
.menu-button5 {
position: relative;
left: 273px;
top: -48px;
background-color: #47037A;
border: none;
color: #cccc00;
padding: 8px 40px 8px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: Arial;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
}
.menu-button6 {
position: relative;
left: 266px;
top: -48px;
background-color: #47037A;
border: none;
color: #cccc00;
padding: 8px 40px 8px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: Arial;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
}
.menu-button7 {
position: relative;
left: 260px;
top: -48px;
background-color: #cccc00;
border: none;
color: #47037A;
padding: 8px 40px 8px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: Arial;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
}
.menu-button1:hover {
background-color: #cccc00;
color: #47037A;
}
.menu-button2:hover {
background-color: #cccc00;
color: #47037A;
}
.dropdown:hover .menu-button3 {
background-color: #cccc00;
color: #47037A;
}
.menu-button4:hover {
background-color: #cccc00;
color: #47037A;
}
.menu-button5:hover {
background-color: #cccc00;
color: #47037A;
}
.menu-button6:hover {
background-color: #cccc00;
color: #47037A;
}
.menu-button7:hover {
background-color: #47037A;
color: #cccc00;
}
.dropdown-content-menu-button3 {
display: none;
position: absolute;
background-color: #47037A;
min-width: 160px;
}
/* Line separate header */
.hr-header {
position: fixed;
top: 218px;
height: 3px;
left: 0px;
right: 0%;
background-color: #47037A;
}
/* Content of Body */
.content {
position: fixed;
overflow: auto;
float: left;
width: 800px;
margin: 0;
padding: 10px;
}
h1 {
color: darkblue;
}
p {
color: navy;
}
#footer {
position: fixed;
left: 0px;
bottom: 0;
height: 150px;
width: 100%;
color: #47037A;
background-color: whitesmoke;
padding: 10px;
font-family: Arial;
}
.footer-contactus {
text-align: left;
}
.footer-copyrights {
text-align: center;
}
.footer-socialm {
text-align: right;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="header">
<div>
<div class="logo">
<img src="images/logo.jpg" alt="logo" />
<div class="icon-bar">
<a class="active" href="#"><i class="fa fa-search"></i></a>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
</div>
<div>
<button class="menu-button1">Menu1</button>
<button class="menu-button2">Menu2</button>
<!-- dropdown container -->
<div class="dropdown">
<!-- trigger button -->
<button class="menu-button3">Menu3</button>
<!-- dropdown menu -->
<div class="dropdown-menu">
Item1
Item2
Item3
Item4
Item5
</div>
</div>
<button class="menu-button4">Menu4</button>
<button class="menu-button5">Menu5</button>
<button class="menu-button6">Menu6</button>
<button class="menu-button7">Menu7</button>
</div>
</div>
<div class="hr-header"></div>
</div>
<div class="content">
Body
</div>
<div id="footer">
<div class="footer-contactus">
email: phone: address
</div>
<div class="footer-copyrights">
Copyright © website 1
</div>
<div class="footer-socialm">
<div class="icon-bar">
<a class="active" href="#"><i class="fa fa-search"></i></a>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
</div>
</div>
</div>
</div>
There were a lot of bugs in the html structure and css.
1. Never use position to set every element.
2. Your Menu was made up of button which was causing the problem, Always use unorder list (ul li) to make menus.
3. Some divs were not closed properly.
4. No need to write css for repeating elements. You can make a common class and use it again and again.
Below is the correct code structure and css. Also added some animation
to your dropdown so you can now learn some new things too :)
/* Grid View*/
* {
box-sizing: border-box;
}
/* Body Size*/
body {
background-color: white;
//position: relative;
margin-right: 150px;
margin-left: 150px;
margin-top: 20px;
}
/*Header*/
header {
position: fixed;
top: 0;
margin: 80%;
height: 100px;
background-color: whitesmoke;
color: black;
padding: 10px;
text-align: center;
}
/* Header <Logo> Fixed- No Need to make it fix positon as parent already fixed*/
.logo {
float: left;
max-width: 250px;
}
/* Header < Social Bar>*/
.icon-bar {
width: 100px;
overflow: auto;
}
/* Social Icons */
.icon-bar {
float: right;
width: 30%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
top: 100px;
}
.icon-bar a:hover {
background-color: yellow;
}
/* Header <Menu>*/
.menu {
float: left;
width: 65%;
padding: 0px;
margin: 0px;
}
.menu li {
border: none;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: Arial;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
position: relative;
}
.menu li a {
text-decoration: none;
color: #cccc00;
padding: 8px 20px;
display: block;
border-radius: 6px;
background-color: #47037A;
}
.menu li a:hover {
background-color: #cccc00;
color: #47037A;
}
.dropdown {
position: absolute;
top: 37px;
left: 0px;
padding: 0px;
margin: 0px;
visibility: hidden;
opacity: 0;
transform: translateY(-2em);
z-index: -1;
transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}
.dropdown li {
width: 100%;
margin: 4px 0;
}
.dropdown li a {
background-color: #cccc00;
color: #47037A;
}
.menu li:hover>.dropdown {
visibility: visible;
/* shows sub-menu */
opacity: 1;
z-index: 1;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.3s;
}
/* Line separate header */
.hr-header {
float: left;
height: auto;
background-color: #47037A;
}
/* Content of Body */
.content {
float: left;
float: left;
width: 800px;
margin: 0 auto;
padding: 10px;
}
h1 {
color: darkblue;
}
p {
color: navy;
}
#footer {
position: fixed;
left: 0px;
bottom: 0;
height: 150px;
width: 100%;
color: #47037A;
background-color: whitesmoke;
padding: 10px;
font-family: Arial;
}
.footer-contactus {
text-align: left;
}
.footer-copyrights {
text-align: center;
}
.footer-socialm {
text-align: right;
}
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/functions.js" type="text/javascript"></script>
<div class="header">
<div class="logo">
<img src="images/logo.jpg" alt="logo" />
</div>
<div class="icon-bar">
<a class="active" href="#"><i class="fa fa-search"></i></a>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
</div>
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3
<!---DropDown On hover----->
<ul class="dropdown">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Menu 7</li>
</ul>
<div class="hr-header"></div>
</div>
<div class="content">
Body
</div>
<div id="footer">
<div class="footer-contactus">
email: phone: address
</div>
<div class="footer-copyrights">
Copyright © website 1
</div>
<div class="footer-socialm">
<div class="icon-bar">
<a class="active" href="#"><i class="fa fa-search"></i></a>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
</div>
</div>
</div>
</div>