CSS Dropdown menu on hover
Question
How should I modify my CSS to replicate a menu like on mi.com/en/ <--the top nav bar "International" drop down menu thing
https://gyazo.com/d96fc743b0f447cdacb1d3df615f9da6
[EDIT] Currently and thankfully with your help (although i have to study your solution a bit , when i'm trying to actually go select the drop down menu items..the whole dropdown dissapears..i'm going to search for it right now and hopefully find something , if you can elaborate further that would be great if not, then one big THANKS for your amazing help <3
HTML
<!DOCTYPE html>
<html>
<head>
<title>Big Project</title>
<link rel="stylesheet" type="text/css" href="bigproject.css">
<link rel="stylesheet" type="text/css" href="bigproject.js">
</head>
<body>
<div id="top" class="topnav">
<ul class="items">
<li class="list"><span class="hrborder"><a href="#">Brand</a></span></li>
<div>
<li class="list"><a href="#"><span class="dropdown">Dropdown</span><div class="dropdown-content">
<ul class="list" class="items">
<li class="list">TEXT</li>
<li class="list">TEXT</li>
<li class="list">TEXT</li>
</ul>
</div></a></li>
</div>
<ul class="items2">
<li class="list2"><a href="#">Login</a></li>
<li class="list2"><span class="hrborder2"><a href="#">Signup</a></span></li>
</ul>
</ul>
</div>
CSS
.topnav {
background-color: #333;
/* overflow: hidden; */
height: 40px;
position: fixed;
top: 0;
width: 100%;
margin-left: -8px;
padding-left: 0px;
padding-bottom: 5px;
}
body {
background-color: #8604f7;
}
#top {
box-shadow: 0.3px 0.3px;
}
.list {
display: block;
float: left;
width: 100px;
color: #d1d1d1;
}
.items {
text-align: center;
padding-left: 300px;
height: 100px;
}
.list2 {
display: block;
float: right;
width: 100px;
color: #d1d1d1;
margin-left: -8px;
padding-left: 0px;
padding-bottom: 5px;
}
.items2 {
text-align: left;
padding-right: 300px;
}
.hrborder {
border-right: 1px;
border-style: solid;
border-color: #d1d1d1;
padding: 10px;
border-left: hidden;
border-top: hidden;
border-bottom: hidden;
padding-right: 28px;
padding-top: 1px;
padding-bottom: 1px;
border-color: #d1d1d1;
}
.hrborder2 {
border-right: 1px;
border-style: solid;
border-color: #d1d1d1;
padding: 10px;
border-left: hidden;
border-top: hidden;
border-bottom: hidden;
padding-right: 17.5px;
padding-top: 1px;
padding-bottom: 1px;
border-color: #d1d1d1;
}
a {
color: #d1d1d1;
text-decoration-line: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover + .dropdown-content {
display: block;
}
[EDIT] Currently and thankfully with your help (although i have to study your solution a bit , when i'm trying to actually go select the drop down menu items..the whole dropdown dissapears..i'm going to search for it right now and hopefully find something , if you can elaborate further that would be great if not, then one big THANKS for your amazing help <3 was stacked on it for like a day! [EDIT2] As i was asked here is codepen : https://codepen.io/giwrgos-laphazanidhs/project/editor/ABjaam#
2 answers
solution1
0 2018-05-03 02:07:18
You need to use Javascript to get the desired behaviour.
let toggler = document.getElementById('buttonId')
toggler.addEventListener("mouseover", showDropdown);
function showDropdown() {
let content = document.getElementById('dropdownContent')
content.classList.add("show");
contentaddEventListener("mouseleave", hideDropdown)
};
function hideDropdown() {
document.getElementById('dropdownContent').classList.remove('show')
};
CSS:
.dropdown-content.show {
display: block;
}
This is rough mockup. For more elegance use jQuery, add data-target attribute to the dropdown button to get access to dropdown content.
solution2
0 ACCPTED 2018-05-03 16:59:30
I've made you a simple snippet close to Mi Menu, I tried to keep it simple as possible so you can follow the code and modify it to suit your needs.
// Add Event on mouse hover document.querySelector('.dropdown').addEventListener('mouseover', callback); function callback () { // Get the dropdown menu height when scroll. The default height set by css to 0. let dropdownHeight = this.children[1].scrollHeight; // Add the height to dropdown menu (change it from 0 to scroll height value ) this.children[1].style = `height: ${dropdownHeight}px`; }
/* General */ *, ::after, ::before { box-sizing: border-box; } a:active, a:hover { outline: 0; } body { font-family: ProximaNova,Arial,Sans-serif; font-weight: 400; font-size: 14px; line-height: 1.5; color: #757575; } nav { margin: 3rem 0; background-color: #212121; } /* Normal menu */ .menu { padding: 0; margin: 0; list-style: none; white-space: nowrap; } .menu .menu-item::before { content: ''; position: absolute; left: -20px; top: 50%; margin-top: -6px; width: 1px; height: 12px; background-color: #424242; } .menu .menu-item { display: inline-block; margin: 0 20px 0 20px; } .menu .menu-item .menu-link { display: block; margin: 0 20px; line-height: 40px; color: #b0b0b0; font-size: 12px; text-transform: uppercase; text-decoration :none; -webkit-transition: all .3s ease 0s; transition: all .3s ease 0s; } .menu .menu-item .menu-link:hover { color: #ff6700; } /* Dropdown menu */ .menu .dropdown { position: relative; } .menu .dropdown-menu { padding: 0; margin: 0; list-style: none; padding: 7px 0; position: absolute; left: 0; top: 100%; z-index: 999; height: 0; overflow: hidden; -webkit-transition: opacity .5s ease; transition: opacity .5s ease; height: 0; opacity: 0; } .menu .dropdown-menu .dropdown-item .dropdown-link { line-height: 30px } .menu .dropdown-menu .dropdown-item:last-child .dropdown-link { margin-bottom: 10px; } /* On Hover */ .menu .dropdown:hover { background: #fff; } .menu .dropdown:hover .menu-link { color: #ff6700; } .menu .dropdown:hover > .dropdown-menu { display: block; opacity: 1; padding: 7px 0; -webkit-box-shadow: 0 3px 4px rgba(0,0,0,.18); box-shadow: 0 3px 4px rgba(0,0,0,.18); } .menu .dropdown:hover > .dropdown-menu .dropdown-link { color: #000 } .menu .dropdown:hover > .dropdown-menu .dropdown-link:hover { color: #ff6700 }
<nav> <ul class="menu"> <li class="menu-item"><a class="menu-link" href="#">Normal</a></li> <li class="menu-item dropdown"><a class="menu-link" href="#">Dropdown</a> <ul class="dropdown-menu"> <li class="dropdown-item"><a class="menu-link dropdown-link" href="#">Dropdown item 1</a></li> <li class="dropdown-item"><a class="menu-link dropdown-link" href="#">Dropdown item 2</a></li> <li class="dropdown-item"><a class="menu-link dropdown-link" href="#">Dropdown item 3</a></li> </ul> </li> </ul> </nav>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.