I am trying to recreate a website template and I have some issues with my menu and sub-menu. When I want to hover on the sub-menu it disappears , and I know it might be from that gap (margin) , but what can I do without having to delete the margin?
This is my full code: http://dontpad.com/claustack
This is the template that I am trying to reproduce: https://www.templatemonster.com/demo/69211.html
<body>
<div class="nav center">
<img src="logo.png"/ id="logo">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Departments <span style="font-size:12px">∨ </span>
<div class="subMenuBox1">
<ul class="subMenu1">
<li>Dental</li>
<li>Cardiology</li>
<li>Neurology</li>
<li>Pediatric</li>
</ul>
<ul class="subMenu2">
<li>Pulmonary</li>
<li>Ophtalmology</li>
<li>Traumatology</li>
<li>Diagnostics</li>
</ul>
</div>
</li>
<li>Timetable</li>
<li>Pages <span style="font-size:12px">∨ </span></li>
<li>Contacts</li>
</ul>
</div>
</body>
CSS :
html,body {
margin:0;
width:100%;
height:100%;
padding:0;
}
.center {
margin:0 auto;
display:table;
}
li {
list-style: none;
}
#logo {
float:left;
position:absolute;
left:-350px;
top:50px;
}
.nav {
position:relative;
padding-top:90px;
padding-bottom:90px;
}
.nav ul li {
float:left;
font-size:16px;
padding:0 30px;
}
.nav ul li a {
color:black;
}
.nav ul li a:hover {
color:#00bb6d;
text-decoration: none;
}
.subMenuBox1 {
width:330px;
height:150px;
border-bottom:2px solid green;
display:none;
box-shadow:0 0 5px 0 gray;
margin-top:30px;
z-index:999;
background-color:white;
}
.subMenu1 {
position:absolute;
z-index:999;
margin-top:20px;
}
.subMenu1 li {
float:left;
clear:left;
margin-bottom:10px;
}
.subMenu1 li a {
font-size:12.5px;
}
.nav li:hover .subMenu1{
display:block;
}
.nav li:hover .subMenuBox1{
display:block;
position:absolute;
}
Compensate for the Margin
Your code had a margin of 20px margin-top:20px;. If you set this to zero and use it with padding-top:20px; it works.
It's still a bit messy, but that does that part :)
html,
body {
margin: 0;
width: 100%;
height: 100%;
padding: 0;
}
.center {
margin: 0 auto;
display: table;
}
li {
list-style: none;
}
#logo {
float: left;
position: absolute;
left: -350px;
top: 50px;
}
.nav {
position: relative;
padding-top: 90px;
padding-bottom: 90px;
}
.nav ul li {
float: left;
font-size: 16px;
padding: 0 30px;
}
.nav ul li a {
color: black;
}
.nav ul li a:hover {
color: #00bb6d;
text-decoration: none;
}
.subMenuBox1 {
width: 250px;
height: 150px;
border-bottom: 2px solid green;
display: none;
box-shadow: 0 0 5px 0 gray;
margin-top: 30px;
z-index: 999;
background-color: white;
}
.subMenu1,
.subMenu2 {
position: absolute;
z-index: 999;
margin-top: 20px;
padding: 0;
}
.subMenu1 li,
.subMenu2 li {
float: left;
clear: left;
margin-bottom: 10px;
}
.subMenu1 li a,
.subMenu2 li a {
font-size: 12.5px;
}
.subMenu2 {
left: 100px;
/*border-left: 1px solid #333;*/
}
.nav li:hover .subMenuBox1 {
display: block;
position: absolute;
margin-top: 0;
}
<div class="nav center">
<img src="logo.png" / id="logo">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Departments <span style="font-size:12px">∨ </span>
<div class="subMenuBox1">
<ul class="subMenu1">
<li>Dental</li>
<li>Cardiology</li>
<li>Neurology</li>
<li>Pediatric</li>
</ul>
<ul class="subMenu2">
<li>Pulmonary</li>
<li>Ophtalmology</li>
<li>Traumatology</li>
<li>Diagnostics</li>
</ul>
</div>
</li>
<li>Timetable</li>
<li>Pages <span style="font-size:12px">∨ </span></li>
<li>Contacts</li>
</ul>
</div>
Related
I am looking horizontal dropdown menu pure css based and browser compatible....
i am looking like mentioned below example
see this is pure css bases dropdown menu:-
HTML
<ul id="menu">
<li>Home</li>
<li>About Us
<ul>
<li>The Team</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
<li>Products
<ul>
<li>Cozy Couch</li>
<li>Great Table</li>
<li>Small Chair</li>
<li>Shiny Shelf</li>
<li>Invisible Nothing</li>
</ul>
</li>
<li>Contact
<ul>
<li>Online</li>
<li>Right Here</li>
<li>Somewhere Else</li>
</ul>
</li>
</ul>
CSS
ul
{
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li
{
display: block;
position: relative;
float: left;
}
li ul
{
display: none;
}
ul li a
{
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover
{
background: #617F8A;
}
li:hover ul
{
display: block;
position: absolute;
}
li:hover li
{
float: none;
font-size: 11px;
}
li:hover a
{
background: #617F8A;
}
li:hover li a:hover
{
background: #95A9B1;
}
see the demo:- http://jsfiddle.net/XPE3w/7/
html, body {
font-family: Arial, Helvetica, sans-serif;
}
/* define a fixed width for the entire menu */
.navigation {
width: 150px;
}
/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
/* add hover behaviour */
.mainmenu a:hover {
background-color: #C5C5C5;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu li:hover .submenu {
display: block;
max-height: 200px;
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu a {
background-color: #999;
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #666;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
<html>
<body>
<head>
<link rel="stylesheet" type="css/text" href="nav.css">
</head>
</body>
<nav class="navigation">
<ul class="mainmenu">
<li>Home</li>
<li>About</li>
<li>Products
<ul class="submenu">
<li>Tops</li>
<li>Bottoms</li>
<li>Footwear</li>
</ul>
</li>
<li>Contact us</li>
</ul>
</nav>
Tested in IE7 - 9 and Firefox: http://jsfiddle.net/WCaKg/. Markup:
<ul>
<li><li></li>
<li><li></li>
<li><li>
<ul>
<li><li></li>
<li><li></li>
<li><li></li>
<li><li></li>
</ul>
</li>
<li><li></li>
<li><li></li>
<li><li></li>
</ul>
CSS:
* {
margin: 0;
padding: 0;
}
body {
font: 200%/1.5 Optima, 'Lucida Grande', Lucida, 'Lucida Sans Unicode', sans-serif;
}
ul {
width: 9em;
list-style-type: none;
font-size: 0.75em;
}
li {
float: left;
margin: 0 4px 4px 0;
background: #60c;
background: rgba(102, 0, 204, 0.66);
border: 4px solid #60c;
color: #fff;
}
li:hover {
position: relative;
}
ul ul {
z-index: 1;
position: absolute;
left: -999em;
width: auto;
background: #ccc;
background: rgba(204, 204, 204, 0.33);
}
li:hover ul {
top: 2em;
left: 3px;
}
li li {
margin: 0 0 3px 0;
background: #909;
background: rgba(153, 0, 153, 0.66);
border: 3px solid #909;
}
View code online on: WebCrafts.org
HTML code:
<body id="body">
<div id="navigation">
<h2>
Pure CSS Drop-down Menu
</h2>
<div id="nav" class="nav">
<ul>
<li>Menu1</li>
<li>
Menu2
<ul>
<li>Sub-Menu1</li>
<li>
Sub-Menu2
<ul>
<li>Demo1</li>
<li>Demo2</li>
</ul>
</li>
<li>Sub-Menu3</li>
<li>Sub-Menu4</li>
</ul>
</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</div>
</div>
</body>
Css code:
body{
background-color:#111;
}
#navigation{
text-align:center;
}
#navigation h2{
color:#DDD;
}
.nav{
display:inline-block;
z-index:5;
font-weight:bold;
}
.nav ul{
width:auto;
list-style:none;
}
.nav ul li{
display:inline-block;
}
.nav ul li a{
text-decoration:none;
text-align:center;
color:#222;
display:block;
width:120px;
line-height:30px;
background-color:gray;
}
.nav ul li a:hover{
background-color:#EEC;
}
.nav ul li ul{
margin-top:0px;
padding-left:0px;
position:absolute;
display:none;
}
.nav ul li:hover ul{
display:block;
}
.nav ul li ul li{
display:block;
}
.nav ul li ul li ul{
margin-left:100%;
margin-top:-30px;
visibility:hidden;
}
.nav ul li ul li:hover ul{
margin-left:100%;
visibility:visible;
}
You don't have to always use ul elements to achieve that, you can use other elements too as seen below. Here there are 2 examples, one using div and one using select.
This examples demonstrates the basic functionality, but can be extended/enriched more. It is tested in linux only (iceweasel and chrome).
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<style>
.drop_container
{
position:relative;
float:left;
}
.always_visible
{
background-color:#FAFAFA;
color:#333333;
font-weight:bold;
cursor:pointer;
border:2px silver solid;
margin:0px;
margin-right:5px;
font-size:14px;
font-family:"Times New Roman", Times, serif;
}
.always_visible:hover + .hidden_container
{
display:block;
position:absolute;
color:green;
}
.hidden_container
{
display:none;
border:1px gray solid;
left:0px;
background-color:#FAFAFA;
padding:5px;
z-index:1;
}
.hidden_container:hover
{
display:block;
position:absolute;
}
.link
{
color:blue;
white-space:nowrap;
margin:3px;
display:block;
}
.link:hover
{
color:white;
background-color:blue;
}
.line_1
{
width:800px;
border:1px tomato solid;
padding:5px;
}
</style>
</head>
<body>
<div class="line_1">
<div class="drop_container">
<select class="always_visible" disabled><option>Select</option></select>
<div class="hidden_container">
Option_ 1
Option__ 2
Option___ 3
Option____ 4
</div>
</div>
<div class="drop_container">
<select class="always_visible" disabled><option>Select</option></select>
<div class="hidden_container">
____1
___2
__3
_4
</div>
</div>
<div style="clear:both;"></div>
</div>
<br>
<div class="line_1">
<div class="drop_container">
<div class="always_visible">Select___</div>
<div class="hidden_container">
Option_ 1
Option__ 2
Option___ 3
Option____ 4
</div>
</div>
<div class="drop_container">
<div class="always_visible">Select___</div>
<div class="hidden_container">
Option_ 1
Option__ 2
Option___ 3
Option____ 4
</div>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
Create simple drop-down menu using HTML and CSS
CSS:
<style>
.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;
}
</style>
and HTML:
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
View demo online
There is different ways to make dropdown menu using css. Here is simple code.
HTML Code
<label class="dropdown">
<div class="dd-button">
Dropdown
</div>
<input type="checkbox" class="dd-input" id="test">
<ul class="dd-menu">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
</ul>
</label>
CSS Code
body {
color: #000000;
font-family: Sans-Serif;
padding: 30px;
background-color: #f6f6f6;
}
a {
text-decoration: none;
color: #000000;
}
a:hover {
color: #222222
}
/* Dropdown */
.dropdown {
display: inline-block;
position: relative;
}
.dd-button {
display: inline-block;
border: 1px solid gray;
border-radius: 4px;
padding: 10px 30px 10px 20px;
background-color: #ffffff;
cursor: pointer;
white-space: nowrap;
}
.dd-button:after {
content: '';
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
.dd-button:hover {
background-color: #eeeeee;
}
.dd-input {
display: none;
}
.dd-menu {
position: absolute;
top: 100%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0;
margin: 2px 0 0 0;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);
background-color: #ffffff;
list-style-type: none;
}
.dd-input + .dd-menu {
display: none;
}
.dd-input:checked + .dd-menu {
display: block;
}
.dd-menu li {
padding: 10px 20px;
cursor: pointer;
white-space: nowrap;
}
.dd-menu li:hover {
background-color: #f6f6f6;
}
.dd-menu li a {
display: block;
margin: -10px -20px;
padding: 10px 20px;
}
.dd-menu li.divider{
padding: 0;
border-bottom: 1px solid #cccccc;
}
More css code example
I'm trying to create a pure css drop down menu. Everything works fine except for when I hover to drop the menu down, the entire nav bar also gets expanded and I don't want it to do that. Here is my code:
.nav-bar {
list-style:none;
}
#right {
padding-right: 100px;
}
#right li {
display: inline;
float: right;
padding: 3% 0 0.5% 0;
margin-top: -30px;
}
#right li img {
max-width: 70%;
max-height: auto;
}
#media screen and (max-width: 1000px) {
#right {
display: none;
}
}
#nav-refer {
padding: 5% 15% 5% 15%;
border-radius: 25px;
background: #FFC52D;
font-family: 'Bebas Neue Bold';
font-size: 22px;
text-align: center;
color: black;
text-decoration: none;
}
#media (max-width: 1000px) {
#nav-refer {
display: none;
}
}
#left {
padding-left: 100px;
}
#left li {
display: inline;
float: left;
display: block;
margin: -5px 0 0 -30px;
}
#left li img {
padding: 0 0 0 15px;
}
.drop_menu {
background: white;
padding:0;
margin:0;
list-style-type:none;
/*height: 30px;*/
}
.drop_menu li {
float:left;
}
.drop_menu li a {
padding:9px 20px;
display:block;
color: black;
text-decoration:none;
font-family: 'Bebas Neue Regular';
font-size: 22px;
}
.drop_menu li a img {
width: 60%;
height: auto;
padding: 0px;
}
/* Submenu */
.drop_menu ul {
position: absolute;
left:-9999px;
top:-9999px;
list-style-type: none;
}
.drop_menu:hover {
display:block;
height: 110px;
}
.drop_menu li:hover {
position:relative;
height: 30px;
}
.drop_menu li:hover ul {
left:70px;
top:50px;
background: white;
padding:0px;
}
.drop_menu li:hover ul li a {
padding:10px;
display:block;
width:168px;
text-indent:15px;
background-color: white;
}
.drop_menu li:hover ul li a:hover {
background: #E6E6E6;
padding: 5px;
}
#media (max-width: 1000px) {
#left {
display: none;
}
}
<div class="nav-bar">
<ul id="left">
<ul class="drop_menu">
<li><img src={{asset('images/hamburger2.png')}}>
<ul>
<li>ABOUT</li>
<li>TESTIMONIALS</li>
<li>REFER-A-FRIEND</li>
<li>CONTACT</li>
</ul>
</li>
</ul>
<li><img src={{asset('images/shine2_logo.png')}}></li>
</ul>
<ul id="right">
<li>REFER FRIENDS</li>
<li><img src={{asset('images/twitter_Icon.png')}}></li>
<li><img src={{asset('images/instagram_Icon.png')}}></li>
<li><img src={{asset('images/facebook_Icon.png')}}></li>
</ul>
</div>
Ive updated your CSS, you had some styles in the wrong place and you were also expanding the height of the menu when you hovered on the first <li>.
I also updated the position of the .drop_menu li:hover ul { to be 100% from the top of the parent <li>.
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix:after {
clear: both;
}
.drop_menu {
background: white;
padding:0;
margin:0;
list-style-type:none;
background: green;
}
.drop_menu > li {
float:left;
position:relative;
}
.drop_menu li a {
padding:9px 20px;
display:block;
color: black;
text-decoration:none;
font-family: 'Bebas Neue Regular';
font-size: 22px;
}
.drop_menu li a img {
width: 60%;
height: auto;
padding: 0px;
}
/* Submenu */
.drop_menu ul {
position: absolute;
left:-9999px;
top:-9999px;
list-style-type: none;
}
.drop_menu:hover {
display:block;
/* height: 110px; */
}
.drop_menu li:hover ul {
left:70px;
top: 100%;
background: white;
padding:0px;
}
.drop_menu li:hover ul li a {
padding:10px;
display:block;
width:168px;
text-indent:15px;
background-color: white;
}
.drop_menu li:hover ul li a:hover {
background: #E6E6E6;
padding: 5px;
}
<ul class="drop_menu clearfix">
<li>hamburger
<ul>
<li>ABOUT</li>
<li>TESTIMONIALS</li>
<li>REFER-A-FRIEND</li>
<li>CONTACT</li>
</ul>
</li>
</ul>
I am new in CSS and developing a dropdown menu. But when I add drop down list into main list it floats left. But I want float towards bottom Like thisCan anyone please help me that how to make list which drops Down
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body
{
margin: 0;}
#Header
{
position: fixed;
border: 1px solid black;
width: 100%;
height: 150px;
margin: 0%;
}
#logo
{
position: absolute;
border: 1px solid black;
width: 20%;
height: 150px;
margin: 0%;
}
#nav
{
position: absolute;
border: 1px solid black;
width: 79.5%;
height: 50px;
top: 65%;
margin-left: 20.2%;
background: transparent;
}
#nav ul
{
margin: 0;
padding: 0;
}
#nav ul li
{
list-style: none;
position:relative;
float: left;
margin:5px;
}
#nav ul li a{
text-decoration: none;
display: block;
padding: 10px 20px;
color: black;
font-size: 120%;
}
a:hover {
background: gray;
color:white;
height: 30px;
}
#subList
{
margin: 0;
padding: 0;
}
#subList li
{
list-style: none;
position:absolute;
margin:5px;
}
/* #nav ul li ul
{
display: block;
margin: 0px;
padding: 0px;
}
#nav ul li ul li
{
list-style: none;
position:relative;
float: bottom;
}
#nav ul li ul li a
{
position:absolute;
dispay:block;
color: black;
font-size: 120%;
}
/* #nav ul li:hover>ul
{
display: block;
}
*/
</style>
</head>
<body>
<div id="Header">
<div id="logo"></div>
<div id="nav">
<ul>
<li>Home</li>
<li>News
<ul id="subList">
<li>news1</li>
<li>news2</li>
<li>news3</li>
<li>news4</li>
</ul>
</li>
<li>About us</li>
<li>Sign in</li>
</ul>
</div>
</div>
</body>
</html>
You need to define specificity for direct child of nav. In your case this is setting all the ul li to float left.
try this.
#nav > ul > li
{
list-style: none;
position:relative;
float: left;
margin:5px;
}
Hope this help you!
This should get you started.
#nav {
border: 1px solid black;
width: 79.5%;
height: 50px;
top: 65%;
margin-left: 20.2%;
background: transparent;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav ul li {
list-style: none;
position: relative;
float: left;
margin: 5px;
}
#nav ul li a {
text-decoration: none;
display: block;
padding: 10px 20px;
color: black;
font-size: 120%;
}
a:hover {
background: gray;
color: white;
}
#subList {
margin: 0;
padding: 0;
position: absolute;
display: none;
background: #fff;
border: 1px solid #000;
}
#subList li {
list-style: none;
margin: 5px;
}
#nav ul li:hover > #subList {
display: block;
left: 0;
}
<div id="nav">
<ul>
<li>Home
</li>
<li>News
<ul id="subList">
<li>news1
</li>
<li>news2
</li>
<li>news3
</li>
<li>news4
</li>
</ul>
</li>
<li>About us
</li>
<li>Sign in
</li>
</ul>
</div>
I just started code and i decieded to make a school project website but i can't make a box transparent without affecting the text. Here is a link for my code:
I hope you guys can help me :)
I tried
Css
.boxed {background: transparent;}
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Bjerg</h1>
<div id="wrapper">
<div id="nav">
<ul id="menu">
<li>Home</li>
<li>About Us
<ul>
<li>The Team</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
<li>Products
<ul>
<li>Cozy Couch</li>
<li>Great Table</li>
<li>Small Chair</li>
<li>Shiny Shelf</li>
</ul>
</li>
<li>Contact
<ul>
<li>Online</li>
<li>Right Here</li>
<li>Somewhere Else</li>
</ul>
</li>
</ul>
</div>
</body>
And my Css:
h1{
text-align:center;
}
Body {
text-align: ;
background: url("http://goo.gl/wkzbXp");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
#wrapper
{
width: 1024px;
height: auto;
margin: auto;
}
#menu
{
margin:auto;
width:400px;
height: 100px;
}
#content
{
margin:auto;
width: 760px;
height: auto;
}
.container {
overflow:hidden;
list-style:none;
}
.container li {
float:left;
text-align:center;
margin:20px;
}
.container img {
border:2px solid #000;
display:block;
}
.sortfarve {
color:#000;
}
.hvidfarve {
color:#fff;
}
You can use rgba() , the last parameter can be use to define opacity
.boxed {
background: rgba(123,0,0,0.5);
/*........................^......opacity......_*/
}
Fiddle Demo
I am looking horizontal dropdown menu pure css based and browser compatible....
i am looking like mentioned below example
see this is pure css bases dropdown menu:-
HTML
<ul id="menu">
<li>Home</li>
<li>About Us
<ul>
<li>The Team</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
<li>Products
<ul>
<li>Cozy Couch</li>
<li>Great Table</li>
<li>Small Chair</li>
<li>Shiny Shelf</li>
<li>Invisible Nothing</li>
</ul>
</li>
<li>Contact
<ul>
<li>Online</li>
<li>Right Here</li>
<li>Somewhere Else</li>
</ul>
</li>
</ul>
CSS
ul
{
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li
{
display: block;
position: relative;
float: left;
}
li ul
{
display: none;
}
ul li a
{
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover
{
background: #617F8A;
}
li:hover ul
{
display: block;
position: absolute;
}
li:hover li
{
float: none;
font-size: 11px;
}
li:hover a
{
background: #617F8A;
}
li:hover li a:hover
{
background: #95A9B1;
}
see the demo:- http://jsfiddle.net/XPE3w/7/
html, body {
font-family: Arial, Helvetica, sans-serif;
}
/* define a fixed width for the entire menu */
.navigation {
width: 150px;
}
/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
/* add hover behaviour */
.mainmenu a:hover {
background-color: #C5C5C5;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu li:hover .submenu {
display: block;
max-height: 200px;
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu a {
background-color: #999;
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #666;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
<html>
<body>
<head>
<link rel="stylesheet" type="css/text" href="nav.css">
</head>
</body>
<nav class="navigation">
<ul class="mainmenu">
<li>Home</li>
<li>About</li>
<li>Products
<ul class="submenu">
<li>Tops</li>
<li>Bottoms</li>
<li>Footwear</li>
</ul>
</li>
<li>Contact us</li>
</ul>
</nav>
Tested in IE7 - 9 and Firefox: http://jsfiddle.net/WCaKg/. Markup:
<ul>
<li><li></li>
<li><li></li>
<li><li>
<ul>
<li><li></li>
<li><li></li>
<li><li></li>
<li><li></li>
</ul>
</li>
<li><li></li>
<li><li></li>
<li><li></li>
</ul>
CSS:
* {
margin: 0;
padding: 0;
}
body {
font: 200%/1.5 Optima, 'Lucida Grande', Lucida, 'Lucida Sans Unicode', sans-serif;
}
ul {
width: 9em;
list-style-type: none;
font-size: 0.75em;
}
li {
float: left;
margin: 0 4px 4px 0;
background: #60c;
background: rgba(102, 0, 204, 0.66);
border: 4px solid #60c;
color: #fff;
}
li:hover {
position: relative;
}
ul ul {
z-index: 1;
position: absolute;
left: -999em;
width: auto;
background: #ccc;
background: rgba(204, 204, 204, 0.33);
}
li:hover ul {
top: 2em;
left: 3px;
}
li li {
margin: 0 0 3px 0;
background: #909;
background: rgba(153, 0, 153, 0.66);
border: 3px solid #909;
}
View code online on: WebCrafts.org
HTML code:
<body id="body">
<div id="navigation">
<h2>
Pure CSS Drop-down Menu
</h2>
<div id="nav" class="nav">
<ul>
<li>Menu1</li>
<li>
Menu2
<ul>
<li>Sub-Menu1</li>
<li>
Sub-Menu2
<ul>
<li>Demo1</li>
<li>Demo2</li>
</ul>
</li>
<li>Sub-Menu3</li>
<li>Sub-Menu4</li>
</ul>
</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</div>
</div>
</body>
Css code:
body{
background-color:#111;
}
#navigation{
text-align:center;
}
#navigation h2{
color:#DDD;
}
.nav{
display:inline-block;
z-index:5;
font-weight:bold;
}
.nav ul{
width:auto;
list-style:none;
}
.nav ul li{
display:inline-block;
}
.nav ul li a{
text-decoration:none;
text-align:center;
color:#222;
display:block;
width:120px;
line-height:30px;
background-color:gray;
}
.nav ul li a:hover{
background-color:#EEC;
}
.nav ul li ul{
margin-top:0px;
padding-left:0px;
position:absolute;
display:none;
}
.nav ul li:hover ul{
display:block;
}
.nav ul li ul li{
display:block;
}
.nav ul li ul li ul{
margin-left:100%;
margin-top:-30px;
visibility:hidden;
}
.nav ul li ul li:hover ul{
margin-left:100%;
visibility:visible;
}
You don't have to always use ul elements to achieve that, you can use other elements too as seen below. Here there are 2 examples, one using div and one using select.
This examples demonstrates the basic functionality, but can be extended/enriched more. It is tested in linux only (iceweasel and chrome).
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<style>
.drop_container
{
position:relative;
float:left;
}
.always_visible
{
background-color:#FAFAFA;
color:#333333;
font-weight:bold;
cursor:pointer;
border:2px silver solid;
margin:0px;
margin-right:5px;
font-size:14px;
font-family:"Times New Roman", Times, serif;
}
.always_visible:hover + .hidden_container
{
display:block;
position:absolute;
color:green;
}
.hidden_container
{
display:none;
border:1px gray solid;
left:0px;
background-color:#FAFAFA;
padding:5px;
z-index:1;
}
.hidden_container:hover
{
display:block;
position:absolute;
}
.link
{
color:blue;
white-space:nowrap;
margin:3px;
display:block;
}
.link:hover
{
color:white;
background-color:blue;
}
.line_1
{
width:800px;
border:1px tomato solid;
padding:5px;
}
</style>
</head>
<body>
<div class="line_1">
<div class="drop_container">
<select class="always_visible" disabled><option>Select</option></select>
<div class="hidden_container">
Option_ 1
Option__ 2
Option___ 3
Option____ 4
</div>
</div>
<div class="drop_container">
<select class="always_visible" disabled><option>Select</option></select>
<div class="hidden_container">
____1
___2
__3
_4
</div>
</div>
<div style="clear:both;"></div>
</div>
<br>
<div class="line_1">
<div class="drop_container">
<div class="always_visible">Select___</div>
<div class="hidden_container">
Option_ 1
Option__ 2
Option___ 3
Option____ 4
</div>
</div>
<div class="drop_container">
<div class="always_visible">Select___</div>
<div class="hidden_container">
Option_ 1
Option__ 2
Option___ 3
Option____ 4
</div>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
Create simple drop-down menu using HTML and CSS
CSS:
<style>
.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;
}
</style>
and HTML:
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
View demo online
There is different ways to make dropdown menu using css. Here is simple code.
HTML Code
<label class="dropdown">
<div class="dd-button">
Dropdown
</div>
<input type="checkbox" class="dd-input" id="test">
<ul class="dd-menu">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
</ul>
</label>
CSS Code
body {
color: #000000;
font-family: Sans-Serif;
padding: 30px;
background-color: #f6f6f6;
}
a {
text-decoration: none;
color: #000000;
}
a:hover {
color: #222222
}
/* Dropdown */
.dropdown {
display: inline-block;
position: relative;
}
.dd-button {
display: inline-block;
border: 1px solid gray;
border-radius: 4px;
padding: 10px 30px 10px 20px;
background-color: #ffffff;
cursor: pointer;
white-space: nowrap;
}
.dd-button:after {
content: '';
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
.dd-button:hover {
background-color: #eeeeee;
}
.dd-input {
display: none;
}
.dd-menu {
position: absolute;
top: 100%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0;
margin: 2px 0 0 0;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);
background-color: #ffffff;
list-style-type: none;
}
.dd-input + .dd-menu {
display: none;
}
.dd-input:checked + .dd-menu {
display: block;
}
.dd-menu li {
padding: 10px 20px;
cursor: pointer;
white-space: nowrap;
}
.dd-menu li:hover {
background-color: #f6f6f6;
}
.dd-menu li a {
display: block;
margin: -10px -20px;
padding: 10px 20px;
}
.dd-menu li.divider{
padding: 0;
border-bottom: 1px solid #cccccc;
}
More css code example