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>
Related
i'm trying to make a hover animation that has an underline line appearing when the mouse is over it.
what can i add to achieve that? i tried the pre made ones but it didn't work. it showed an line appearing but not under the navbar text but under the website itself (on the bottom of the screen).
html,
body {
margin: 0;
padding: 0;
background-color: grey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
height: 100px;
}
li {
padding: 40px 16px;
display: table-cell;
text-align: center;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
font-size: 17px;
letter-spacing: 2.5px;
}
li a:hover {
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.hover-nav {
background-color: tomato;
}
#logo {
margin-left: 30px;
margin-top: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mob-Mob</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<img src="img/logo.png" alt="" style="width: 139px;" id="logo">
<li style="float: right;" class="hover-nav">კონტაქტი</li>
<li style="float: right;">ჩვენს შესახებ</li>
<li style="float: right;">ქეისები</li>
</ul>
</nav>
</body>
</html>
Try this code, I marked my edits on your css code.
html,
body {
margin: 0;
padding: 0;
background-color: grey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
height: 100px;
}
li {
padding: 40px 16px;
display: table-cell;
text-align: center;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
font-size: 17px;
letter-spacing: 2.5px;
}
li a:hover {
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
/*Edit starts here*/
li {
position:relative;
}
li::after {
content: '';
display: block;
width: 0;
position:absolute;
left:50%;
height: 2px;
background: #0077ff;
transition: cubic-bezier(.77,0,.18,1) 1s;
}
li:hover::after {
width: 80%;
left: 10%;
}
li {
transition: cubic-bezier(.77,0,.18,1) 1s;
}
li:hover {
background-color: tomato;
}
/*Edit ends here*/
#logo {
margin-left: 30px;
margin-top: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mob-Mob</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<img src="img/logo.png" alt="" style="width: 139px;" id="logo">
<li style="float: right;">კონტაქტი</li>
<li style="float: right;">ჩვენს შესახებ</li>
<li style="float: right;">ქეისები</li>
</ul>
</nav>
</body>
</html>
You should apply the transition to the element, not its hover state. With transition you are telling telling the element how to behave if anything changes. In this case all styles (that are susceptible to a transition) for a period of 0.3 seconds with an ease-in-out speed curve.
Then use the :hover selector to indicate what changes need to be made. So in this case change the background color and add an underline to the text.
Also avoid using inline styles when possible.
html, body {
margin: 0;
padding: 0;
background-color: grey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
height: 100px;
}
li {
text-align: center;
float: right;
}
li a {
display: block;
color: white;
padding: 40px 16px;
text-decoration: none;
font-size: 17px;
letter-spacing: 2.5px;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
li a:hover {
background-color: tomato;
text-decoration: underline;
}
<nav>
<ul>
<li>კონტაქტი</li>
<li>ჩვენს შესახებ</li>
<li>ქეისები</li>
</ul>
</nav>
If you intended to apply an underline to the bottom of the box instead of the text you can use border-bottom and makes sure to use box-sizing: border box so your element will remain the same size when the border gets added.
html, body {
margin: 0;
padding: 0;
background-color: grey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
height: 100px;
}
li {
text-align: center;
float: right;
}
li a {
display: block;
color: white;
padding: 40px 16px;
text-decoration: none;
font-size: 17px;
letter-spacing: 2.5px;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
box-sizing: border-box;
height: 100px;
}
li a:hover {
background-color: tomato;
border-bottom: 1px solid white;
}
<nav>
<ul>
<li>კონტაქტი</li>
<li>ჩვენს შესახებ</li>
<li>ქეისები</li>
</ul>
</nav>
Add text-decoration:underline to your li:hover code like this...
li a:hover {
text-decoration:underline;
}
HTML Code Invalid you added <a> section in <ul> without <li> tag
<ul>
<img src="img/logo.png" alt="" style="width: 139px;" id="logo">
<li style="float: right;" class="hover-nav">კონტაქტი</li>
<li style="float: right;">ჩვენს შესახებ</li>
<li style="float: right;">ქეისები</li>
</ul>
changes to
<ul>
<li><img src="img/logo.png" alt="" style="width: 139px;" id="logo"></li>
<li style="float: right;" class="hover-nav">კონტაქტი</li>
<li style="float: right;">ჩვენს შესახებ</li>
<li style="float: right;">ქეისები</li>
</ul>
Edit in CSS:
ul {
width:100%;
display: flex;
align-items: center;
}
li {
width:100%; // remove padding and add to `li a`.
}
li a{
border-bottom:4px solid transparent;
height: 100px !important;
display: flex;
align-items: center;
justify-content: center;
}
li a:hover { // instead of .hover-nav
background-color: tomato;
border-bottom:4px solid #fff;
}
// remove #logo margin
Working Demo
html,
body {
margin: 0;
padding: 0;
background-color: grey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
background-color: #333;
height: 100px;
display: flex;
align-items: center;
}
li {
width:100%;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
font-size: 17px;
letter-spacing: 1.5px;
border-bottom:4px solid transparent;
height: 100px !important;
display: flex;
align-items: center;
justify-content: center;
}
li a:hover {
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
li a:hover {
background-color: tomato;
border-bottom:4px solid #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mob-Mob</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><img src="https://dummyimage.com/100x100/52d41e/fff&text=Logo" alt="" style="width:100%;" id="logo"></li>
<li class="hover-nav">კონტაქტი</li>
<li>ჩვენს შესახებ</li>
<li>ქეისები</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 have a fixed menu bar that contains a simple <ul> <li> menu system. Upon li:hover I have a sub-menu system aside appear, and this is relative to each li. Unfortunately this aside is always appearing on top of all of the parents.
When I actually want it to be positioned behind the div#sidebar. Is this possible? I have not had much luck with z-index (including -1), any help would be appreciated!
<div id="sidebar">
<nav class="secondary">
<h2>Featured</h2>
<ul>
<li>
<a href="#">
<h3>Title</h3>
</a>
<aside class="article-card">
<h4>TITLE</h4>
<h5>TEXT</h5>
</aside>
</li>
</ul>
</nav>
</div>
ul {
list-style: none;
display: inline-block;
width: 59.6%;
margin-right: 9.1%;
float: right;
margin-bottom: 40px;
}
li {
display: block;
margin-bottom: 10px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#sidebar {
background: #253e40;
color: #8b8c91;
width: 215px;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
right: 215px;
margin-right: -215px; /* "#sidebar" width */
z-index: 3;
}
#sidebar.active { margin-right: 0; }
#sidebar header {
font-weight: bold;
padding: 30px 20px 50px 20px;
border-bottom: 1px solid #8b8c91;
color: #8b8c91;
}
#sidebar footer {
background: none;
bottom: 40px;
padding: 0 20px;
position: absolute;
}
/* Nav */
#sidebar nav {
width: 100%;
margin: 20px 0 50px 0;
display: inline-block;
}
#sidebar ul {
width: 100%;
margin: 0;
}
#sidebar li {
margin-bottom: 0;
padding: 2px 20px;
}
#sidebar li:before {
content: none;
padding: 0;
}
.current-menu-item {
font-weight: bold;
color: #fff;
}
#sidebar a:hover {
color: #fff;
}
#sidebar nav.secondary h2 {
font-weight: bold;
color: #fff;
padding: 0 20px 15px 20px;
border-bottom: 1px solid #8b8c91;
}
#sidebar nav.secondary li {
padding: 15px 20px;
border-bottom: 1px solid #8b8c91;
}
#sidebar nav.secondary li:hover {
background: #252f37;
color: #fff;
}
/* Article Card Popout */
.article-card {
position: absolute;
background-color: #44484f;
display: inline-block;
width: 200px;
height: auto;
right: 15px;
border-left: 5px solid #be572b;
}
#sidebar nav.secondary li:hover .article-card {
right: 215px;
}
.article-card h4 {
font-weight: bold;
padding: 10px;
}
.article-card h5 {
color: #fff;
padding: 10px;
}
/* Transition animations */
#sidebar,
.article-card {
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
Fiddle
If you really want to keep that html, you need to create a new stacking context. #sidebar has position:fixed - elements inside sidebar are treated with a new stacking context that now begins at #sidebar and not at body level any more.
Children of the sidebar cannot be positioned below #sidebar.
To solve this add another container inside sidebar that contains all the background styling and is inside the same stacking context as your slideout.
ul {
list-style: none;
display: inline-block;
width: 59.6%;
margin-right: 9.1%;
float: right;
margin-bottom: 40px;
}
li {
display: block;
margin-bottom: 10px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#sidebar {
background: #253e40;
color: #8b8c91;
width: 215px;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
right: 215px;
margin-right: -215px; /* "#sidebar" width */
z-index: 3;
}
#sidebar.active { margin-right: 0; }
.sidebar-content {
height: 100%;
background: #253e40;
}
#sidebar header {
font-weight: bold;
padding: 30px 20px 50px 20px;
border-bottom: 1px solid #8b8c91;
color: #8b8c91;
}
#sidebar footer {
background: none;
bottom: 40px;
padding: 0 20px;
position: absolute;
}
/* Nav */
#sidebar nav {
width: 100%;
margin: 20px 0 50px 0;
display: inline-block;
}
#sidebar ul {
width: 100%;
margin: 0;
}
#sidebar li {
margin-bottom: 0;
padding: 2px 20px;
}
#sidebar li:before {
content: none;
padding: 0;
}
.current-menu-item {
font-weight: bold;
color: #fff;
}
#sidebar a:hover {
color: #fff;
}
#sidebar nav.secondary h2 {
font-weight: bold;
color: #fff;
padding: 0 20px 15px 20px;
border-bottom: 1px solid #8b8c91;
}
#sidebar nav.secondary li {
padding: 15px 20px;
border-bottom: 1px solid #8b8c91;
}
#sidebar nav.secondary li:hover {
background: #252f37;
color: #fff;
}
/* Article Card Popout */
.article-card {
position: absolute;
z-index: -1; // z index put's it below .sidebar-content
background-color: #44484f;
display: inline-block;
width: 200px;
height: auto;
right: 15px;
border-left: 5px solid #be572b;
}
#sidebar nav.secondary li:hover .article-card {
right: 215px;
}
.article-card h4 {
font-weight: bold;
padding: 10px;
}
.article-card h5 {
color: #fff;
padding: 10px;
}
/* Transition animations */
#sidebar,
.article-card {
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
<div id="sidebar">
<div class="sidebar-content">
<nav class="secondary">
<h2>Featured</h2>
<ul>
<a href="#">
<li>Title
<aside class="article-card">
<h4>TITLE</h4>
<h5>TEXT</h5>
</aside>
</li>
</a>
</ul>
</nav>
</div>
</div>
I am trying to create a simple CSS dropdown menu, the function is correct but I am having issues when I place it inside a holding DIV. The menu expands inside the DIV and adds scrolling bars.
I have tried hiding the overflow and positioning the elements but it has no effect:
JSFIDDLE
body
{
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
}
.dropdown
{
text-align: left;
display: inline;
margin: 0;
padding: 0px 4px 0px 0px;
list-style: none;
}
.dropdown li
{
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
/*padding: 15px 20px;*/
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.dropdown li:hover
{
background: #555;
color: #fff;
}
.dropdown li ul
{
padding: 0;
position: absolute;
top: 18px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.dropdown li ul li
{
display: block;
color: #000;
padding-bottom: 5px;
}
.dropdown li ul li:hover
{
background: #666;
}
.dropdown li:hover ul
{
display: block;
opacity: 1;
visibility: visible;
}
<div style="box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.08), 1px 1px 4px rgba(255, 255, 255, 0.08) inset;border: 1px solid #DDD; overflow: auto; background-color: #FFF; text-align: center; border-radius: 10px; width:100%; height:50px;">
<ul class="dropdown">
<li>Section1
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
</ul>
</div>
try like this: JSFIDDLE
.dropdown {
text-align: left;
display: inline-block;
margin: 0;
padding: 0px 4px 0px 0px;
list-style: none;
position:absolute;
top:0;
}
HTML:
<div style="box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.08), 1px 1px 4px rgba(255, 255, 255, 0.08) inset;border: 1px solid #DDD;
background-color: #FFF;
text-align: center;
border-radius: 10px;
width:100%;
height:50px; position:relative;">
Add position relative to div and remove overflow property. then add position:absolute to dropdown. Hope this helps !!
Code With Snippet below
body
{
font-family:'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
}
.dropdown
{
text-align: left;
display: inline-block;
margin: 0;
padding: 0px 4px 0px 0px;
list-style: none;
position:absolute;
top:0;
}
.dropdown li
{
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
/*padding: 15px 20px;*/
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.dropdown li:hover
{
background: #555;
color: #fff;
}
.dropdown li ul
{
padding: 0;
position: absolute;
top: 18px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.dropdown li ul li
{
display: block;
color: #000;
padding-bottom: 5px;
}
.dropdown li ul li:hover
{
background: #666;
}
.dropdown li:hover ul
{
display: block;
opacity: 1;
visibility: visible;
}
<div style="box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.08), 1px 1px 4px rgba(255, 255, 255, 0.08) inset;border: 1px solid #DDD;background-color: #FFF;text-align: center;border-radius: 10px;width:100%;height:50px; position:relative;">
<ul class="dropdown">
<li>Section1
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
</ul>
</div>
Give the .dropdown a position absolute; as well.
Fiddle
please try this one:
please Add .dropdown css like this:position absolute;
JSFIDDLE
body
{
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
}
.dropdown
{
position: absolute;
text-align: left;
display: inline;
margin: 0;
padding: 0px 4px 0px 0px;
list-style: none;
}
.dropdown li
{
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
/*padding: 15px 20px;*/
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.dropdown li:hover
{
background: #555;
color: #fff;
}
.dropdown li ul
{
padding: 0;
position: absolute;
top: 18px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.dropdown li ul li
{
display: block;
color: #000;
padding-bottom: 5px;
}
.dropdown li ul li:hover
{
background: #666;
}
.dropdown li:hover ul
{
display: block;
opacity: 1;
visibility: visible;
}
<div style="box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.08), 1px 1px 4px rgba(255, 255, 255, 0.08) inset;border: 1px solid #DDD;overflow: auto;background-color: #FFF;text-align: center;border-radius: 10px;width:100%;height:50px;">
<ul class="dropdown">
<li>Section1
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
</ul>
</div>
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%;
}