when I hover around submenu , then when dragging cursor over submenu and hovering over the submenu disappers and only sometimes appear when I select any other nav menu and hover there but it only works sometimes.
Here is my code
html
{ height: 100%;}
*
{ margin: 0;
padding: 0;}
body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
background: #FFF;
color: #555;}
p
{ padding: 0 0 20px 0;
line-height: 1.7em;}
#menubar
{ width: 880px;
height: 46px;}
ul#menu
{ float: right;
margin: 0;}
ul#menu li
{ float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
background: #5A5A5A url(tab.png) no-repeat 0 0;}
ul#menu li a
{ font: normal 100% 'trebuchet ms', sans-serif;
display: block;
float: left;
height: 20px;
padding: 6px 35px 5px 28px;
text-align: center;
color: #FFF;
text-decoration: none;
background: #5A5A5A url(tab.png) no-repeat 100% 0;}
ul#menu li.selected a
{ height: 20px;
padding: 6px 35px 5px 28px;}
ul#menu li.selected
{ margin: 1px 2px 0 0;
background: #00C6F0 url(tab_selected.png) no-repeat 0 0;}
ul#menu li.selected a, ul#menu li.selected a:hover
{ background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
color: #FFF;}
ul#menu li a:hover
{ color: #E4EC04;}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
display: inline-block;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
margin-top: 35px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
<div id="main">
<div id="menubar">
<ul id="menu" >
<li ><a href="#" >Home</a></li>
<li ><a ref="#" >Contact Us</a></li>
<li >
<div class="dropdown">
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
</ul>
</div>
</div>
How can I solve this ..
Ay help is appreciated. I tried but I failed and Have no idea how to solve this.
Thanks in advance.
It's because there is a space between the "Dropdown" menu and the dropdown list. Instead of hard coding the margin in px use a percentage. I also recommend using top instead of margin-top. Replace .dropdown-content css with:
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
top: 100%; //To move it up or down more you can use calc like: calc(100% + 1px) or calc(100% - 2px)
}
when you move the mouse from the dropdown menu toggle, into the submenu, you are briefly not hovering over the div due to the margin-top value of the submenu. If you really want that divide between the two add white top border (i.e. border-top: 2px solid white;).
Heres a JSFiddle
Change the CSS as follows:
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
margin-top: 30px;
}
Change the HTML as follows:
<li class="dropdown">
<div>
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
The issue is simply a gap between li.dropdown and .dropdown-content. It is worth noting that when you move the cursor quickly from the dropdown button to the dropdown list, it does not disappear. However, doing that slowly vanishes the list.
The simplest solution I could think of here is to decrease the top margin of the dropdown list, while adding a top padding to the first list item to compensate for that lost margin (a top margin won't work here). So, your code for the dropdown menu would look like this:
#menubar {
width: 880px;
height: 46px;
}
ul#menu {
float: right;
margin: 0;
}
ul#menu li {
float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
background: #5A5A5A url(tab.png) no-repeat 0 0;
}
ul#menu li a {
font: normal 100% 'trebuchet ms', sans-serif;
display: block;
float: left;
height: 20px;
padding: 6px 35px 5px 28px;
text-align: center;
color: #FFF;
text-decoration: none;
background: #5A5A5A url(tab.png) no-repeat 100% 0;
}
ul#menu li.selected a {
height: 20px;
padding: 6px 35px 5px 28px;
}
ul#menu li.selected {
margin: 1px 2px 0 0;
background: #00C6F0 url(tab_selected.png) no-repeat 0 0;
}
ul#menu li.selected a,
ul#menu li.selected a:hover {
background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
color: #FFF;
}
ul#menu li a:hover {
color: #E4EC04;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
display: inline-block;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
margin-top: 30px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:first-child {
padding-top:17px;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
<div id="main">
<div id="menubar">
<ul id="menu">
<li>Home</li>
<li><a ref="#">Contact Us</a></li>
<li>
<div class="dropdown">
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
</ul>
</div>
</div>
Related
I'm trying to create a dropdown search. But I found a problem when using a container with a scroll.
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
.container {
width: 500px;
height: 300px;
border: solid gray 1px;
padding: 10px;
display: flex;
overflow: auto;
transform: none;
position: relative;
background: #337ab7 !important;
transition: background-color .3s;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
height: 60px;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top: 60px;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 2px solid red;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<div class="container">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search..">
About
Base
Blog
Contact
Custom
Support
Tools
</div>
</div>
As can see the list of dropdown was cut.
How to resolve this?
You have overflow: auto on two elements, so the outer one scrolls first. You just have to be sure that the menu box doesn't render taller than the space available. You can also remove the outer scroll if it's not needed for other purposes.
.container {
/* overflow: auto; */
}
.dropdown-content {
max-height: 245px;
}
Fiddle demo
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
.container {
width: 500px;
height: 300px;
border: solid gray 1px;
padding: 10px;
display: flex;
/* overflow: auto; */
transform: none;
position: relative;
background: #337ab7 !important;
transition: background-color .3s;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
height: 60px;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top: 60px;
background-color: #f6f6f6;
min-width: 230px;
max-height: 245px;
overflow: auto;
border: 2px solid red;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<div class="container">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search..">
About
Base
Blog
Contact
Custom
Support
Tools
</div>
</div>
If you'd rather not implement fixed heights, consider using a flexbox layout instead.
Here is a solution if you wish to maintain the scroll of the .container and still show the dropdown menu entirely.
What I imagine is to put the menu out of the .container and everything inside a wrapper. The good thing is that JavaScript is being used, so it helps.
HTML would be like this:
<div class="wrapper">
<div class="container">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
</div>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search..">
About
Base
Blog
Contact
Custom
Support
Tools
</div>
</div>
Than, you change the position of .dropdown-content:
.dropdown-content {
left: 19px; // also top, right and bottom if you need
}
Hope it can be useful too.
I have added a basic clickable dropdown button to my menu, but it can't be customize or even show the changes on the live website. And the dropdown content will not appear on separate line:
Here is a screenshot of what i am referring too:
https://imgur.com/hzKm7WI
I have searched google related to my problem, but everything I've searched is not working. Am I doing something wrong
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.button')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
body {
margin: 0;
padding: 0;
margin-top: 130px;
overflow-x: hidden;
}
.nav-menu a img {
float: left;
margin-left: 10px;
}
.nav-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.9);
margin-top: -130px;
}
.nav-menu li {
float: left;
}
.nav-menu li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-menu li a:hover,
.dropdown:hover .dropbtn {
border-top: 2px solid #ff0000;
}
.nav-menu li.dropdown {
display: inline-block;
}
.nav-menu .dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.nav-menu .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.nav-menu .dropdown-content a:hover {
background-color: #ff0000;
color: #fff;
}
.nav-menu .dropdown:hover .dropdown-content {
display: block;
}
.nav-menu li.social {
float: right;
}
li.navbar {
overflow: hidden;
background-color: transparent;
font-family: Arial, Helvetica, sans-serif;
float: right;
padding-right: 100px;
}
li.navbar a {
float: left;
font-size: 16px;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown-menu {
float: left;
overflow: hidden;
}
.dropdown-menu .button {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
li.navbar a:hover,
.dropdown-menu:hover .button,
.button:focus {
background-color: red;
}
.dropdown-menu-content {
color: #fff;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-menu-content a {
float: left;
color: red;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-menu-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.navbar-nav .open .dropdown-menu .button {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Title Here</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="CSS/style.css?v=12345">
</head>
<body>
<div class="nav-menu">
<ul>
<img src="img/logo.jpg" style="width:50px">
<li class="dropdown">
Games
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li class="dropdown">
Crews
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li>Jobs</li>
<li>Photos</li>
<li>Videos</li>
<li>Events</li>
<li>News</li>
<li class="navbar">
<div class="dropdown-menu">
<button class="button" onclick="myFunction()">
<i class="fas fa-user"></i>
</button>
<div class="dropdown-menu-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</li>
<li class="social">
Sign In
Sign Up
<i class="fas fa-search"></i>
</li>
</div>
</li>
</ul>
Have you tried writing css with more specificity like
.navbar-nav .open .dropdown-menu .button {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
However if what you meant was it gets applied locally and not when deployed on to live site it could be due to css caching by browser in which case you can use a cache busting strategy like appending a query string(unique) at the end of url when linking the css eg
<link rel="stylesheet" type="text/css" href="./path/to/cssfile.css?v=12345">.
i've tried your code & there should be no problem.
I think its because your style was overridden by another class. You can check it with browser inspector.
In that case you should prioritize yous css by using !important like this
.dropdown-menu-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block !important;
text-align: left;
}
you can find more info about css specificity here
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I implemented the code below, I'm facing an issue on mobile view when clicking the menu button on mobile didn't show the menu but if I didn't scroll down the menu works,
how can i fix this issue on mobile view
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
$("body").toggleClass("hidden");
})
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('.centered-logo').height())
{
$('nav').addClass('fixed');
}
else
{
$('nav').removeClass('fixed');
}
});
})
body{height: 3000px;
margin: 0;
padding: 0;
font-family: monospace;
}
.fixed {
position: fixed;
top: 0;
width: 100%;
}
.hidden{
overflow: hidden;
}
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (min-width:768px){
nav{
display: block !important;
}
}
#media (max-width:768px){
nav{
display: none;
padding: 0;
}
.responsive-bar{
top:0;
display: block;
position: fixed;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<nav>
<h1 id="full-logo">hola</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>
I have on mobile view an issue when scroll down and click menu button nothing appear but when I was at the to when click menu will appear the menu item
all I need is when scroll down and up the menu appears
how can I fix this issue
The issue is because you set overflow: hidden to your body, while the nav is part of the page flow. The nav will always be offset relative to it's parent.
Here's an example where overflow: hidden is disabled:
http://jsfiddle.net/u9L50243/ (Toggle the menu and then scroll - You'll notice the navigation scrolls in to, and out of the viewport)
The easiest fix is just to apply position: fixed to your nav bar, in addition to the .responsive-bar.
For example: http://jsfiddle.net/ebcvqds7/
So I have this competetion about creating a website and I want to create a list element which is expandable when the user for example sends the mouse over it just like in the website below and the options pop out
http://www.howtogeek.com/
This is the HTML
<ul>
<li>Artikuj</li>
<li>Na ndiqni</li>
<li>Rreth nesh</li>
</ul>
And this is the CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid black;
background-color: black;
height: 37px;
border-radius: 20px;
}
li {
float: left;
font-family: 'Times New Roman', Times, serif
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background-color: black
}
li a:hover:not(.active) {
background-color: gray;
}
li a.active {
color: white;
background-color: black;
}
Pure CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid black;
background-color: black;
height: 37px;
border-radius: 20px;
}
li {
float: left;
font-family: 'Times New Roman', Times, serif
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background-color: black
}
li a:hover:not(.active) {
background-color: gray;
}
li a.active {
color: white;
background-color: black;
}
li ul {
display: none;
position: absolute;
}
li:hover ul {
display: block;
}
<ul>
<li>Artikuj
<ul>
<li>Artikuj</li>
<li>Na ndiqni</li>
<li>Rreth nesh</li>
</ul>
</li>
<li>Na ndiqni</li>
<li>Rreth nesh</li>
</ul>
CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
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);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
li .menuall{
width: 600px;
}
.menuall_list{
float: left;
width: 200px;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
HTML:
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li class="dropdown">
Artikuj
<div class="dropdown-content">
<div class="menuall">
<div class="menuall_list">
Link 1
Link 2
Link 3
</div>
<div class="menuall_list">
Link 1
Link 2
Link 3
</div>
<div class="menuall_list">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</li>
</ul>
This code is for as like www.howtogeek.com menu. Now you change the color or shape as per your design.
I'm currently writing a on-click drop-down menu in CSS. I want to position my div container for my submenu directly beneath my label. I've hard coded the percentage from the left on each specific container, but the second it is displayed on a larger screen, everything shifts. I know that was a wrong way to go about it, I just couldn't get anything else to work. I don't know Javascript or Jquery. What is the easiest way to achieve this look that will work on multiple browsers and screen size?
input {
opacity: .3;
margin-right: -.7em;
margin-left: 0em;
overflow: visible;
}
input + label {
color: #fff;
display: inline-block;
padding: 6px 8px 10px 24px;
background-image: black url(../images/glossyback2.gif);
height: 8px;
margin: 0;
line-height: 12px;
position: relative;
}
input:hover + label:hover {
background: #3385D6;
}
input + label + div {
margin: 0;
margin-top: 2px;
padding: 16px;
border: 1px solid;
width: 100%;
height: auto;
position: absolute;
top: 23px;
display: none;
}
input:checked + label + div {
display: block;
}
input:checked + label {
z-index: 3;
}
/* GUI styled: */
.menu {
z-index: 1000;
height: 1px;
width: 100%;
padding: 20px;
position: relative;
background-image: black url(../images/glossyback.gif);
background-color: #0066CC;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
}
.menu a {
text-decoration: none;
color: #fff;
}
.menu input {
display: none;
}
.menu div a {
text-decoration: none;
color: blue;
}
.menu div td:hover {
text-decoration: none;
background-color: #3385D6;
color: #ffffff;
}
.menu div input {
display: inline;
opacity: 1;
margin: 0;
}
div.menu input + label {
z-index: 1000;
padding: 0;
border-color: #ccc;
border-width: 0 1px;
height: 19px;
margin: 0 -.23em;
}
.menu label span {
z-index: 1000;
font-size: 12px;
line-height: 9px;
padding: 6px 1em 12px 1em;
display: block;
margin-top: -1px;
background-image: url(../images/glossyback.gif) repeat-x bottom left;
}
.menu label span a:hover {
background-image: black url(../images/glossyback2.gif);
}
.menu label span.startcap, .menu label span.endcap {
text-decoration: none;
z-index: 1000;
padding: 0;
background-image: black url(../images/glossyback.gif);
float: left;
width: 8px;
height: 24px;
margin-left: -6px;
}
.menu label span.endcap {
z-index: 1000;
background-image: black url(../images/glossyback.gif);
float: right;
margin-right: -6px;
}
.menu input + label + div {
position: absolute;
border: 1px solid #808080;
border-width: 2px 1px 1px 1px;
background: #F0F6FC;
text-align: left;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
width: 15%;
top: 35px;
left: 35px;
}
.menu input + label + div > div p {
font-size: 12px;
line-height: 18px;
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: left;
z-index: 1000;
}
.menu input + label + div > div {
z-index: 1000;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid #ABABAB;
border-width: 2px 1px 1px 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
padding: 16px;
padding-top: 5px;
background-image: url(../images/glossyback2.gif));
}
.menu input:checked + label {
background-color: #AFCEEE;
border-color: #6696CB;
z-index: 1000;
}
.menu input:checked + label span {
background-image: url(../images/glossyback.gif);
}
.menu input:checked + label span.startcap {
background-image: url(../images/glossyback.gif);
}
.menu input:checked + label span.endcap {
background-image: url(../images/glossyback.gif);
z-index: 1000;
}
<div class="menu">
<input type="radio" name="UItab" id="taba" checked="checked">
<label for="taba"><span class="startcap"></span><span>
Home</span></label>
<input type="radio" name="UItab" id="tabb">
<label for="tabb"><span>Users</span></label>
<div style="height:5px;left:34.25%;width:10.5%">
<div>
<table>
<tr>
<td id="linka"><a href="index.php?page=user_management">
User Management</a></td>
</tr>
</table>
</div>
</div>
<input type="radio" name="UItab" id="tabc">
<label for="tabc"><span>Elements</span></label>
<div style="height:20px;left:38.5%;width:10.5%;">
<div>
<table>
<tr>
<td id="linkb"><a href="index.php?page=new_element">
New Element</a></td>
</tr>
<tr>
<td id="linkc"><a href="index.php?page=exst_element">
Existing Elements</a></td>
</tr>
</table>
</div>
</div>
Wrap the input and the menu in a container with position: relative and set to the menu position: absolute and top: 100% just like in this example:
.wrapper{
position: relative;
display: inline-block;
margin-right: 30px;
}
.my-menu{
display: none;
position: absolute;
top: 100%;
left: 0;
background: #4197CF;
width: 80px;
padding: 0 5px;
}
input:checked + label + .my-menu {
display: block;
}
<div class="wrapper">
<input type="radio" name="UItab" id="tabb">
<label for="tabb"><span>Users</span></label>
<div class="my-menu">
<p>Element 1</p>
<p>Element 2</p>
<p>Element 3</p>
</div>
</div>
<div class="wrapper">
<input type="radio" name="UItab" id="tabb1">
<label for="tabb1"><span>Other Users</span></label>
<div class="my-menu">
<p>Element 4</p>
<p>Element 5</p>
<p>Element 6</p>
</div>
</div>
The above is a basic example just to show you how to do it. Just add your styles.
Check this example out.
I used this website as a reference to make a similar drop-down setup. This has some added features that make it a bit more flashy and fluid. Figured I'd provide an alternative so you have some options for how you want to set up your drop-downs.
HTML:
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>Home</li>
<li>
Users <span class="arrow">▼</span>
<ul class="sub-menu">
<li>New Element</li>
</ul>
</li>
<li>
Elements <span class="arrow">▼</span>
<ul class="sub-menu">
<li>New Element</li>
<li>Existing Elements</li>
</ul>
</li>
</ul>
</nav>
</div>
CSS:
.clearfix:after {
display: block;
clear: both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width: 100%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
}
.menu {
width: 50%;
margin-left: auto;
margin-right: auto;
}
.menu li {
margin: 0px;
list-style: none;
font-family: Verdana, Geneva, sans-serif;
background-color: #0066CC;
}
.menu a {
transition: all linear 0.15s;
color: white;
}
.menu li:hover > a,
.menu .current-item > a {
text-decoration: none;
color: #F4F9FD1;
}
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 19px;
}
.menu > ul > li > a {
padding: 10px 40px;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
background: #80B2E6;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 100%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #005CB8;
}
.sub-menu li {
display: block;
font-size: 16px;
}
.sub-menu li a {
padding: 10px 30px;
display: block;
}
.sub-menu li a:hover,
.sub-menu .current-item a {
background: #80B2E6;
}