I am new to HTML5 and CSS3.
I am trying to have dropdown menu with linear animation.
I have already copied the animation from an existing template and the last remaining thing for me is to show the dropdown menu items. What is my fault in the given CSS3?
HTML File:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>My Page Title</title>
</head>
<body>
<div>
<ul class="menu" id="nav">
<li><a href=""><span>
Tab5</span></a>
<ul class="menu-hover">
<li>Tab5_1</li>
<li>Tab5_2</li>
<li>Tab5_3</li>
</ul>
</li>
<li><a href=""><span>
Tab4
</span></a>
<ul class="menu-hover">
<li>Tab4_1</li>
<li>Tab4_2</li>
</ul>
</li>
<li><span>Tab3</span>
<ul class="menu-hover">
<li>Tab3_1</li>
<li>Tab3_2</li>
<li>Tab3_3</li>
<li>Tab3_4</li>
</ul>
</li>
<li><a href=""><span>
Tab2
</span></a>
<ul class="menu-hover">
<li>Tab2_1</li>
<li> Tab2_2</li>
<li>Tab2_3 </li>
</ul>
</li>
<li><span>Tab1 </span>
<ul class="menu-hover">
<li>Tab1_1 </li>
<li>Tab1_2</li>
<li>Tab1_3</li>
</ul>
</li>
</ul>
</div>
<div><footer id="footer"></footer></div>
</body>
</html>
CSS3 File:
#charset "utf-8";
/* CSS Document */
* {
margin:0px;
padding:0px;
}
body {
background:#f4f4f4;
}
#nav {
width:933px;
margin:0 auto;
height:250px;
padding-top:20px;
}
ul li {
background:#2a2a2a;
list-style: none;
height: 44px;
float:left;
padding:10px 5px;
}
ul li a {
width: 175px;
height: 40px;
line-height: 53px;
border-bottom: 4px solid #636393;
padding:0px;
color: #fff;
font-size:18px;
font-weight:lighter;
text-align:center;
text-decoration: none;
display: block;
-webkit-transition: .2s all linear;
-moz-transition: .2s all linear;
-o-transition: .2s all linear;
transition: .2s all linear;
}
ul li a:visited {
color:#fff;
}
ul li:nth-child(1) a , #myID li:nth-child(1) a, #myID li:nth-child(2) a , #myID li:nth-child(3) a
{
border-color: #636393;
}
ul li:nth-child(2) a {
border-color: #B5222D;
}
ul li:nth-child(3) a {
border-color: #D4953C;
}
ul li:nth-child(4) a {
border-color: #609491;
}
ul li:nth-child(5) a {
border-color: #87A248;
}
ul li:nth-child(1) a:hover {
border-bottom: 35px solid #636393;
height: 9px;
color: #fff;
}
ul li:nth-child(2) a:hover {
border-bottom: 35px solid #B5222D;
height: 9px;
color: #fff;
}
ul li:nth-child(3) a:hover {
border-bottom: 35px solid #D4953C;
height: 9px;
color: #fff;
}
ul li:nth-child(4) a:hover {
border-bottom: 35px solid #609491;
height: 9px;
color: #fff;
}
ul li:nth-child(5) a:hover {
border-bottom: 35px solid #87A248;
height: 9px;
color: #fff;
}
ul.menu-hover{
visibility: hidden;
position: absolute;
top:100%;
opacity: 0;
height: 0;
width: 150px;
border-bottom: 1px solid #636393;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.menu li:hover .menu-hover{
visibility: visible;
height: 40px;
opacity: 1;
}
ul.menu-hover li{
height: 100%;
border-bottom: 4px solid #000;
background-color: #2a2a2a;
border-left: none;
border-right: none;
}
ul.menu-hover li:hover{
background-image: -webkit-linear-gradient(#2a2a2a, #434343);
background-image: -moz-linear-gradient(#2a2a2a, #434343);
background-image: -o-linear-gradient(#2a2a2a, #434343);
background-image: linear-gradient(#2a2a2a, #434343);
box-shadow: none;
}
try
.menu ul ul { position: absolute; }
it looks like you only have it on hover. You don't need to put it on hover.
oh sorry
also try this one FIRST
ul .menu-hover { position: absolute; }
in your code you have ul.menu-hover, there needs to be a space between them
I have finally corrected my CSS3 file to be as follows:
#charset "utf-8";
/* CSS Document */
* {
margin:0px;
padding:0px;
}
body {
background:#f4f4f4;
}
#nav {
width:933px;
margin:0 auto;
height:250px;
padding-top:20px;
}
#nav li {
background:#2a2a2a;
list-style: none;
height: 44px;
float:left;
padding:10px 5px;
}
#nav li a {
width: 175px;
height: 40px;
line-height: 53px;
border-bottom: 4px solid #636393;
padding:0px;
color: #fff;
font-size:18px;
font-weight:lighter;
text-align:center;
text-decoration: none;
display: block;
-webkit-transition: .2s all linear;
-moz-transition: .2s all linear;
-o-transition: .2s all linear;
transition: .2s all linear;
}
#nav li a:visited {
color:#fff;
}
#nav li:nth-child(1) a , #myID li:nth-child(1) a, #myID li:nth-child(2) a , #myID li:nth-child(3) a
{
border-color: #636393;
}
#nav li:nth-child(2) a {
border-color: #B5222D;
}
#nav li:nth-child(3) a {
border-color: #D4953C;
}
#nav li:nth-child(4) a {
border-color: #609491;
}
#nav li:nth-child(5) a {
border-color: #87A248;
}
#nav li:nth-child(1) a:hover {
border-bottom: 35px solid #636393;
height: 9px;
color: #fff;
}
#nav li:nth-child(2) a:hover {
border-bottom: 35px solid #B5222D;
height: 9px;
color: #fff;
}
#nav li:nth-child(3) a:hover {
border-bottom: 35px solid #D4953C;
height: 9px;
color: #fff;
}
#nav li:nth-child(4) a:hover {
border-bottom: 35px solid #609491;
height: 9px;
color: #fff;
}
#nav li:nth-child(5) a:hover {
border-bottom: 35px solid #87A248;
height: 9px;
color: #fff;
}
.menu li{
list-style: none;
float: left;
position: relative;
height: 40px;
}
.menu>li{
background-color: #a82222;
background-image: -webkit-linear-gradient(#a82222, #670000);
background-image: -moz-linear-gradient(#a82222, #670000);
background-image: -o-linear-gradient(#a82222, #670000);
background-image: linear-gradient(#a82222, #670000);
border-left: 1px solid #5f5f5f;
border-right: 1px solid #7e0000;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.menu li:first-child{
border-radius: 3px 0px 0px 3px;
border-left: none;
}
.menu li:last-child{
border-radius: 0px 3px 3px 0px;
border-right: none;
}
.menu a{
display: block;
text-decoration: none;
color: white;
text-transform: uppercase;
padding: 0 20px;
font-family: 'Verdana', arial;
margin: 0;
position: relative;
font-size: 12px;
line-height: 40px;
}
.menu li:hover{
-webkit-box-shadow: inset 0 0 10px #470000;
-moz-box-shadow: inset 0 0 10px #470000;
box-shadow: inset 0 0 10px #470000;
background-color: #a82222;
background-image: -webkit-linear-gradient(#911212, #670000);
background-image: -moz-linear-gradient(#911212, #670000);
background-image: -o-linear-gradient(#911212, #670000);
background-image: linear-gradient(#911212, #670000);
}
.menu li:hover span:after{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
ul.menu-hover{
visibility: hidden;
position: absolute;
top:100%;
opacity: 0;
height: 0;
width: 150px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.menu li:hover .menu-hover{
visibility: visible;
height: 100%;
opacity: 1;
}
.menu-hover li{
height: 100%;
border-bottom: 1px solid #696969;
background-color: #2a2a2a;
border-left: none;
border-right: none;
}
.menu-hover li:hover{
background-image: -webkit-linear-gradient(#2a2a2a, #434343);
background-image: -moz-linear-gradient(#2a2a2a, #434343);
background-image: -o-linear-gradient(#2a2a2a, #434343);
background-image: linear-gradient(#2a2a2a, #434343);
box-shadow: none;
}
.menu-hover a{
color: white;
}
.menu a span:after{
content: "";
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 3px solid white;
position: absolute;
top: 30px;
right: 35px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.menu-hover li:first-child, .menu-hover li:last-child{
border-radius: 0;
}
.menu a:after {
background: rgba(255,255,255,.07);
content: "";
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
Related
I am trying to create a smooth animation of my nav-bar in CSS here's my HTML Code-
<body>
<nav class="navbar">
<ul class="nav-list another">
<li><n>Engine</n></li>
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
<li><button type="button" id="mysearch">More</button></li>
</ul>
</nav>
<hr>
</body>
</html>
Here's my CSS Code-
*{
margin: 0;
padding: 0;
}
html{
background-color: white;
background-image: url("img/ManHattanImage.webp");
}
li{
align-items: left;
width: 100px;
height: 100%;
display: inline-block;
margin-right: 170px;
font-size: 20px;
/* background-color: black; */
color: black;
font-size: 20px;
}
hr{
color: black;
margin-top: 30px;
}
n{
/* background-color: black; */
color: white;
font-size: 40px;
font-style: bold;
font-family: "Lucida Console", "Courier New", monospace;
margin-left: 20px;
margin-top: 30px;
}
a {
text-decoration: none;
color: white;
}
a:visited { text-decoration: none; }
a:hover {
text-decoration: none;
/* background-color: black; */
}
a:focus { text-decoration: none; }
a:hover, a:active { text-decoration: none; }
nav:hover{
height:300px;
}
I want a clean Animation like of a good dropdown menu navbar and with clear overlaps, Also I may add some more elements inside the navbar (With Further Updates)?
This is how to make a dropdown menu but I'm not sure how to do an animation. I hope this is what you meant by the dropdown menu.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #ac0d0d;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: rgb(18, 19, 85);
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #ac0d0d;}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Dropdown menu</button>
<div class="dropdown-content">
first
second
third
</div>
</div>
</body>
</html>
Animation Drop down menu on hover
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
nav {
width: 100%;
height: 80px;
background: #222;
}
ul {
text-align: center;
}
ul li {
font: 13px Verdana, 'Lucida Grande';
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}
ul li.drop {
position: relative;
}
ul > li {
display: inline-block;
}
ul li a {
line-height: 80px;
padding: 0 20px;
height: 80px;
color: #777;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
ul li a:hover {
color: #eee;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px; /* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}
.dropOut ul li:hover {
background: #f6f6f6;
}
ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
</style>
<body>
<nav>
<ul>
<li class="drop">
You
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Plan</li>
<li>Account Settings</li>
<li>Switch Account</li>
<li>Sign Out</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</body>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I am trying add notification icon, but is overflow text and dont on left.
Here is my code (run the snippet to see the result):
.dropdown {
display: inline-block;
cursor: pointer;
border: 1px solid #fff;
}
.dropdown:hover {
color: #e1a900;
}
.dropdown-content {
background-color: #333333;
display: none;
position: relative;
min-width: 180px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
margin-top: 64px;
}
.dropdown-content a {
color: #fff;
font-weight: bold;
padding: 12px 12px;
text-decoration: none;
display: block;
-o-transition:color .2s ease-out, background .3s ease-in;
-ms-transition:color .2s ease-out, background .3s ease-in;
-moz-transition:color .2s ease-out, background .3s ease-in;
-webkit-transition:color .2s ease-out, background .3s ease-in;
transition:color .2s ease-out, background .3s ease-in;
}
.dropdown-content a:hover {background-color: #cc9900;}
.dropdown:hover .dropdown-content {display: block;}
.bellimg {
padding-top: 5px;
}
.bellnumbers {
font-size:12px;
background-color:red;
width:16px;
line-height: 16px;
text-align: center;
color:#fff;
z-index: 2;
border-radius: 3px;
position: absolute;
left: 30px;
}
.bell {
border: 1px solid #fff;
width: 48px;
height: 42px;
left: 30;
position: absolute;
}
.notificationicon {
position: absolute;
top: 0px;
right: 0px;
border: 1px solid #fff;
}
/********************************
* Menu Styles *
*********************************/
#menu {
height: 64px;
width: 450px;
}
#menu ul,#menu li {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
float: left;
display: inline;
position: relative;
}
#menu li a {
color: #fff;
font-weight: bold;
-o-transition: color .2s ease-out, background .3s ease-in;
-ms-transition: color .2s ease-out, background .3s ease-in;
-moz-transition: color .2s ease-out, background .3s ease-in;
-webkit-transition: color .2s ease-out, background .3s ease-in;
transition: color .2s ease-out, background .3s ease-in;
}
#menu a {
display: block;
line-height: 35px;
padding: 14px 10px 14px 5px;
text-decoration: none;
color: #fff;
border-bottom: 1px solid #000;
}
#menu li:hover > a,#menu li a:hover {
color: #fff;
background-color: #e1a900;
}
#menu input {
display: none;
margin: 0 0;
padding: 0 0;
width: 80px;
height: 35px;
opacity: 0;
cursor: pointer;
}
#menu label {
display: none;
width: 35px;
height: 36px;
line-height: 36px;
text-align: center;
}
#menu label span {
font-size: 13px;
position: absolute;
left: 35px;
}
#menu ul.menus {
/*background sub menus*/
height: auto;
overflow: hidden;
width: 180px;
background-color: #333333;
position: absolute;
z-index: 99;
display: none;
border: 1px solid #000;
border-top: none;
color: #fff;
}
#menu ul.menus a {
color: #fff;
padding: 0px;
}
#menu ul.menus li {
display: block;
width: 100%;
text-transform: none;
}
#menu li:hover ul.menus {
display: block;
border-top: 2px solid red;
border-bottom: 2px solid red;
}
#menu a.prett {
padding: 14px 19px 14px 5px;
}
#menu li:hover > a.prett,#menu a.prett:hover {
/*DropDown list background color*/
background: #e1a900;
color: #fff;
}
#menu a.prett::after {
content: "";
width: 0;
height: 0;
border-width: 6px 5px;
border-style: solid;
border-color: #eee transparent transparent transparent;
position: absolute;
top: 30px;
right: 4px;
}
#menu ul.menus a:hover {
/*Dropdown menu background color*/
background: #e1a900;
}
#media screen and (max-width: 1000px){
#menu {width: 150px;}
#menu a {padding: 0px; border-bottom: 1px solid #000;}
#menu a.prett {padding: 0px;}
#menu a.prett::after {top: 15px;right: 4px;}
#menu{position:relative;margin-top:0;}
#menu ul{background-color: #333333;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;border:none; border-top: 2px solid red; border-bottom: 2px solid red;}
#menu li{display:block;float:none;width:auto;text-align:left}
#menu li a{color:#fff}
#menu li a:hover{color:#333}
#menu li:hover{background:#e1a900;color:#fff;}
#menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}
#menu ul.menus a{background-color: #4d4d4d;}
#menu ul.menus a:hover{background:#e1a900;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block;margin-top: 15px;}
#menu input{z-index:4}
#menu input:checked + label{color:#e1a900; background-color: #404040;}
#menu input:checked ~ ul{display:block;}
}
.menu_head {
width: 100%;
height: 64px;
background-color: #000;
background-image: url("../images/menu.png");
box-shadow: 0 3px 6px rgba(0,0,0, .8);
background-position: top;
text-align: center;
padding-left: 10px;
padding-right: 10px;
position: fixed;
top: 0;
color: #fff;
z-index:1;
font-weight: bold;
border: 1px solid #fff;
}
<div class='menu_head'>
<!-- MENU LEFT -->
<nav id='menu' style='border: 1px solid #fff;'>
<input type='checkbox'/>
<label>≡<span>MENU</span></label>
<ul>
<li><a href=''>Home</a></li>
<li><a class='prett' href='' onclick='return false;'>Rules</a>
<ul class='menus'>
<li><a href='#'>Rules </a></li>
</ul>
</li>
<li><a class='prett' href='' onclick='return false;'>Suporte</a>
<ul class='menus'>
<li><a href='#'>Terms of Service</a></li>
</ul>
</li>
</ul>
</nav>
<div class='notificationicon'>
<span class='bell'>
<img class='bellimg' src='../images/notification.png'/>
<span class='bellnumbers'>10</span>
</span>
<span class='dropdown'>
<div style='float: right; line-height: 64px; margin-right:15px;'>Welcome asd asd asd asd x3G</div>
<div class='dropdown-content'>
<a href=''>PROFILE</a>
<a href=''>TEAM</a>
<a href=''> SETINGS</a>
<a href=''>BALANCE</a>
<a href=''> INBOX</a>
<a href=''> LOG OUT</a>
</div>
</span>
<div style='clear:both;'></div>
</div>
<div style='clear:both;'></div>
</div>
On the .bell class you have defined the left property value without a unit, for example px (See image below for reference)
Simply add a unit like px or % and it should work:
.bell {
left: 30px;
}
I need to add an effect for my mobile where the menu is display smoothly when the navigation button is hovered.
what I need is that the menu should display with ease not sudden appearance and if its possible not to adjust the content of my site like overlapping the content above if plausible
CSS
.menuimg:hover + #navcontainer {
display: block;
height: auto;
}
#navcontainer:hover {
display: block;
height: auto;
}
.children {
display: none;
}
#navcontainer {
position: relative;
z-index: 1;
display: block;
float: none;
width: 100%;
height: 20px;
list-style: none;
text-align: center;
}
.menu {
display: inline-block;
float: left;
width: auto;
text-align: left;
}
#navcontainer ul {
overflow: hidden;
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
}
#navcontainer ul li {
display: block;
float: left;
margin-left: 0;
padding: 0 6px;
}
#navcontainer ul li a {
display: block;
width: 100%;
padding: .2em 1em;
text-decoration: none;
color: #694a31;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-left: 1px solid transparent;
background-color: transparent;
}
#navcontainer ul li ul li {
display: block;
float: none;
width: auto;
margin-left: 0;
border-top: 1px solid #e3d7be;
background: #edebd7;
}
#navcontainer ul li ul li a {
opacity: 1 !important;
color: #724e32;
border-top: 0 !important;
border-right: 0 !important;
border-left: 0 !important;
-webkit-border-radius: 0 0 0 0 !important;
-moz-border-radius: 0 0 0 0 !important;
border-radius: 0 0 0 0 !important;
background: transparent !important;
background-color: transparent !important;
}
#navcontainer li:hover ul,
#navcontainer li:active ul {
display: block;
}
#navcontainer ul li:hover a {
opacity: .5;
color: #724e32;
border-top: 1px solid #694b0a;
border-right: 1px solid #694b0a;
border-left: 1px solid #694b0a;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
background-color: #edebd7;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #d3c096;
}
#navcontainer li:hover ul.children,
#navcontainer li:active ul.children {
position: absolute;
z-index: 300;
top: auto;
overflow: visible;
width: auto;
height: auto;
padding: 5px;
white-space: nowrap;
color: #724e32;
border-right: 1px solid #694b0a;
border-bottom: 1px solid #694b0a;
border-left: 1px solid #694b0a;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
background: #edebd7;
}
#navcontainer ul li ul li:hover {
margin-left: 0;
color: #fff;
background-color: #d3c096;
}
#navcontainer ul li ul li a:hover {
margin-left: 0;
color: #fff;
background-color: #d3c096;
}
#navcontainer ul li ul li:hover a {
color: #fff;
background-color: transparent;
}
I want is to appear my menu at easy like from fading transition when i hovered on the navigation button
http://prntscr.com/4yverw
i have tested my css on fiddle its working fine there but when i transfer it to my site the menu transition doesn't work change and addeds some
.menu { display:none > opacity:0
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;}
.menuimg:hover + .menu
{
display: block; height: auto; opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}.menu:hover
{
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out; display: block; height: auto;
}
http://jsfiddle.net/xeqcx1zL/1/ - workign trasition
i changed the code
original code
.menuimg:hover + #navcontainer
#navcontainer:hover
to this
.menuimg:hover + .menu
.menu:hover
I have now my transition menu the only problem is that since i remove the display:none; the menu is always their but you cant see it since its on opacity:0; i want to hide it so it doesnt eats a space on my site, but using the display none and block css the transition wont work.
the menu is displayed under the button but you cant see it. it should be activated if you hover your mouse on the button.
http://prntscr.com/4z4jah
I have reformatted ready-made dropdown menu and added some linear animation to it but I have a problem in the color of some elements like: "Tab4_5", "Tab3_3", "Tab1_2", "Tab1_3"
Here is my HTML file:
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style_colors.css">
<title>My Page Title</title>
</head>
<body>
<ul class="menu" id="nav">
<li><span>Tab1</span>
<ul class="menu-hover" id="myID">
<li>Tab1_1</li>
<li>Tab1_2</li>
<li>Tab1_3</li>
</ul>
</li>
<li><span>Tab2</span>
<ul class="menu-hover">
<li>Tab2_1</li>
<li>Tab2_2</li>
</ul>
</li>
<li><span>Tab3</span>
<ul class="menu-hover">
<li>Tab3</li>
<li>Tab3_1</li>
<li>Tab3_2</li>
<li>Tab3_3</li>
</ul>
</li>
<li><span>Tab4</span>
<ul class="menu-hover">
<li>Tab4_1</li>
<li>Tab4_2</li>
<li>Tab4_3</li>
<li>Tab4_4</li>
<li>Tab4_5</li>
</ul>
</li>
<li><span>Tab5</span>
<ul class="menu-hover">
<li>Tab5_1</li>
<li>Tab5_2</li>
<li>Tab5_3</li>
<li>Tab5_4</li>
<li>Tab5_5</li>
</ul>
</li>
</ul>
</body>
</html>
Here is my CSS3 file:
#charset "utf-8";
/* CSS Document */
* {
margin:0px;
padding:0px;
}
body {
background:#f4f4f4;
}
#nav {
width:933px;
margin:0 auto;
height:250px;
padding-top:20px;
}
#nav li {
background:#2a2a2a;
list-style: none;
height: 44px;
float:left;
padding:10px 5px;
}
#nav li a {
width: 175px;
height: 40px;
line-height: 53px;
border-bottom: 4px solid #636393;
padding:0px;
color: #fff;
font-size:18px;
font-weight:lighter;
text-align:center;
text-decoration: none;
display: block;
-webkit-transition: .2s all linear;
-moz-transition: .2s all linear;
-o-transition: .2s all linear;
transition: .2s all linear;
}
#nav li a:visited {
color:#fff;
}
#nav li:nth-child(1) a , #myID li:nth-child(1) a , #myID li:nth-child(2) a , #myID li:nth-child(3) a
{
border-color: #636393;
}
#nav li:nth-child(2) a {
border-color: #B5222D;
}
#nav li:nth-child(3) a {
border-color: #D4953C;
}
#nav li:nth-child(4) a {
border-color: #609491;
}
#nav li:nth-child(5) a {
border-color: #87A248;
}
#nav li:nth-child(1) a:hover {
border-bottom: 35px solid #636393;
height: 9px;
color: #fff;
}
#nav li:nth-child(2) a:hover {
border-bottom: 35px solid #B5222D;
height: 9px;
color: #fff;
}
#nav li:nth-child(3) a:hover {
border-bottom: 35px solid #D4953C;
height: 9px;
color: #fff;
}
#nav li:nth-child(4) a:hover {
border-bottom: 35px solid #609491;
height: 9px;
color: #fff;
}
#nav li:nth-child(5) a:hover {
border-bottom: 35px solid #87A248;
height: 9px;
color: #fff;
}
.menu li{
list-style: none;
float: left;
position: relative;
height: 40px;
}
.menu>li{
background-color: #a82222;
background-image: -webkit-linear-gradient(#a82222, #670000);
background-image: -moz-linear-gradient(#a82222, #670000);
background-image: -o-linear-gradient(#a82222, #670000);
background-image: linear-gradient(#a82222, #670000);
border-left: 1px solid #5f5f5f;
border-right: 1px solid #7e0000;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.menu li:first-child{
border-radius: 3px 0px 0px 3px;
border-left: none;
}
.menu li:last-child{
border-radius: 0px 3px 3px 0px;
border-right: none;
}
.menu a{
display: block;
text-decoration: none;
color: white;
text-transform: uppercase;
padding: 0 20px;
font-family: 'Verdana', arial;
margin: 0;
position: relative;
font-size: 12px;
line-height: 40px;
}
.menu li:hover{
-webkit-box-shadow: inset 0 0 10px #470000;
-moz-box-shadow: inset 0 0 10px #470000;
box-shadow: inset 0 0 10px #470000;
background-color: #a82222;
background-image: -webkit-linear-gradient(#911212, #670000);
background-image: -moz-linear-gradient(#911212, #670000);
background-image: -o-linear-gradient(#911212, #670000);
background-image: linear-gradient(#911212, #670000);
}
.menu li:hover span:after{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
ul.menu-hover{
visibility: hidden;
position: absolute;
top:100%;
opacity: 0;
height: 0;
width: 150px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.menu li:hover .menu-hover{
visibility: visible;
height: 100%;
opacity: 1;
}
.menu-hover li{
height: 100%;
border-bottom: 1px solid #696969;
background-color: #2a2a2a;
border-left: none;
border-right: none;
}
.menu-hover li:hover{
background-image: -webkit-linear-gradient(#2a2a2a, #434343);
background-image: -moz-linear-gradient(#2a2a2a, #434343);
background-image: -o-linear-gradient(#2a2a2a, #434343);
background-image: linear-gradient(#2a2a2a, #434343);
box-shadow: none;
}
.menu-hover a{
color: white;
}
.menu a span:after{
content: "";
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 3px solid white;
position: absolute;
top: 30px;
right: 35px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.menu-hover li:first-child, .menu-hover li:last-child{
border-radius: 0;
}
.menu a:after {
background: rgba(255,255,255,.07);
content: "";
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
Try this:
#nav li:nth-of-type(1) ul li a
{
border-color: #636393;
}
#nav li:nth-of-type(2) ul li a, #nav li:nth-of-type(2) a {
border-color: #B5222D;
}
#nav li:nth-of-type(3) ul li a, #nav li:nth-of-type(3) a {
border-color: #D4953C;
}
#nav li:nth-of-type(4) ul li a, #nav li:nth-of-type(4) a {
border-color: #609491;
}
#nav li:nth-of-type(5) ul li a, #nav li:nth-of-type(5) a {
border-color: #87A248;
}
#nav li:nth-of-type(1) ul li a:hover {
border-bottom: 35px solid #636393;
height: 9px;
color: #fff;
}
#nav li:nth-of-type(2) ul li a:hover {
border-bottom: 35px solid #B5222D;
height: 9px;
color: #fff;
}
#nav li:nth-of-type(3) ul li a:hover {
border-bottom: 35px solid #D4953C;
height: 9px;
color: #fff;
}
#nav li:nth-of-type(4) ul li a:hover {
border-bottom: 35px solid #609491;
height: 9px;
color: #fff;
}
#nav li:nth-of-type(5) ul li a:hover {
border-bottom: 35px solid #87A248;
height: 9px;
color: #fff;
}
i have a CSS menu with this CSS Code:
#cssmenu ul { margin: 0; padding: 0; text-align: center; }
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu {height: 50px; background-color: #f36f25; box-shadow: 0px 2px 3px rgba(0,0,0,.4);}
#cssmenu > ul > li {
display: inline-block;
margin-left: 15px;
position: relative;
}
#cssmenu > ul > li > a {
color: #ffffff;
font-size: 15px;
line-height: 50px;
padding: 16px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {color: #ffffff; background-color:#666666; }
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #eeeeee;
text-align: left;
position: absolute;
top: 30px;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 50px;
visibility: visible;
}
#cssmenu > ul > li > ul:before{
content: '';
display: block;
border-color: transparent transparent rgb(250,250,250) transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li { position: relative;}
#cssmenu ul ul a{
color: #000000;
font-size: 13px;
background-color: #eeeeee;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color .1s;
-moz-transition: background-color .1s;
-o-transition: background-color .1s;
transition: background-color .1s;
}
#cssmenu ul ul a:hover {background-color: #f36f25;}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: #eeeeee;
text-align: left;
width: 160px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}
#cssmenu ul ul a:hover{
background-color: #f36f25;
color: rgb(240,240,240);
}
There is a slider underneath the nav code but the sub menus on the navigation are displaying behind the images on the slider, any ideas what i can do to get them to display in front of the slider images?
JS Fiddle of the menu is here: http://jsfiddle.net/JLRte/
Add a z-index to the menu: #cssmenu *{ z-index: 999 } Fiddle: http://jsfiddle.net/JLRte/1/