0

How should I modify my CSS to replicate a menu like on mi.com/en/ <--the top nav bar "International" drop down menu thing

enter image description here

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#

Giwrgos Laphazanidhs
  • 3
  • 4
  • You are trying to target a parent selector. Place `dropdown-content` as a sibling to the dropdown trigger. You'll also need to remove `overflow:hidden` from the nav to see the menu... example: https://jsfiddle.net/heq7yL3t/ – sol May 02 '18 at 22:13
  • I would suggest creating a codepen account so that you can share the link here, then we can go and see exactly what you are seeing. – JGallardo May 02 '18 at 22:30
  • hmmm... div as a child of ul? something about that sounds invalid... https://stackoverflow.com/questions/11755628/can-i-use-div-as-a-direct-child-of-ul – Kai Qing May 02 '18 at 22:31

2 Answers2

0

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.

IP_
  • 676
  • 5
  • 18
0

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>
awran5
  • 4,333
  • 2
  • 15
  • 32