So, I used sidebar menu in my web. At the first, this sidebar just has 100px, and when I hover the mouse to it, it will shows up all the sidebar. this is the image, before and after hover:
My HTML code:
.sidenav {
height: 100%;
width: 100px;
position: fixed;
z-index: 2;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.8s;
}
.sidenav:hover{
width: 250px;
transition: 0.8s;
}
.sidenav a {
float:left;
width:100%;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
opacity: 0;
transition: opacity 1300ms
}
.sidenav:hover a {
opacity: 1
}
.icon{
display: block;
position: relative;
left: 50%;
top: 50%;
width: 15px;
height: 15px;
float: left;
border-radius: 50%;
border: 1px solid red;
border-top-color: transparent;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
<body>
<div id="mySidenav" class="sidenav"> <!-- CSSnya di 2691 -->
<br><br>
Home
Menu 1
Menu 2
Menu 3
Menu 4
Menu 5
</div>
</body>
all my link menu is hidden when sidebar is not hover, and will appear when hovered. My question is how to just display icons when sidebar is not hover, and display all when its hover, where I use this class:
so its still shows when sidebar not hover and still in one line with the link menu? thanks
You can use FontAwesome for the icons. Hope it helped.
.sidenav a {
float: left;
width: 250px;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 16px;
display: block;
line-height: 37px;
color: transparent;
transition: 1300ms;
height: 30px;
font-family: arial;
letter-spacing: 1px;
text-transform: uppercase;
}
i {
display: block;
position: relative;
width: 15px;
height: 15px;
float: left;
border-radius: 50px;
border: 1px solid red;
padding: 10px;
text-align: center;
line-height: 15px !important;
color: #fff;
opacity: 1;
margin-right: 10px;
font-size: 15px !important;
}
.sidenav {
width: 100px;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.8s;
}
.sidenav:hover {
width: 250px;
overflow: hidden;
transition: 0.8s;
}
.sidenav:hover a {
color: #fff;
}
<script src="https://use.fontawesome.com/7a90a673fc.js"></script>
<div id="mySidenav" class="sidenav">
<br><br>
<i class="fa fa-bars"></i> Home
<i class="fa fa-comment"></i> Menu 1
<i class="fa fa-users"></i> Menu 2
<i class="fa fa-thumbs-up"></i> Menu 3
<i class="fa fa-facebook"></i> Menu 4
<i class="fa fa-close"></i> Menu 5
</div>
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 2;
top: 0;
left: 0;
background-color: #111;
overflow: hidden;
padding-top: 60px;
transition: 0.8s;
transform: translatex(-150px);
}
.sidenav:hover {
transition: 0.8s;
transform: translatex(0);
}
.sidenav a {
display: block;
width: 150px;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: #818181;
transition: opacity 1300ms;
position: relative;
}
.sidenav a::after {
content: '';
display: block;
position: absolute;
right: -16px;
top: calc(50% - 8px);
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid red;
border-top-color: transparent;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
<div id="mySidenav" class="sidenav">
<!-- CSSnya di 2691 -->
<br>
<br>
Home
Menu 1
Menu 2
Menu 3
Menu 4
Menu 5
</div>
Related
After implementing sidebar its fridge my other page and didn't able to scroll the page in Asp.net Core MVC. I think the problem is comes from the _layout.cshtml file. as it has a container which render my other page. Please help me to solve this problem.
Here is My _Layout.cshtm File. The header is the side bar.
<header>
<div class="sidebar">
<div class="logo_content">
<div class="logo">
<i class='bx bxl-c-plus-plus'></i>
<div class="logo_name">dgInfoSys</div>
</div>
<i class='bx bx-menu' id="btn"></i>
</div>
<ul class="nav_list">
<li>
<i class='bx bx-search-alt'></i>
<input class="text" placeholder="Search...">
<span class="tooltip">Search</span>
</li>
<li>
<a href="#">
<i class='bx bx-grid-alt'></i>
<span class="links_name">Dashboard</span>
</a>
<span class="tooltip">Dashboard</span>
</li>
<li>
<a href="#">
<i class='bx bx-user'></i>
<span class="links_name">User</span>
<i class='bx bxs-chevron-down htmlcss-arrow arrow '></i>
</a>
<span class="tooltip">User</span>
</li>
<li>
<a href="#">
<i class='bx bxs-user-badge'></i>
<span class="links_name">Super Admin</span>
</a>
<span class="tooltip">Super Admin</span>
</li>
<li>
<a href="#">
<i class='bx bx-line-chart'></i>
<span class="links_name">Analytics</span>
</a>
<span class="tooltip">Analytics</span>
</li>
<li>
<a asp-controller="BTBTable" asp-action="Index">
<i class='bx bxs-report'></i>
<span class="links_name">Files</span>
</a>
<span class="tooltip">Files</span>
</li>
<li>
<a href="#">
<i class='bx bx-cog'></i>
<span class="links_name">Setting</span>
</a>
<span class="tooltip">Setting</span>
</li>
</ul>
<div class="profile_content">
<div class="profile">
<div class="profile_details">
#*<img src="" alt="" />*#
<div class="name_job">
<div class="name">Masum Rayhan</div>
<div class="job">Developer</div>
</div>
</div>
<i class='bx bx-log-out' id="log_out"></i>
</div>
</div>
</div>
</header>
<div id="main">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰
</span>
</div>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
And side bar css is given below:
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
position: relative;
min-height: 100vh;
width: 100%;
overflow: hidden;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 78px;
/*width: 240px;*/
background: #11101d;
padding: 6px 14px;
transition: all 0.5s ease;
}
.sidebar.active {
width: 240px;
}
.sidebar .logo_content .logo {
color: #fff;
display: flex;
height: 50px;
width: 100%;
align-items: center;
opacity: 0;
pointer-events: none;
transition: all 0.5s ease;
}
.sidebar.active .logo_content .logo {
opacity: 1;
pointer-events: none;
}
.logo_content .logo i {
font-size: 28px;
margin-right: 5px;
}
.logo_content .logo .logo_name {
font-size: 20px;
font-weight: 400;
}
.sidebar #btn {
position: absolute;
color: #fff;
left: 50%;
top: 6px;
font-size: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
transform: translateX(-50%);
}
.sidebar.active #btn {
left: 90%;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar ul li {
position: relative;
height: 50px;
width: 100%;
margin: 0 5px;
list-style: none;
line-height: 50px;
}
.sidebar ul li .tooltip {
position: absolute;
left: 122px;
height: 35px;
width: 122px;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 6px;
line-height: 35px;
text-align: center;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
transition: 0s;
opacity: 0;
pointer-events: none;
}
.sidebar.active ul li .tooltip {
display: none;
}
.sidebar ul li:hover .tooltip {
transition: all 0.5s ease;
opacity: 1;
top: 50%
}
.sidebar ul li input {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
border-radius: 12px;
outline: none;
border: none;
background: #1d1b31;
padding-left: 50px;
font-size: 18px;
color: #fff;
}
.sidebar ul li .bx-search {
position: absolute;
z-index: 99;
color: #fff;
font-size: 22px;
transition: all 0.5s ease;
}
.sidebar ul li .bx-search:hover {
background: #fff;
color: #1d1b31;
}
.sidebar ul li a {
color: #fff;
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
border-radius: 12px;
white-space: nowrap;
}
.sidebar ul li a:hover {
color: #11101d;
background: #fff;
}
.sidebar ul li a i {
height: 50px;
min-width: 50px;
border-radius: 12px;
line-height: 50px;
text-align: center;
}
.sidebar .links_name {
opacity: 0;
pointer-events: none;
transition: all 0.5s ease;
}
.sidebar.active .links_name {
opacity: 1;
pointer-events: auto;
}
.sidebar .profile_content {
position: absolute;
color: #fff;
bottom: 0;
left: 0;
width: 100%;
}
.sidebar .profile_content .profile {
position: relative;
padding: 10px 6px;
height: 60px;
background: none;
transition: all 0.4s ease;
}
.sidebar.active .profile_content .profile {
background: #1d1b31;
}
.profile_content .profile .profile_details {
display: flex;
align-items: center;
opacity: 0;
pointer-events: none;
white-space: nowrap;
}
.sidebar.active .profile .profile_details {
opacity: 1;
pointer-events: auto;
}
.profile .profile_details img {
height: 45px;
width: 45px;
object-fit: cover;
border-radius: 12px;
}
.profile .profile_details .name_job {
margin-left: 10px;
}
.profile .profile_details .name {
font-size: 15px;
font-weight: 400;
}
.profile .profile_details .job {
font-size: 12px;
}
.profile #log_out {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
min-width: 50px;
line-height: 50px;
font-size: 20px;
border-radius: 12px;
text-align: center;
transition: all 0.4s ease;
background: #1d1b31;
}
.sidebar.active .profile #log_out {
left: 80%
}
.sidebar.active .profile #log_out {
background: none;
}
.home_content {
position: absolute;
height: 100%;
width: calc(100% -78px);
left: 78px;
transition: all 0.5s ease;
}
.home_content .text {
font-size: 25px;
font-weight: 500;
color: #1d1b31;
margin: 12px;
}
.sidebar.active ~ .home_content {
width: calc(100% -240px);
left: 240px;
}
Check your Css code:
body {
position: relative;
min-height: 100vh;
width: 100%;
overflow: hidden;
}
The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area
The overflow property has the following values:
visible - Default. The overflow is not clipped. The content renders
outside the element's box
hidden - The overflow is clipped, and the rest of the content will
be invisible
scroll - The overflow is clipped, and a scrollbar is added to see
the rest of the content
auto - Similar to scroll, but it adds scrollbars only when
necessary
So in your code, you just need to delete overflow: hidden; or change it as the property whtich you need.
Hey all have this menu which i wish to have toggle on click X and again back to hamburger style.
could someone help me out here? I just have no clue how that is achieved. sharing my menu codes here. hope some expert could help me out.
here are my menu codes
$(document).ready(function() {
$('#menulink').click(function(event) {
event.preventDefault();
if($('.navigation-wrapper').hasClass('show-menu')) {
$('.navigation-wrapper').removeClass('show-menu');
$('.navigation').hide();
$('.navigation li').removeClass('small-padding');
} else {
$('.navigation-wrapper').addClass('show-menu');
$('.navigation').fadeIn();
$('.navigation li').addClass('small-padding');
}
});
});
.hamburger-wrapper {
padding: 0;
background: #000;
position: fixed;
top: 40px;
left:90px;
width: 50px;
z-index: 999;
}
.inner-hamburger-wrapper {
background: #ca1404;
width: 100%;
padding: 8px 0;
}
.hamburger {
width: 50%;
height: 3px;
margin: 4px auto;
background: #fff;
border-radius: 2px;
}
.menu-title {
position: absolute;
top: 10px;
right: 0;
width: 50%;
}
.menu-title p {
color: #fff;
font-size: 18px;
line-height: 22px;
text-align: center;
}
.navigation-wrapper {
background: linear-gradient(180deg, #C7100C 0%, #3F5EFB 100%);
padding: 40px 0 0 0;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 900;
display: none;
}
.navigation {
padding: 50px 5% 0 5%;
display: none;
}
.show-menu {
display: block;
}
.navigation li {
list-style: none;
margin: 50px 0;
transition: all ease .6s;
} .navigation li.small-padding {
margin: 0;
}
.navigation li a {
display: block;
padding: 10px 0 10px 1%;
color: #fff !important;
text-decoration: none;
font-size: 150%;
letter-spacing: .1em;
border-left: 3px solid #000;
-moz-transition: all ease .3s;
-webkit-transition: all ease .3s;
-ms-transition: all ease .3s;
-o-transition: all ease .3s;
transition: all ease .3s;
}
.navigation li a:hover {
color: #fff;
padding-left: 2%;
border-left: 3px solid #eee;
}
#media (min-width: 320px) and (max-width: 768px) {
.hamburger-wrapper {
padding: 0;
background: #000;
position: fixed;
top: 30px;
left:5px;
width: 50px;
z-index: 999;
}
.navigation li a {
display: block;
padding: 10px 0 10px 1%;
color: #bbb;
text-decoration: none;
font-size: 90%;
letter-spacing: .1em;
border-left: 3px solid #000;
-moz-transition: all ease .3s;
-webkit-transition: all ease .3s;
-ms-transition: all ease .3s;
-o-transition: all ease .3s;
transition: all ease .3s;
border-bottom: 1px solid rgba(255, 255,
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="menulink" href="#">
<div class="hamburger-wrapper">
<div class="inner-hamburger-wrapper">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
</div>
</div>
</a>
<div class="navigation-wrapper">
<ul class="navigation">
<li>Home</li>
<li>Website Design</li>
<li>Search Engine Optimization</li>
<li>User Experience</li>
<li>AB Testing</li>
<li>Contact</li>
</ul>
</div>
would appreciate your kind help.
Thanks in advance
You should do the following things:
add a class like 'active' to the hamburger button when active (Jquery > toggleClass)
the three lines in the button can be animated seperately by making classes for each of them : #menulink.active .hamburger-wrapper .inner-hamburger-wrapper div:nth-of-type(1){}
have transitions and rotation on each .hamburger element : 2 make a cross, 1 disappears.
I'm making dropdown menu with HTML/CSS/JS. Entering five tags and adding "margin-top: 20px" it should make 20px spaces from top, but it makes bigger and smaller spaces - 24px from top, 28px from top, 28px from top...
I can't find the problem in my code. I was deleting margins, paddings on other classes. Any changes were unsuccessful.
HTML:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"><div class="cog"></div></button>
<div id="myDropdown" class="dropdown-content">
<div class="dop"></div>
Text
Text
Text
Text
Text
</div>
</div>
<script src="js/js-1_dropdown.js"></script>
CSS:
.dropbtn {
height: 34px;
width: 34px;
background: #f0f0f0;
border-radius: 3px;
border: none;
cursor: pointer;
transition: 0.3s ease;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-o-transition: 0.3s ease;
}
.dropbtn:hover, .dropbtn:focus {
background: #ebebeb;
}
.dropdown {
position: relative;
display: inline-block;
margin-top: 100px;
margin-left: 100px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
width: 140px;
border-radius: 3px;
left: -53px;
top: 48px;
}
.dropdown-content a {
color: #b7b7b7;
text-decoration: none;
display: block;
font-family: OpenSans-Regular;
font-size: 12px;
text-align: center;
padding-top: 20px;
position: relative;
margin: 0;
}
.dropdown-content a:hover {
color: #adadad;
}
.show {display:block;}
.cog {
height: 16px;
width: 16px;
position: absolute;
top: 9px;
left: 9px;
background: url(img/i-3_settings.png);
}
.dop {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 4px solid #ffffff;
position: absolute;
top: -4px;
left: 65px;
}
* {
outline: none;
}
Live - https://jsfiddle.net/qc8aempj/
Ričards.
When adding position: relative; to the code the background popup window won't get any opacity - what is the reason for that? I don't understand why centering the web page should affect background opacity.
Thanks for anyone that can help!!
<html>
<head>
<style>
body {
background-color: white;
width: 960px;
margin: auto;
position: relative;
}
.one {
background: black;
-webkit-border-radius: 12;
-moz-border-radius: 12;
border-radius: 12px;
font-family: Book Antiqua;
color: #ffffff;
font-size: 60px;
text-align: center;
width: 75px;
height: 75px;
overflow:hidden;
float:left;
position:absolute;
transition: .5s ease;
top: 120px;
left: 140px;
text-align: center;
text-vertical-align: middle;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);;
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
</style>
</head>
<body>
<a class="one" id="one" href="#popup1" onclick="changeZIndex(this)">1</a>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
1
</div>
</div>
</div>
</body>
</html>
Link
Add height to the html and body element
CSS
html,
body
{
height: 100%;
}
CSS Errors
.one
{
background: black;
-webkit-border-radius: 12;
-moz-border-radius: 12;
border-radius: 12px;
font-family: Book Antiqua;
color: #ffffff;
font-size: 60px;
text-align: center;
width: 75px;
height: 75px;
overflow: hidden;
float: left;
position: absolute;
transition: .5s ease;
top: 120px;
left: 140px;
text-align: center;
/* incorrect value
text-vertical-align: middle;
*/
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
/*
transition: opacity 500ms;
*/
transition: opacity 0.5s;
visibility: hidden;
opacity: 0;
}
I have a horizontal list in which i am placing div's which are hidden until hovered over. To keep the dimensions (the hidden divs are the width of the menu) i am using outline: 2px solid black; , this works in ie and chrome, it outlines the li item but in firefox it outlines the entire ul item including the hidden div.
Does anyone know of a workaround for this or do i have a conflict for firefox outline?
css:
#marketmenu ul li{
display: block;
float: left;
position: relative;
cursor: pointer !important;
z-index: inherit;
font-size: 16px;
padding-top: 2px;
font-weight: bolder;
width: 15%;
height: 40px;
text-align: center;
background: white;
outline: 2px solid black;
}
#marketmenu ul li div {
position: absolute;
display: block;
top: 98%;
width: 600%;
background: #ffffff;
height: 200px;
opacity: 0;
visibility: hidden;
overflow: hidden;
z-index: 9;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border-radius: 0 0 3px 3px;
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
}
html:
<div class="mheader-container">
<div id="logo" class="clearfix">
<img src="...">
</div>
<div class="userstatus">
<span class="icon-user-add"></span> Create an account
<span class="icon-user"></span> Log in
</div>
</div>
<div id="market_navigation" class="market_navigation clearfix">
<div id="marketmenu">
<ul>
<li>one<div class="menudrop"></div></li>
<li>two<div class="menudrop"></div></li>
<li>three<div class="menudrop"></div></li>
<li>four<div class="menudrop"></div></li>
<li>five<div class="menudrop"></div></li>
<li>six<div class="menudrop"></div></li>
</ul>
</div>
</div>
jsfiddle (remember its only in firefox there is a issue, renders fine in ie/chrome)
http://jsfiddle.net/ww2rkexd/1/
On the last li item, add a class of "last":
<ul>
<li>one<div class="menudrop"></div></li>
<li>two<div class="menudrop"></div></li>
<li>three<div class="menudrop"></div></li>
<li>four<div class="menudrop"></div></li>
<li>five<div class="menudrop"></div></li>
<li class="last">six<div class="menudrop"></div></li>
</ul>
Then change the CSS for the menudrop class from outline to border:
#marketmenu ul li{
display: block;
float: left;
position: relative;
cursor: pointer !important;
z-index: inherit;
font-size: 16px;
padding-top: 2px;
font-weight: bolder;
width: 15%;
height: 40px;
text-align: center;
background: white;
border-left: 2px solid black;
border-top: 2px solid black;
border-bottom: 2px solid black;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
And add the following CSS for the "last" class
li.last{
border-right: 2px solid black;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ok this isnt pretty but it works....basically set a background of the border color and then a overlay div with the correct color. The dropdown div remains in proportion to the parent menu.
jsfiddle:
http://jsfiddle.net/dheffernan/pas1fqcp/
HTML
<div id="market_navigation" class="market_navigation clearfix">
<div id="marketmenu">
<ul>
<li><span class="innerli leftish">1st<div class="menudrop"></div></span></li>
<li><span class="innerli">2nd<div class="menudrop"></div></span></li>
<li><span class="innerli">3rd<div class="menudrop"></div></span></li>
<li><span class="innerli">4th<div class="menudrop"></div></span></li>
<li><span class="innerli">5th<div class="menudrop"></div></span></li>
<li><span class="innerli rightish">6th<div class="menudrop last"></div></span></li>
</ul>
</div>
</div>
css
#marketmenu ul{
cursor: pointer;
}
#marketmenu ul li{
display: block;
float: left;
position: relative;
cursor: pointer !important;
z-index: inherit;
font-size: 16px;
padding-top: 2px;
font-weight: bolder;
width: 15%;
height: 40px;
text-align: center;
background: black;
/*
outline: 2px solid black;
*/
}
.innerli{
display: block;
overflow: auto;
height: 88%;
width: 98%;
margin: 1%;
margin-left: 2%;
background-color: white;
padding-top: 6%;
}
.leftish{
margin-left: 2.5%;
}
.rightish{
width: 96%;
}
#marketmenu ul li div {
position: absolute;
display: block;
top: 98%;
width: 596.5%;
background: #ffffff;
height: 200px;
opacity: 0;
background: black;
visibility: hidden;
overflow: hidden;
z-index: 9;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border-radius: 0 0 3px 3px;
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
}
#marketmenu ul li:first-child div {
}
#marketmenu ul li:nth-child(2) div {
margin-left: -100%;
}
#marketmenu ul li:nth-child(3) div {
margin-left: -200%;
}
#marketmenu ul li:nth-child(4) div {
margin-left: -300%;
}
#marketmenu ul li:nth-child(5) div {
margin-left: -400%;
}
#marketmenu ul li:nth-child(6) div {
margin-left: -500%;
padding-top: 2px;
}
#marketmenu ul li:hover div {
opacity: 1;
visibility: visible;
overflow: visible;
}
.market_navigation{
position: relative;
z-index: 40;
width: 70%;
margin-left: 30%;
height: 40px;
background: white;
}