I want to create a menu but, when it's finished the tab looks like it shakes a little on hover, like when it's hovered, the text on the tab goes up a bit and then drops back to normal
* {
margin: 0px;
padding: 0px;
background: #dbdbea;
}
.tab {
width: 100%;
height: 100px;
position: absolute;
background: #999999;
}
.tab ul {
display: inline-flex;
background: #999999;
position: absolute;
margin-top: 29px;
margin-left: 15px;
}
.tab ul li {
background: #999999;
list-style: none;
}
.tab ul li a {
background: #999999;
color: #222222;
margin: 0px 11.666px 0px 11.666px;
padding: 0px 23.334px 0px 23.334px;
text-decoration-line: none;
font-family: arial;
font-size: 36px;
transition: 1s;
}
.tab ul li a:hover {
background: #666666;
margin: 0px;
padding: 30px 35px 30px 35px;
}
<div class="tab">
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
I tried everything I could but, the results still weren't what I wanted, i was really confused about how to fix this bug
can someone tell me what's wrong with the code?
Can you please check the below code? Hope it will work for you. We have removed some flex utilities and give hover effect using pseudo-element with the transition.
Please refer to this link: https://jsfiddle.net/yudizsolutions/p41tnefh/4/
* {
margin: 0px;
padding: 0px;
background: #dbdbea;
}
.tab ul {
display: flex;
align-items: center;
background: #999;
padding-left: 15px;
list-style: none
}
.tab ul li {
align-items: center;
background: #999;
}
.tab ul li a {
color: #222222;
text-decoration: none;
font-family: arial;
font-size: 36px;
padding: 29px 25px;
transition: 1s;
display: block;
background: #999;
position: relative;
overflow: hidden;
z-index: 1;
}
.tab ul li a::before {
content: '';
display: black;
position: absolute;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
background: #666666;
height: 50%;
width: 80%;
transition: 0.6s all ease-in-out;
-webkit-transition: 0.6s all ease-in-out;
z-index: -1;
transform: translate(-50%, -50%);
opacity: 0;
}
.tab ul li a:hover:before {
opacity: 1;
height: 100%;
width: 100%;
}
<div class="tab">
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
Related
Here's the code I have problem with my underline hover effect its exppanding extra how to fix it please help me out ************************
HTML
<div class="nav-wrap">
<ul class="group" id="example-one">
<li>Home</li>
<li><a class="dropbtn">Models</a>
<ul class="dropdown-content">
<li></li>
<li>Audi</li>
<li>Bmw</li>
<li>Mercedes</li>
</ul>
</li>
<li>Offers</li>
<li>Group Sales</li>
<li>Reviews</li>
</ul>
</div>
And also i want my dropdown in the middle of his parent And here its*********
CSS
.nav-wrap {
background: white;
width: 100%;
}
#example-one {
text-align: right;
}
#example-one li {
text-align: left;
position: relative;
display: inline-block;
font-family: 'Montserrat', sans-serif;
top:-20px;
}
#example-one a {
color: #000;
font-weight: bold;
font-size: 14px;
padding: 15px 15px;
text-decoration: none;
position: relative;
color: #000;
}
#example-one a:after {
color: #333;
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 2px;
right: 0;
background: #000;
transition: width all 1s ease;
-webkit-transition: width 1s ease;
}
#example-one a:hover:after {
width: 100%;
left: 0;
background: #000;
}
.dropdown-content {
display: none;
position: absolute;
top: 30px;
left: 0;
background-color:white;
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
}
#example-one li li {
display: block;
}
#example-one li:hover>ul {
display: block;
}
If I understand your problem correctly, the issue is with the dropdown items not being centered and the dropdown underline being too long. I believe this issue is caused by the padding on the dropdown div.
To resolve this, add some normalised padding to your .dropdown-content class:
.dropdown-content {
padding: 0 20px;
}
let the underline be attached to the text it self not to all the list item so it takes the width of just the text, now it takes the width of the whole cell in the list
It's the HTML of my code. I created navigation menubar with submenu in dropdown option but my submenu is not dropping down under the parent menu "dropdown" is parent menu.
.nav-wrap{
background:white;
width:100%;
height:50px;
position: relative;
top:-13px;
overflow:visible;
}
#example-one {
margin: 0 auto;
list-style: none;
position: relative;
width: 100%;
}
#example-one li {
display: inline-block;
font-family: 'Montserrat', sans-serif;
}
#example-one a {
color: #000;
font-weight:bold;
font-size: 14px;
float: left;
padding: 15px 15px;
text-decoration: none;
left:350px;
position:relative;
color:#000;
}
#example-one a:after {
color: #333;
content: '';
position: absolute;
width: 0; height: 3px;
display: block;
margin-top: 2px;
right: 0;
background: #000;
-webkit-transition-property: left, right;
transition-property: left, right;
transition: width 1s ease;
-webkit-transition: width 1s ease;
}
#example-one a:hover:after{
width: 100%;
left: 0;
background: #000;
}
.dropbtn {
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content
{
display: block;
}
<div class="nav-wrap">
<ul class="group" id="example-one">
<li>Home</li>
<li>
<div class="dropdown">
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div></li>
<li>Offers</li>
<li>Group Sales</li>
<li>Reviews</li>
</ul></div>
Here is the CSS:
.nav-wrap{
background:white;
width:100%;
height:50px;
position: relative;
top:-13px;
overflow:visible;
}
#example-one {
margin: 0 auto;
list-style: none;
position: relative;
width: 100%;
}
#example-one li {
display: inline-block;
font-family: 'Montserrat', sans-serif;
}
#example-one a {
color: #000;
font-weight:bold;
font-size: 14px;
float: left;
padding: 15px 15px;
text-decoration: none;
left:350px;
position:relative;
color:#000;
}
#example-one a:after {
color: #333;
content: '';
position: absolute;
width: 0; height: 3px;
display: block;
margin-top: 2px;
right: 0;
background: #000;
-webkit-transition-property: left, right;
transition-property: left, right;
transition: width 1s ease;
-webkit-transition: width 1s ease;
}
#example-one a:hover:after{
width: 100%;
left: 0;
background: #000;
}
.dropbtn {
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content
{
display: block;
}
.nav-wrap {
background: white;
width: 100%;
}
#example-one {
text-align: right;
}
#example-one li {
text-align: left;
position: relative;
display: inline-block;
font-family: 'Montserrat', sans-serif;
}
#example-one a {
color: #000;
font-weight: bold;
font-size: 14px;
padding: 15px 15px;
text-decoration: none;
position: relative;
color: #000;
}
#example-one a:after {
color: #333;
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 2px;
right: 0;
background: #000;
-webkit-transition-property: left, right;
transition-property: left, right;
transition: width 1s ease;
-webkit-transition: width 1s ease;
}
#example-one a:hover:after {
width: 100%;
left: 0;
background: #000;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 160px;
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
}
#example-one li li {
display: block;
}
#example-one li:hover>ul {
display: block;
}
<div class="nav-wrap">
<ul class="group" id="example-one">
<li>Home</li>
<li><a class="dropbtn">Dropdown</a>
<ul class="dropdown-content">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Offers</li>
<li>Group Sales</li>
<li>Reviews</li>
</ul>
</div>
I've updated your CSS code and HTML as well. Your structure is over complicated and css with id does not reuseable for other dropdown menu.
.nav {
display: inline-block;
text-align: left;
}
.nav,
.dropdown {
padding: 0;
margin: 0;
list-style-type: none;
}
.nav > li {
float: left;
position: relative;
}
.nav li > a {
display: block;
position: relative;
padding: 10px 25px;
color: #000;
font: bold 14px sans-serif;
text-decoration: none;
}
.nav .dropdown {
display: none;
position: absolute;
top: 100%;
background-color: #fff;
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .2);
min-width: 160px;
}
.nav .dropdown .dropdown {
top: 0;
left: 100%;
}
.nav .dropdown > li {
position: relative;
}
.nav li:hover > .dropdown {
display: block;
}
.nav .dropdown a:hover {
background-color: #f1f1f1;
}
.nav a::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 3px;
background: #000;
transition-property: left, right;
transition: width 1s ease;
}
.nav a:hover::after {
width: 100%;
left: 0;
background: #000;
}
<div style="text-align: center">
<ul class="nav">
<li>Home</li>
<li>
Dropdown
<ul class="dropdown">
<li>Link 1</li>
<li>
Link 2
<ul class="dropdown">
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.3</li>
</ul>
</li>
<li>Link 3</li>
</ul>
</li>
<li>Offers</li>
<li>Group Sales</li>
<li>Reviews</li>
</ul>
</div>
I'm trying to make a drop-down menu appear when mouse-hovered, but for some reason, the menu doesn't appear.
* {
margin: 0;
padding: 0;
}
.header {
position: fixed;
list-style-type: none;
height: 35px;
width: 100%;
overflow: hidden;
background: #333333;
}
.header > li {
display: inline-block;
padding: 8px;
}
.header > li:hover {
background: #000000;
}
.home {
margin-left: 10%;
}
.home a:link {
color: #FFF;
}
.home a:visited {
color: #AAA;
}
.home a:hover {
color: #00F;
}
.home a:active {
color: #F00;
}
.dropdown {
display: block; /* I guess that something is wrong here */
width: auto;
color: #FFF;
}
.dropdown li {
list-style-type: none;
display: block; /* I guess that something is wrong here too */
position: absolute; /* and here */
top: 100%;
color: red;
width: auto;
opacity: 0;
background: yellow;
border: 1px solid black;
transition: opacity 1s;
}
.dropdown:hover,
.dropdown li:hover {
opacity: 1;
}
.main {
margin-top: 20px;
padding-top: 20px;
height: 50px;
display: block;
background: white;
text-align: center;
font-size: 20px;
transition: background 1s;
}
.main:hover {
background: #CCCCCC;
}
<body>
<ul class="header">
<li class="home">⌂ Home
</li>
<li class="dropdown">Dropdown ❱
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
</ul>
<br>
<section>
<div class="main">
Content...
</div>
</section>
</body>
I'm trying to do this using CSS and HTML only.
I've commented beside three lines which I think are causing the problem, but I can't seem to figure it out. What is the issue? How do I fix it?
Firstly, we remove the overflow:hidden from the header which would stop the submenus from showing at all.
Then the parent li should be set to position:relative and the child ul to position:absolute (not the individual li).
Remove the display:none on :hover and there you are.
* {
margin: 0;
padding: 0;
}
.header {
position: fixed;
list-style-type: none;
height: 35px;
width: 100%;
/*overflow: hidden;*/
background: #333333;
}
.header > li {
display: inline-block;
padding: 8px;
}
.header > li:hover {
background: #000000;
}
.home {
margin-left: 10%;
}
.home a:link {
color: #FFF;
}
.home a:visited {
color: #AAA;
}
.home a:hover {
color: #00F;
}
.home a:active {
color: #F00;
}
.dropdown {
color: #FFF;
position: relative;
}
.dropdown ul {
list-style-type: none;
position: absolute;
/* and here */
top: 100%;
left: 0;
color: red;
width: auto;
display: none;
background: yellow;
border: 1px solid black;
}
.dropdown:hover ul {
display: block;
}
.main {
margin-top: 20px;
padding-top: 20px;
height: 50px;
display: block;
background: white;
text-align: center;
font-size: 20px;
transition: background 1s;
}
.main:hover {
background: #CCCCCC;
}
<body>
<ul class="header">
<li class="home">⌂ Home
</li>
<li class="dropdown">Dropdown ❱
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
</ul>
<br>
<section>
<div class="main">
Content...
</div>
</section>
</body>
I have the following code:
/**** DropDown Css ******/
.inner_menu ul#nav > li span {
display: inline-block;
height: 15px;
vertical-align: middle;
width: 20px;
background: url(../images/drp_arw_dwn.png) no-repeat center;
margin-left: 10px;
}
.inner_menu ul#nav > li:hover span {
background: url(../images/drp_arw.png) no-repeat center;
}
.inner_menu ul#nav > li:hover .subnav {
display: block;
}
.subnav {
position: absolute;
padding-top: 18px;
display: none;
left: 50%;
margin-left: -100px;
border-style: solid;
border-width: 5px;
border-color:#2c91da
}
.subnav ul {
background: #333;
width: 200px;
padding-top: 15px;
}
.subnav ul li {
display: block;
margin: 0;
padding: 0 0 0 20px;
}
.subnav ul li a {
color: #fff;
font-size: 18px;
padding-bottom: 5px;
}
.subnav ul li:hover a {
color: #2c91da;
display: block;
}
/****************** Nav Menu *****************/
.header .wrapper:after {
opacity: 0.5;
}
.dashboard_page {
position: relative;
background: #fff;
padding: 42px 0;
}
.dashboard_page .wrapper {
position: relative;
z-index: 9;
}
.dashboard_page:after {
left: 0;
top: 0;
width: 100%;
height: 370px;
position: absolute;
content: "";
background: #f7f8f9;
pointer-events: none;
}
.inner_menu {
margin: 7px 0 0 0;
padding: 0;
display: block;
}
.inner_menu ul#nav {
margin: 0;
padding: 0;
display: inline-block;
border-right: 1px solid #f2f2f2;
box-shadow: 0 5px 4px rgba(0, 0, 0, 0.3);
}
.inner_menu ul#nav > li {
margin: 0;
padding: 0;
height: 52px;
line-height: 52px;
display: block;
float: left;
border-left: 1px solid #f2f2f2;
position: relative;
}
.inner_menu ul#nav > li > a {
display: block;
color: #2f2f2f;
font-size: 18px;
font-family: 'Lato', sans-serif;
margin: 0;
padding: 0 27px;
border-style: solid;
border-width: 5px;
}
.inner_menu ul#nav > li:after {
position: absolute;
width: 38px;
left: 50%;
margin-left: -19px;
content: "";
background: url(../images/menu_arw.png) no-repeat;
height: 20px;
bottom: -35px;
z-index: 9;
display: none;
}
.inner_menu ul#nav > li:hover:after {
display: block;
}
.inner_menu ul#nav > li.active:after {
display: block;
}
<div class="inner_menu">
<div class="toggle"></div>
<ul id="nav">
<li>
Link 1
</li>
<li>
Trackers
<div class="subnav">
<ul>
<li>Sub Menu 1
</li>
<li>Sub Menu 2
</li>
</ul>
</div>
</li>
</ul>
</div>
The problem is that in internet explorer, when I try to move my cursor below the element to click on the dropdown, it disappears and I am unable to click it.
What am I doing wrong?
The problem was this CSS item:
.header .wrapper:after{ position:absolute; bottom:-33px; width:100%; height:34px; content:""; left:0; background:url(../images/shadow-bg.png) no-repeat center; background-size:100% auto; pointer-events:none}
The attribute bottom should be a higher negative number. -150px worked for me. I changed it to this:
.header .wrapper:after{ position:absolute;
bottom:-150px
; width:100%; height:34px; content:""; left:0; background:url(../images/shadow-bg.png) no-repeat center; background-size:100% auto; pointer-events:none}
Let's break it down:
You hover over '.inner_menu ul#nav > li:hover'
The 'display' is set to 'block' for '.subnav'.
You move your mouse until it moves outside of the actual link (The one that says "Trackers")
The selector '.inner_menu ul#nav > li:hover' no longer applies, since you are no longer hovering over the link.
The background is unset.
If you move the .subnav close to the link (No spaces!) it should work better.
Here is a link to a navigation bar that uses CSS only: http://www.cssnewbie.com/easy-css-dropdown-menus/
You might want to use JavaScript for more advanced functionality.
Some limitations for CSS:
No spaces, if you sub-menu is not RIGHT next to the link to it, it probably won't work (Or would at least be very hard to implement)
No advanced fading, clicking or other events, just hovering.
In my set up I have my navigation bar set horizontally and contained within my header div like this:
<div id="header-section">
<div id="main-menu-wrapper">
<ul id="main-menu">
<li>Home</li>
<li>Services
<ul id="sub-men">
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
My problem is that the sub-menu is not showing because the height on "main-menu-wrapper" is set to auto. The sub-menu is showing when I set a height like 100px. When I set the position on the sub-menu to static instead of absolute, it expands the entire main-menu-wrapper. How can I get the sub-menu to show properly?
Here's the CSS portion for my whole header section:
#header-section {
position: relative;
width: 100%;
padding: 5px 0px;
background: #740600;
}
#main-menu-wrapper {
position: relative;
width: 74%;
min-width: 600px;
height: auto;
margin: 0% auto;
}
#main-menu {
list-style: none;
font-weight: bold;
line-height: 150%;
}
#main-menu li {
position: relative;
float: right;
margin: 0px 5px;
}
#main-menu a {
padding: 3px;
color: #ffffff;
background: #740600;
text-decoration: none;
border-radius: 5px;
}
#main-menu a:hover {
padding: 3px;
color: #740600;
background: #ffffff;
text-decoration: none;
}
#main-menu li ul {
position: absolute;
display: none;
}
#main-menu li ul li{
float: none;
}
#main-menu li:hover ul {
display: block;
}
#main-menu li ul a {
padding: 3px;
color: #ccc;
background: #740600;
text-decoration: none;
border-radius: 5px;
}
#main-menu li ul a:hover {
padding: 3px;
color: #740600;
background: #ccc;
text-decoration: none;
}
#banner-wrapper {
position: relative;
padding: 5px 0 5px;
}
#banner {
position: relative;
max-width: 75%;
min-width: 600px;
margin: 0% auto;
background: #ffffff;
}
#logo {
max-width: 600px;
height: auto;
}
I'm a little confused by what you're asking here, but I created a fiddle where your menu shows.
I deleted the styles for #main-menu-wrapper and I removed the background color on #header-section.
Hopefully this can be a decent starting point for you: http://jsfiddle.net/44vRN/
#header-section {
position: relative;
width: 100%;
padding: 5px 0px;
}
You could try to use absolute positioning on the submenu to remove it from the document flow.