I'm a bit new to HTML/CSS and I'm having some trouble with creating properly positioning elements inside my navigation bar.
My li elements are overflowing out of the bar.
This is my code atm:
HTML
<body class="body">
<div class="navbar">
<ul class="pull-left">
<li>Home</li>
<li>News</li>
<li>About</li>
</ul>
<ul class="pull-right">
<li>Login</li>
<li>Sign Up</li>
<li>Support</li>
</ul>
</div>
<div class="jumbotron">
</div>
CSS
.body {
border: solid red 3px;
margin: 0px
}
.navbar {
background-color: #99CCFF;
border:3px solid green;
display:block;
}
.navbar ul{
display:inline;
font-family: Arial;
}
.navbar ul li{
color:white;
display:inline-block;
border: solid black 1px;
margin: -6px 10px 0px 10px;
padding: 5px;
background-color: #0099FF;
text-transform: uppercase;
transition: background-color 0.5s;
}
.navbar ul li:hover{
background-color: black;
}
.navbar ul li a{
text-decoration:none;
display: block;
}
.jumbotron {
background-image: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
height: 600px;
}
.pull-left {
float:left;
padding-left: 10px;
}
.pull-right {
float:right;
padding-right: 10px;
}
JSFIDDLE
How do I make my buttons stay inside the navbar and expand it automatically?
I looked through a lot of similar posts and tried a couple of things, however I couldn't quite get it to work.
The reason is you must specify overflow property.
Here you must specify overflow:auto; with height:auto;(optional as it's default even if not specified)
CSS
.navbar {
background-color: #99CCFF;
border:3px solid green;
display:block;
height:auto /* Not mandatory as is default if not specifed */
overflow:auto;
}
Fiddle
Html file is this
<body class="body">
<div class="navbar">
<ul class="pull-left">
<li>Home</li>
<li>News</li>
<li>About</li>
</ul>
<ul class="pull-right">
<li>Login</li>
<li>Sign Up</li>
<li>Support</li>
</ul>
<div class="clearBoth"></div>
</div>
<div class="jumbotron">
</div>
</body>
Css is this
.body {
border: solid red 3px;
margin: 0px
}
.navbar {
background-color: #99CCFF;
border:3px solid green;
display:block;
/*height:25px;*/
}
.navbar ul{
display:inline;
font-family: Arial;
}
.navbar ul li{
color:white;
display:inline-block;
border: solid black 1px;
margin: -6px 10px 0px 10px;
padding: 5px;
background-color: #0099FF;
text-transform: uppercase;
transition: background-color 0.5s;
}
.navbar ul li:hover{
background-color: black;
}
.navbar ul li a{
text-decoration:none;
display: block;
}
.jumbotron {
background-image: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
height: 600px;
}
.pull-left {
float:left;
padding-left: 10px;
}
.pull-right {
float:right;
padding-right: 10px;
}
.clearBoth{clear: both;}
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 basic drop-down menu. Whenever I however over "blog", the "wiki" link seems to get dragged into it.
Here's a screenshot to show what I mean:
As you can see, "wiki" is below "march". I want to have "march" drop down from "blog" and keep "wiki" along the green line.
#header {
box-shadow: 0px 0px 5px 2px #000;
border-radius: 15px 15px 15px 15px;
width: 790px;
height: 30px;
line-height: 85%;
background: #002929;
word-spacing: 5px;
}
#header li {
display: inline;
}
#header ul ul {
display: none;
}
#header ul li:hover > ul {
display: block;
}
#header a:hover {
background: #0147FA;
border-radius: 15px 15px 15px 15px;
padding: 2px;
}
#header a {
text-decoration: none;
color: #ffff4c;
}
<div id="header">
<ul>
<li style="font-size:30px"><strong>Home</strong></li>
<li style="font-size:30px"><strong>Blog</strong>
<ul>
<li style="font-size:30px"><strong>March</strong></li>
</ul>
</li>
<li style="font-size:30px"><strong>Wiki</strong></li>
</ul>
</div>
Here's a JSFiddle.
So I cleaned up the css and it seems to work now.
Here is your html below
<div id="header">
<ul>
<li style="font-size:30px"><strong>Home</strong></li>
<li style="font-size:30px"><strong>Blog</strong>
<ul>
<li style="font-size:30px"><strong>March</strong></li>
</ul>
</li>
<li style="font-size:30px"><strong>Wiki</strong></li>
</ul>
</div>
Here is the new css below:
#header {
box-shadow: 0px 0px 5px 2px #000;
border-radius:15px 15px 15px 15px;
width: 790px;
height: 30px;
line-height: 85%;
background: #002929;
word-spacing: 5px;
}
#header li {
display: inline;
}
#header a:hover {
background: #0147FA;
border-radius: 15px 15px 15px 15px;
}
#header a {
text-decoration: none;
color: #ffff4c;
}
#header ul a
{
text-decoration:none;
font-weight:700;
line-height:32px;
padding:0 15px;
}
#header ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#header ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
padding:0
}
#header ul li:hover > ul
{
display:block
}
Be sure to compare to see the differences between your css and my css. If this is is not what you wanted please get back to me.
I'm planning to do a new sort of dropdown menu style but I'm unsure of how to do it, I want it so that it basically dropsdown a container.
I've kinda marked it out, but I'm unsure on how to do it?
HTML:
<div id="header">
<div class="nav">
<ul>
<li>Home</li>
<li>Community</li>
<li>Staff</li>
<li>Shop</li>
<li>Enter</li>
</ul>
</div>
CSS:
a:visited, a:link, a:active {
text-decoration: none;
color: white;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #4a8fbc;
}
div.nav {
font-family: 'Lato', sans-serif;
font-size: 14px;
margin-left: 200px;
margin-right: 200px;
float: right;
color: white;
line-height: 50px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
margin: 0 30px 0 0;
}
li a:hover {
color: #256690;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #7d7d7d;
padding: 6px;
text-decoration: none;
background-color: #f2f2f2;
}
http://jsfiddle.net/UwRJ2/
This should get you a good start :
DEMO
HTML :
<div id="header">
<div class="nav">
<ul>
<li>Home
<ul>
<li>lala</li>
<li>lala</li>
<li>lala</li>
</ul>
</li>
<li>Community</li>
<li>Staff</li>
<li>Shop</li>
<li>Enter</li>
</ul>
</div>
</div>
CSS I added to your existing code + I also changed the display property on the li elements to display:inline-block; :
ul li > ul{
display:none;
border:1px solid red;
color:red;
position:absolute;
}
ul li:hover > ul{
display:block;
}
I have attached a picture so you can see what kind of problem I am receiving. I want the navigation menu to line up with the navigation container so they appear as the same element. The picture shows the last element of the navigation menu "E-MAIL" and then the container that it sits within is just a yellow strip (as indicated in the code below).
I have tried working with negative margins on the navigation container but no solution as of yet.
web graphic http://jaylefler.com/webgraphic.png
<!DOCTYPE html>
<html>
<head>
<title>css example</title>
<style type="text/css">
#logo {
background-color: black;
width: 100%;
color: rgb(255,200,0);
}
#logo img {
padding: 10px;
}
body {
font-family: Arial, Helvetica, Verdana;
margin: 0;
}
#contents {
border: 2px solid black;
border-radius: 15px;
box-shadow: 6px 6px 4px 4px #000;
width: 90%;
min-height: 650px;
margin: 0 5%;
margin-top: 15px;
padding: 15px;
}
#navMenu {
width: 760px;
height: 30px;
background-color:rgb(255,200,0);
border:1px #000 solid;
font-weight:bold;
margin-left: -2px;
}
#navMenu ul{
margin:-1px 0 0 0;
padding:0;
line-height:32px;
}
#navMenu li{
margin:0;
padding:0;
list-style:none;
position:relative;
background-color:rgb(255,200,0);
float:left;
border:1px #000 solid;
}
#navMenu ul li a{
text-align:center;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#000;
}
#navMenu ul ul{
position:absolute;
visibility:hidden;
top: 31px;
margin-left: -2px;
}
#navMenu ul li:hover ul{
visibility: visible;
}
#navMenu a:hover {
background-color:#000;
color:rgb(255,200,0);
}
.left_part {
background:black;
}
.right_part {
background:yellow;
float:right;
white-space:nowrap;
display:inline;
text-overflow:ellipsis;
overflow:hidden;
}
#navContainer {
background-color:rgb(255,200,0);
width:100%
margin-top:-3x;
padding:0;
border:1px solid;
height:31px;
clear:left;
}
</style>
</head>
<body>
<div id="logo">
<div class="left_part">
<img src="demo.gif">
</div>
<div class="right_part">
</div>
</div>
<div id="navContainer">
<div id="navMenu">
<nav>
<ul>
<li>HOME</li>
<li>PROFILE</li>
<li>MANAGE SUB
<ul>
<li>VIEW TITLES</li>
<li>ADD TITLE</li>
<li>MODIFY TITLE</li>
<li>REMOVE TITLE</li>
</ul>
</li>
<li>NEW RELEASES</li>
<li>E-MAIL</li>
</ul>
</nav>
</div>
</div>
<div id="contents">
<p>This is just some dummy text. </p>
</div>
</body>
</html>
#navmenu {
width: 760px;
height: 30px;
background-color: #FFC800;
border: 1px black solid;
border-top: 0; /* REMOVE TOP BORDER */
margin-left: -2px;
}
#navContainer {
background-color:rgb(255,200,0);
width:100%
height: 30px; /* MATCH HEIGHT */
margin-top:-3x;
padding:0;
border:1px solid;
height:31px;
clear:left;
}
I did a little cleanup. Since I don't have your logo image i removed that part of the code, I guess you will manage to add that yourself.
Here is a simplified code that fixes your problem:
<!DOCTYPE html>
<html>
<head>
<title>css example</title>
<style type="text/css">
body {
font-family: Arial, Helvetica, Verdana;
margin: 0;
padding: 0;
}
#contents {
border: 2px solid black;
border-radius: 15px;
box-shadow: 6px 6px 4px 4px #000;
width: 90%;
min-height: 650px;
margin: 0 5%;
margin-top: 15px;
padding: 15px;
}
nav {
width: 100%;
height: 30px;
background-color:rgb(255,200,0);
border-bottom:1px solid #000;
}
nav ul{
padding:0;
margin: 0;
overflow: hidden;
}
nav > ul{
min-width: 755px;
}
nav ul li{
float: left;
margin:0;
padding:0;
list-style:none;
background-color:rgb(255,200,0);
border-right:1px solid #000;
}
nav ul li a{
text-align:center;
text-decoration:none;
width:150px;
height: 25px;
padding-top: 5px;
display:block;
color:#000;
}
nav ul li ul{
position:absolute;
visibility:hidden;
top: 31px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
margin-left: -1px;
}
nav ul li:hover ul{
visibility: visible;
}
nav ul li ul li {
float: none;
}
nav a:hover {
background-color:#000;
color:rgb(255,200,0);
}
</style>
</head>
<body>
<nav>
<ul>
<li>HOME</li>
<li>PROFILE</li>
<li>MANAGE SUB
<ul>
<li>VIEW TITLES</li>
<li>ADD TITLE</li>
<li>MODIFY TITLE</li>
<li>REMOVE TITLE</li>
</ul>
</li>
<li>NEW RELEASES</li>
<li>E-MAIL</li>
</ul>
</nav>
<div id="contents">
<p>This is just some dummy text. </p>
</div>
</body>
</html>
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