I have a question about the dropdown menu size. If the title in the dropdown is long, it moves to the bottom line. I want it to increase the width of the Dropdown menu size. How can I do that. Below you can find the photo of the dropdown menu and the corresponding codes.Thanks for your answers.
Dropdown Menu
HTML
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Responsive Drop-down Menu Bar</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<div class="logo">
CodingNepal</div>
<label for="btn" class="icon">
<span class="fa fa-bars"></span>
</label>
<input type="checkbox" id="btn">
<ul>
<li>Home</li>
<li>
<label for="btn-1" class="show">Features +</label>
Features
<input type="checkbox" id="btn-1">
<ul>
<li>Pages</li>
<li>Elements</li>
<li>Icons</li>
</ul>
</li>
<li>
<label for="btn-2" class="show">Services +</label>
Services
<input type="checkbox" id="btn-2">
<ul>
<li>Web Design and some information</li>
<li>App Design</li>
<li>
<label for="btn-3" class="show">More +</label>
More <span class="fa fa-plus"></span>
<input type="checkbox" id="btn-3">
<ul>
<li>Submenu-1</li>
<li>Submenu-2</li>
<li>Submenu-3</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<header>Responsive Drop-down Menu Bar</header>
<p>
HTML and CSS (Media Query)</p>
</div>
<script>
$('.icon').click(function(){
$('span').toggleClass("cancel");
});
</script>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: #f2f2f2;
}
nav{
background: #1b1b1b;
}
nav:after{
content: '';
clear: both;
display: table;
}
nav .logo{
float: left;
color: white;
font-size: 27px;
font-weight: 600;
line-height: 70px;
padding-left: 60px;
}
nav ul{
float: right;
margin-right: 40px;
list-style: none;
position: relative;
}
nav ul li{
float: left;
display: inline-block;
background: #1b1b1b;
margin: 0 5px;
}
nav ul li a{
color: white;
line-height: 70px;
text-decoration: none;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover{
color: cyan;
border-radius: 5px;
box-shadow: 0 0 5px #33ffff,
0 0 10px #66ffff;
}
nav ul ul li a:hover{
box-shadow: none;
}
nav ul ul{
position: absolute;
top: 90px;
border-top: 3px solid cyan;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
nav ul ul ul{
border-top: none;
}
nav ul li:hover > ul{
top: 70px;
opacity: 1;
visibility: visible;
}
nav ul ul li{
position: relative;
margin: 0px;
width: 150px;
float: none;
display: list-item;
border-bottom: 1px solid rgba(0,0,0,0.3);
}
nav ul ul li a{
line-height: 50px;
}
nav ul ul ul li{
position: relative;
top: -60px;
left: 150px;
}
.show,.icon,input{
display: none;
}
.fa-plus{
font-size: 15px;
margin-left: 40px;
}
#media all and (max-width: 968px) {
nav ul{
margin-right: 0px;
float: left;
}
nav .logo{
padding-left: 30px;
width: 100%;
}
.show + a, ul{
display: none;
}
nav ul li,nav ul ul li{
display: block;
width: 100%;
}
nav ul li a:hover{
box-shadow: none;
}
.show{
display: block;
color: white;
font-size: 18px;
padding: 0 20px;
line-height: 70px;
cursor: pointer;
}
.show:hover{
color: cyan;
}
.icon{
display: block;
color: white;
position: absolute;
top: 0;
right: 40px;
line-height: 70px;
cursor: pointer;
font-size: 25px;
}
nav ul ul{
top: 70px;
border-top: 0px;
float: none;
position: static;
display: none;
opacity: 1;
visibility: visible;
}
nav ul ul a{
padding-left: 40px;
}
nav ul ul ul a{
padding-left: 80px;
}
nav ul ul ul li{
position: static;
}
[id^=btn]:checked + ul{
display: block;
}
nav ul ul li{
border-bottom: 0px;
}
span.cancel:before{
content: '\f00d';
}
}
.content{
z-index: -1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
header{
font-size: 35px;
font-weight: 600;
padding: 10px 0;
}
p{
font-size: 30px;
font-weight: 500;
}
Put those two styles on your code. the reason for your issue is not specify the width of inner list.
nav ul li ul {
width: fit-content;
}
nav ul li ul li {
width: 100%;
display: block;
}
in your stylesheet there is some bad practices without defining any class names for your styles. it is hard to find when add more styles. you can use ids or classes and tones of ways to make it easy.
Related
My navbar functions in a :selected way, which means the dropdown menu only shows when the button is selected. I would like to change it to hover instead, but when I adjust it in CSS, it doesn't change anything. I'm afraid of adjusting anything else as it may mess other things up too.
I also tried to change the height of the buttons so that the bottom-border fits perfectly at the bottom of the button when hovering over the button. Yet when I mess around with the height, hover and padding it shows no effect.
I'm not sure what I did wrong with my navbar I think I broke it, and I'm not sure where the mistakes were made.
I would really appreciate some help with fixing my navbar and perhaps a bit of advice on how the solution came to be.
Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#600&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/194918e54c.js" crossorigin="anonymous"></script>
<title>Localhost</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="faq.css">
</head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<section class="navigation">
<div class="nav-container">
<div class="brand">
<img src="photos/ae-header-logo.png" alt="" srcset="">
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Services
<ul class="nav-dropdown">
<li>
Web Design
</li>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
</ul>
</li>
<li>
Pricing
</li>
<li>
Portfolio
<ul class="nav-dropdown">
<li>
Web Design
</li>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
</section>
html,body {
margin: 0;
padding: 0;
height: auto;
font-family: 'Poppins';
box-sizing: border-box;
background-color: rgb(255, 255, 255) !important;
}
.navigation {
height: 120px;
background-color: green;
}
.brand {
position: absolute;
top: 1%;
left: 0%;
float: left;
text-transform: uppercase;
font-size: 1.9em;
}
.brand img{
position: relative;
margin-top: 0%;
width: 500px;
padding-left: 0%;
left: 0%;
float: left;
}
.brand img:hover{
box-shadow: 10px;
transition: all ease-in-out 0.5s;
}
.brand a, .brand a:visited {
color: #fff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
background-color: red;
}
nav {
float: right;
position: relative;
left: 20%;
margin-top: 20px;
background-color: rgb(255, 0, 212);
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a, nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 100px;
color: black;
text-decoration: none;
}
nav ul li a:hover, nav ul li a:visited:hover {
border-bottom: black 2px solid;
}
nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #262626;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #fff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
.nav-list li:hover ul{
display: block
}
Hope it's what you're looking for
I made a sub nav bar, and it disappears when I hover over it, I tried changing somethings but it still will disappear when I hover over the submenu itself. if anyone knows what I could do that would be really helpful.
code:
<header>
<div class="containers">
<nav>
<ul>
<li>home</li>
<li>movies
<ul class="sub-menu">
<li>Recommended</li>
<li>best rated movies</li>
<li>Genre
<ul class="dsub-menu">
<li>Action</li>
<li>adventure</li>
<li>Comedy</li>
<li>Sci-Fi</li>
<li>Romance</li>
<li>Animation</li>
<li>Horror</li>
<li>Fantasy</li>
<li>Crime</li>
<li>Drama</li>
<li>Mystery</li>
</ul>
</li>
</ul>
</li>
<li>TV shows</li>
<li>watch list</li>
<li>Oscar</li>
<li><small>Sign In</small></li>
</ul>
</nav>
</div>
</header>
CSS:
containers{
width: 80%;
margin: 0 auto;
}
header{
background-color: firebrick;
height: 70px;
}
header::after{
content: '';
display: table;
clear: both;
}
img{
float: left;
padding: 10px 80px;
height: 50px;
width: 150px;
}
nav{
float: right;
padding: 10px 55px;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li{
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav ul li a{
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color: #191919;
}
nav a::before{
content: '';
display: block;
height: 5px;
width: 100px;
background-color: black;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
.sub-menu{
position: absolute;
background-color: indianred;
width: 200%;
height: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
display: block;
top: 60px;
right: 0;
left: -30px;
overflow: hidden;
display: none;
}
.sub-menu li {
color: #eee;
font-size: 12px;
width: 100%;
left: -65px;
padding: 15px 0;
}
nav ul li:hover ul.sub-menu{
display: block;
}
note: the CSS code that I applied here doesn't contain the other submenu.
thank you for the help
You'll need to make the sub-menu appear on link hover like this
nav li:hover .sub-menu {
display: block;
background: #fff;
}
Codepen demo
I am new to coding and am struggling to get the template for my nav menu ready. First of all, I want the hamburger to hide whenever I click on it and then the menu opens. However, I'm still at the beginning, and can't even get the hamburger to hide. I want to toggle the class ".hamburger-hide" using jQuery, which includes the display:none property.
this is the html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#800&display=swap" rel="stylesheet">
<title>Navbar</title>
</head>
<body>
<header class="header">
<h1 class="logo">Logo</h1>
<nav class="navbar">
<ul class="nav-list">
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact Us</li>
<li class="nav-item">Links</li>
</ul>
</nav>
<div class="btn">
<a class="cta" href="#"><button>Hello World</button></a>
</div>
<img class="hamburger" src="speisekarte.svg" alt="hamburger-menu">
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="index.js" charset="utf-8"></script>
</body>
</html>
this is my CSS:
*{ /*Setting all to 0*/
padding:0;
margin:0;
box-sizing: border-box; /*If you set box-sizing: border-box; on an element, padding and border are included in the width and height*/
}
header {
display: flex; /* Das ist der Flex container (header) in ihm müssen items positioniert werden*/
justify-content: space-between; /*justify-content + align-itmes = center ==> perfect center*/
align-items: center;
background-color: #707070;
padding: 30px 10%;
}
.logo {
font-family: "Montserrat", sans-serif;
font-weight: 800;
cursor: pointer;
}
button {
cursor: pointer;
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1); /* letzter ist alpha --> opacity, 1 = 100%*/
border: none;
border-radius: 50px;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: rgba(0, 136, 169, 0.7); /* alpha ändert sich beim hovern --> opacity nimmt ab, 0,7 = 70%*/
text-decoration: none;
}
.btn a {
text-decoration: none;
}
.nav-item {
list-style: none;
}
.nav-item {
display: inline-block; /* ul ist in reihe nicht untereinander. kann auch direkt an li gemacht werden*/
padding: 0px 30px;
}
.navbar li a {
transition: all 0.3s ease 0s; /*letzter wert= delay, ease-in-out= vorwärts und rückwärts*/
}
.navbar li a:hover {
color: #0088a9;
}
.nav-item a, button{
text-decoration: none;
color: #edf0f1;
font-family: "Montserrat", sans-serif;
font-size: 16px;
font-weight: normal;
}
.hamburger {
height:40px;
cursor: pointer;
position:relative;
}
.hamburger:hover {
padding:2px;
border: 2px solid;
border-radius: 5px;
}
.hamburger-hide {
display:none;
}
#media (max-width: 768px){
.nav-list{
display: none;
}
.cta {
display: none;
}
}
#media (min-width:769px){
.hamburger{
display:none;
}
}
and this is the jQuery I tried, so that it hides on click.
$(".hamburger").click(function(){
$(".hamburger").toggleClass(".hamburger-hide");
})
Solution with jQuery for build up Hamburger navbar responsive
For my example:
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery);
#charset "UTF-8";
body{
margin:0;
}
.navigation {
height: 70px;
background: #6d7993;
font-family: montserrat, sans-serif;
font-weight: 400;
font-style: normal;
opacity: 0.88;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
}
.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #6d7993;
color: #ffffff;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
background: #4b5569;
color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: " ▾";
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #6d7993;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: "";
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<section class="navigation">
<div class="nav-container">
<div class="brand">
Logo
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
Contact Us
</li>
<li>
Link
</li>
</ul>
</ul>
</nav>
</div>
</section>
Updated
Solution 2, Using Pure CSS
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<header class="header">
Your Logo
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact Me</li>
</ul>
</header>
Here you go:
https://jsfiddle.net/ap2rzb5x/1/
$("#hamburger").click(function(){
$("#hamburger").toggleClass("hamburger-hide");
$("#hamburger").toggleClass("hamburger");
})
Summary you toggled just that one class, didn't want you maybe switch them (toggle the original hamburger class away?). Just in case I matched on the ID instead of the class so I could toggle away the original hamburger and still be able to match it with the same code.
Another problem is that you toggled '.hamburger-hide' that's not the class name, it's called 'hamburger-hide' the dot is only used by jQuery as the dollar search. Same with #hamburger, it will find ID of hamburger not #hamburger-hide.
https://api.jquery.com/category/selectors/
Probably it's not exactly doing what you want, but I think it should unstuck you and you should be able to continue making what you intend to do.
This question already has answers here:
What is the opposite of :hover (on mouse leave)?
(13 answers)
Closed 2 years ago.
First. Sorry to lack English grammar skills.
I trying clone coding one of korea corporation website.
but, is not working. transition property of Pseudo-element.
The css line number in question is "51". in header .gnb ul li a span:hover:after
/* Skip css reset and import img file */
/* index.css */
header{
width: 100%;
height: 80px;
text-align: center;
}
header h1{
position: absolute;
left: 50px;
top: 0;
}
header h1 a {
display: block;
width: 110px;
height: 50px;
position: absolute;
top: 15px;
background: url("../img/sp_com.png") no-repeat -300px 0;
color: transparent;
}
header .gnb ul li{
display: inline-block;
}
header .gnb ul li a{
display: block;
height: 80px;
padding: 0 35px;
font-size: 17px;
line-height: 80px;
}
header .gnb ul li a span{
position: relative;
}
header .gnb ul li a span:hover:after{
content: "";
display: block;
position: absolute;
left: 0;
bottom: -10px;
width: 100%;
height: 1px;
background-color: #336584;
**transition: all 1s ease;**
}
header .spot{
position: absolute;
right: 50px;
top: 0;
}
header .spot ul li{
float: left;
line-height: 80px;
}
header .spot ul li a{
display: block;
position: relative;
height: 80px;
padding: 0 10px;
line-height: 80px;
}
header .spot ul li:last-child a{
padding-right: 0;
}
header .spot ul li:before{
content:"";
display: block;
position: absolute;
top: 50%;
width: 1px;
height: 7px;
background-color: #ccc;
transform: translateY(-50%)
}
header .spot ul li:first-child:before{
content: "";
display: none;
}
header .gnb ul li a:hover{
font-weight: blod !important;
color:#336584;
}
header .spot ul li a:hover{
font-weight: bold !important;
color:#336584;
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/default.css">
<link rel="stylesheet" href="../css/index.css">
<title>Document</title>
</head>
<body>
<header>
<h1>한솔홈데코</h1>
<h2 class="hide">대메뉴</h2>
<nav class="gnb">
<ul>
<li><span>제품정보</span></li>
<li><span>시공사례</span></li>
<li><span>고객센터</span></li>
<li><span>기업소개</span></li>
<li><span>사업분야</span></li>
</ul>
</nav>
<h2 class="hide">관련서비스</h2>
<nav class="spot">
<ul>
<li>제품찾기</li>
<li>SITEMAP</li>
<li>BLOG</li>
<li>YOUTUBE</li>
</ul>
</nav>
</header>
</body>
</html>
Add transition property in spna:after to get transition effect in hover
Try using this code:
header .gnb ul li a span:after{
content: "";
transition: all 0.4s ease;
}
/* Skip css reset and import img file */
/* index.css */
header{
width: 100%;
height: 80px;
text-align: center;
}
header h1{
position: absolute;
left: 50px;
top: 0;
}
header h1 a {
display: block;
width: 110px;
height: 50px;
position: absolute;
top: 15px;
background: url("../img/sp_com.png") no-repeat -300px 0;
color: transparent;
}
header .gnb ul li{
display: inline-block;
}
header .gnb ul li a{
display: block;
height: 80px;
padding: 0 35px;
font-size: 17px;
line-height: 80px;
}
header .gnb ul li a span{
position: relative;
}
header .gnb ul li a span:after {
content: "";
transition: all 0.4s ease;
}
header .gnb ul li a span:hover:after{
display: block;
position: absolute;
left: 0;
bottom: -10px;
width: 100%;
height: 1px;
background-color: #336584;
}
header .spot{
position: absolute;
right: 50px;
top: 0;
}
header .spot ul li{
float: left;
line-height: 80px;
}
header .spot ul li a{
display: block;
position: relative;
height: 80px;
padding: 0 10px;
line-height: 80px;
}
header .spot ul li:last-child a{
padding-right: 0;
}
header .spot ul li:before{
content:"";
display: block;
position: absolute;
top: 50%;
width: 1px;
height: 7px;
background-color: #ccc;
transform: translateY(-50%)
}
header .spot ul li:first-child:before{
content: "";
display: none;
}
header .gnb ul li a:hover{
font-weight: blod !important;
color:#336584;
}
header .spot ul li a:hover{
font-weight: bold !important;
color:#336584;
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/default.css">
<link rel="stylesheet" href="../css/index.css">
<title>Document</title>
</head>
<body>
<header>
<h1>한솔홈데코</h1>
<h2 class="hide">대메뉴</h2>
<nav class="gnb">
<ul>
<li><span>제품정보</span></li>
<li><span>시공사례</span></li>
<li><span>고객센터</span></li>
<li><span>기업소개</span></li>
<li><span>사업분야</span></li>
</ul>
</nav>
<h2 class="hide">관련서비스</h2>
<nav class="spot">
<ul>
<li>제품찾기</li>
<li>SITEMAP</li>
<li>BLOG</li>
<li>YOUTUBE</li>
</ul>
</nav>
</header>
</body>
</html>
transfer your transition property from header .gnb ul li a span:hover:after to header .gnb ul li a
header .gnb ul li a{
display: block;
height: 80px;
padding: 0 35px;
font-size: 17px;
line-height: 80px;
transition: all 1s ease;
}
I want to make a code where I hover my mouse through the menu items, and appears a submenu with a list ...
Here's my html nav code on CSS first and then the HTML code ...:
nav {
background-color: #FFF;
width: 960px;
margin: 0 auto;
}
div.ajuste {
clear: both;
}
nav ul {
width: 95%;
margin: 5px 5px 0 5px;
padding: 10px 10px 10px 6px;
height: 40px;
line-height: 100%;
background: #FFF;
/* position:relative;
z-index:999;
overflow: hidden;*/
float:left;
list-style-type: none;
}
nav li {
margin-bottom: 10px;
padding-right: 25px;
float: left;
/*position: relative;*/
/*list-style: none;*/
}
nav a {
color: #36E;
font-weight: bold;
text-decoration: none;
/*margin-right: 6%;*/
font-family: arial, sans-serif;
font-style: normal;
font-size: 15px;
text-decoration: none;
display: block;
padding: 6px 20px 6px 20px;
/*margin-bottom: 10px;*/
}
nav a:hover {
color: #0505B4;
}
nav a.active {
color: #1414D3;
}
ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul.dropdown li.hover, ul.dropdown li:hover {
position: relative;
z-index: 599;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
<nav>
<ul id="menu_bar" class="dropdown">
<li>Inicio</li>
<li>Biografía</li>
<li class="submenu">Discografía</li>
<ul>
<li>Innerspeaker</li>
<li>Lorenism</li>
<li>Currents</li>
</ul>
</li>
</ul>
<div class="ajuste">
<nav>
My fail occurs when I hover it ... List submenu don't appears...
What's bad on my code?
The second UL, need to be inside the LI tag.
nav {
background-color: #FFF;
width: 960px;
margin: 0 auto;
}
div.ajuste {
clear: both;
}
nav ul {
width: 95%;
margin: 5px 5px 0 5px;
padding: 10px 10px 10px 6px;
height: 40px;
line-height: 100%;
background: #FFF;
/* position:relative;
z-index:999;
overflow: hidden;*/
float:left;
list-style-type: none;
}
nav li {
margin-bottom: 10px;
padding-right: 25px;
float: left;
/*position: relative;*/
/*list-style: none;*/
}
nav a {
color: #36E;
font-weight: bold;
text-decoration: none;
/*margin-right: 6%;*/
font-family: arial, sans-serif;
font-style: normal;
font-size: 15px;
text-decoration: none;
display: block;
padding: 6px 20px 6px 20px;
/*margin-bottom: 10px;*/
}
nav a:hover {
color: #0505B4;
}
nav a.active {
color: #1414D3;
}
ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul.dropdown li.hover, ul.dropdown li:hover {
position: relative;
z-index: 599;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
<nav>
<ul id="menu_bar" class="dropdown">
<li>Inicio</li>
<li>Biografía</li>
<li class="submenu">
Discografía
<ul>
<li>Innerspeaker</li>
<li>Lorenism</li>
<li>Currents</li>
</ul>
</li>
</ul>
<nav>
You have an extra li tag. Get rid of it, and it should work
<nav>
<ul id="menu_bar" class="dropdown">
<li>Inicio
</li>
<li>Biografía
</li>
<li class="submenu">Discografía
<ul>
<li>Innerspeaker
</li>
<li>Lorenism
</li>
<li>Currents
</li>
</ul>
</li>
</ul>
<div class="ajuste">
<nav>