I'm creating a drop-right menu with CSS, but I don't know how to do it...
I have searched for some examples on internet, but the code of all of them are very extensive.
I have tried with this one, but as you can see, I get a terrible and ugly result....
How can I solve it?
There is a link with an example of the result that I expect:
http://subefotos.com/ver/?fe969c98c2a25ac71c8c14d12a4c9a8co.png
Thanks!
body {
background-color: #CEF6F5;
text-decoration: none;
}
aside {
margin-top: 1%;
height: 50%;
}
#content {
float: right;
width: 80%;
background-color: red;
}
#menu {
width: 20%;
float: left;
background-color: black;
}
.menu {
text-decoration: none;
background-color: #000000;
font-family: 'Rancho', cursive;
}
.cl-menu {
list-style: none outside none;
display: inline-table;
position: relative;
width: 80%;
}
.cl-menu li {
padding: 5px 1px;
text-align: center;
}
.cl-menu > li:hover {
background-color: #303030;
background-color: #66819C;
color: #FFF;
font-weight: bold;
text-decoration: none;
opacity: 1;
}
.cl-menu li ul {
display: none;
}
.cl-menu li:hover ul {
display: block;
opacity: 0.8;
background-color: #FFF;
margin-top: 4px;
margin-left: 200px;
font-weight: normal !important;
}
.cl-menu li ul li {
border-bottom: 1px solid #cccccc !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
}
.cl-menu li ul li a {
color: #green;
}
.cl-menu li ul li a:hover {
color: #5j8548;
}
.cl-menu ul:after {
content: "";
clear: both;
display: block;
}
a {
text-decoration: none;
color: #CEF6F5;
font-family: 'Rancho', cursive;
}
<link href='http://fonts.googleapis.com/css?family=Rancho' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css.css">
<html>
<body>
<aside id='menu'>
<ul class="cl-menu">
<li> Mis pedidos </li>
<li> Mi perfil </li>
<li> Descuentos
</li>
<li id='albumes'>Albumes
<ul>
<li>Navidad 2015
</li>
<li>Navidad 2014
</li>
</ul>
</li>
<li> Añadir al carrito </li>
<li> Articulos seleccionados </li>
<li> Finalizar Pedido </li>z
</ul>
</aside>
<aside id="content">CONTINGUT WEB</aside>
</body>
</html>
there was a lot of unnecessary code so i had cleaned it up and fixed it, here it is:
HTML:
<aside id='menu'>
<ul class="cl-menu">
<li>
Mis pedidos
</li>
<li>
Mi perfil
</li>
<li>
Descuentos
</li>
<li id='albumes'>
Albumes
<ul>
<li>
Navidad 2015
</li>
<li>
Navidad 2014
</li>
</ul>
</li>
<li>
Añadir al carrito
</li>
<li>
Articulos seleccionados
</li>
<li>
Finalizar Pedido
</li>
</ul>
</aside>
<aside id="content">CONTINGUT WEB</aside>
CSS:
body
{
background-color: #CEF6F5;
}
aside
{
margin-top: 1%;
height:50%;
}
ul
{
margin: 0;
padding: 0;
}
li
{
list-style:none;
}
a
{
text-decoration:none;
}
#content
{
float:right;
width:80%;
background-color:red;
}
#menu
{
width:20%;
float:left;
background-color: #000;
}
.cl-menu li
{
position: relative;
}
.cl-menu > li:hover
{
font-weight:bold;
opacity: 1;
filter: alpha(opacity=100);
}
.cl-menu li:hover
{
background-color:#66819C;
}
.cl-menu li a
{
display: block;
min-width: 150px;
padding: 10px;
color:#CEF6F5;
font-family: 'Rancho', cursive;
}
.cl-menu li:hover a
{
color:#FFF;
}
.cl-menu li ul
{
position: absolute;
top: 0;
left: 100%;
border: 1px solid #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
display:none;
}
.cl-menu li:hover > ul
{
display:block;
opacity: 0.8;
filter: alpha(opacity=80);
}
.cl-menu li ul li
{
background: grey;
border-bottom:1px solid #000;
border-top:none;
border-left:none;
border-right:none;
}
.cl-menu li ul li:last-child
{
border-bottom: none;
}
live example: http://jsfiddle.net/q6ouetwp/1/
Related
I need to display sub-sub-menu on hover of my sub-menu. So far I did code to display menu -> sub-menu on menu click, but to proceed I want a functionality to display sub-sub-menu on hover of my sub-menu. Can somebody help me to achieve the same?
var ddmenuitem = 0;
function jsddm_open() {
jsddm_close();
ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
// $(this).find('div.subsubmenu').css('display','none');
}
function jsddm_close() {
if (ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function() {
$('#topnav > ul > li').bind('click', jsddm_open)
$('#topnav > ul > li > a').click(function(ev) {
if ($(this).hasClass('current')) {
ev.preventDefault();
}
if ($(this).attr('class') != 'active') {
$('#topnav ul li a').removeClass('active');
$(this).addClass('active');
}
});
});
#topnav {
float: left;
width: 600px;
height: 30px;
background: black;
margin-top: 10px;
position: relative;
font-size: 15px;
margin-left: 30px
}
#topnav ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#topnav ul li {
float: left;
margin: 0;
padding: 0;
}
#topnav ul li a {
padding: 5px 15px;
color: red;
text-decoration: none;
display: block;
font-weight: bold;
}
#topnav ul li a:link {
color: red;
text-decoration: none;
}
#topnav ul li a:visited {
color: #FFF;
text-decoration: none;
}
#topnav ul li a:hover {
color: red;
text-decoration: none;
}
#topnav ul li a.active {
text-decoration: none;
color: black;
background: #e0e0e0;
}
#topnav ul li ul.submenu {
float: left;
padding: 4px 0;
position: absolute;
left: 0;
top: 30px;
display: none;
background: #e0e0e0;
color: #00537F;
width: 600px;
height: 30px;
}
#topnav ul li ul.submenu a {
display: inline;
color: #00537F;
padding: 4px 8px;
}
#topnav ul.submenu a:hover {
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="topnav">
<ul>sds
<li>
Admin
</li>
<li>
MAC
<ul class="submenu">
<li>Master Data</li>
<li>
Transaction Data
<ul>
<li>Company Master</li>
<li>Location Master</li>
<li>Size Master</li>
</ul>
</li>
<li>
Admin Data
</li>
</ul>
</li>
</ul>
</div>
Try the following snippet without using jquery or javascript, you can get it done using only css. And have updated according to your question
#nav {
list-style: none inside;
margin: 0;
padding: 0;
text-align: center;
}
#nav li {
display: block;
position: relative;
float: left;
background: #000000;
}
#nav li a {
display: block;
padding: 0;
text-decoration: none;
width: 200px;
line-height: 35px;
color: #fff;
}
#nav li li a {
font-size: 80%;
}
#nav li:hover {
background: #ff0000;
}
#nav ul {
position: absolute;
padding: 0;
left: 0;
display: none;
}
#nav li:hover ul ul {
display: none;
}
#nav li:hover ul {
display: block;
}
#nav li li:hover ul {
display: block;
margin-left: 200px;
margin-top: -35px;
}
<div id="topnav">
<ul id="nav">
<li>
Admin
</li>
<li>
MAC
<ul class="submenu">
<li>Master Data</li>
<li>
Transaction Data ⇒
<ul>
<li>Company Master</li>
<li>Location Master</li>
<li>Size Master</li>
</ul>
</li>
<li>
Admin Data
</li>
</ul>
</li>
</ul>
</div>
you can try this
#menu {
background: #343434;
color: #eee;
height: 35px;
border-bottom: 4px solid #eeeded
}
#menu ul,
#menu li {
margin: 0 0;
padding: 0 0;
list-style: none
}
#menu ul {
height: 35px
}
#menu li {
float: left;
display: inline;
position: relative;
font: bold 12px Arial;
text-shadow: 0 -1px 0 #000;
border-right: 1px solid #444;
border-left: 1px solid #111;
text-transform: uppercase
}
#menu li:first-child {
border-left: none
}
#menu a {
display: block;
line-height: 35px;
padding: 0 14px;
text-decoration: none;
color: #eee;
}
#menu li:hover > a,
#menu li a:hover {
background: #111
}
#menu input {
display: none;
margin: 0 0;
padding: 0 0;
width: 80px;
height: 35px;
opacity: 0;
cursor: pointer
}
#menu label {
font: bold 30px Arial;
display: none;
width: 35px;
height: 36px;
line-height: 36px;
text-align: center
}
#menu label span {
font-size: 12px;
position: absolute;
left: 35px
}
#menu ul.menus {
height: auto;
width: 180px;
background: #111;
position: absolute;
z-index: 99;
display: none;
border: 0;
}
#menu ul.menus li {
display: block;
width: 100%;
font: 12px Arial;
text-transform: none;
}
#menu li:hover ul.menus {
display: block
}
#menu a.home {
background: #c00;
}
#menu a.prett {
padding: 0 27px 0 14px
}
#menu a.prett::after {
content: "";
width: 0;
height: 0;
border-width: 6px 5px;
border-style: solid;
border-color: #eee transparent transparent transparent;
position: absolute;
top: 15px;
right: 9px
}
#menu ul.menus a:hover {
background: #333;
}
#menu ul.menus .submenu {
display: none;
position: absolute;
left: 180px;
background: #111;
top: 0;
width: 180px;
}
#menu ul.menus .submenu li {
background: #111;
}
#menu ul.menus .has-submenu:hover .submenu {
display: block;
}
<nav>
<ul id='menu'>
<li><a class='home' href='/'>Home</a></li>
<li><a class='prett' href='#' title='Menu'>Menu</a>
<ul class='menus'>
<li class='has-submenu'><a class='prett' href='Dropdown 1' title='Dropdown 1'>Dropdown 1 + Sub Menu</a>
<ul class='submenu'>
<li>Sub Menu</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li><a href='#' title='Dropdown 2'>Dropdown 2</a></li>
<li><a href='#' title='Dropdown 3'>Dropdown 3</a></li>
</ul>
</li>
</ul>
</nav>
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
This must be basic to some but not to all new CSS members. Quick one how do I have the drop down menu drop on the same link not as in line? I want it to drop vertically on the same place not to extend in line. Any one?
.nav-container {
float: center;
width: 100%;
padding-bottom: 0;
margin-bottom: 11px;
}
.navigation-menu {
padding: 0;
float: center;
clear: both;
font-size: 12px
margin-bottom: 0;
}
.navigation-menu > li {
margin-right: 3px;
margin: 100px auto;
line-height:20px;
max-width:860px;
display: inline;
}
.navigation-menu li {
list-style-type: none;
}
.navigation-menu li a {
background-color: #ffffff;
display:inline-block;
padding: 10px 20px;
color: #696969;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
.navigation-menu li.active a {
background-color: purple;
color:#fff;
}
.navigation-menu li ul {
display: none;
}
.navigation-menu ul li a{
padding:10px 20px;
}
#main {
clear: left;
}
.navigation-menu li:hover ul {
display: inline-block;
position: absolute;
padding:5px;
}
.navigation-menu li ul li a:hover{
background-color: black;
color: white;
display: block;
}
.navigation-menu li a:hover{
background-color:black;
color: white;
}
.navigation-menu li a:active {
background-color: purple;
color:#fff;
}
.navigation-menuul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
<div class="nav-container">
<ul class="navigation-menu">
<li><a href='#' >Home</a></li>
<li class="active"><a href='#' >C2B Payments</a> </li>
<li><a href='#' >C2B SMS</a>
<ul>
<li> C2B SMS</li>
<li> Send SMS</li>
<li> Campaign SMS</li>
</ul>
</li>
</ul>
</div>
Add this code .navigation-menu li { position: relative; } and also .navigation-menu li ul { display: none; position: absolute; left: 0; } to get the result of aligned dropdown
Add to this css in your file
.navigation-menu li:hover ul {
top: 100%;
left: 0;
}
.navigation-menu > li {
position: relative;
}
.nav-container {
float: center;
width: 100%;
padding-bottom: 0;
margin-bottom: 11px;
}
.navigation-menu li:hover ul {
top: 100%;
left: 0;
}
.navigation-menu > li {
position: relative;
}
.navigation-menu {
padding: 0;
float: center;
clear: both;
font-size: 12px
margin-bottom: 0;
}
.navigation-menu > li {
margin-right: 3px;
margin: 100px auto;
line-height:20px;
max-width:860px;
display: inline;
}
.navigation-menu li {
list-style-type: none;
}
.navigation-menu li a {
background-color: #ffffff;
display:inline-block;
padding: 10px 20px;
color: #696969;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
.navigation-menu li.active a {
background-color: purple;
color:#fff;
}
.navigation-menu li ul {
display: none;
}
.navigation-menu ul li a{
padding:10px 20px;
}
#main {
clear: left;
}
.navigation-menu li:hover ul {
display: inline-block;
position: absolute;
padding:5px;
}
.navigation-menu li ul li a:hover{
background-color: black;
color: white;
display: block;
}
.navigation-menu li a:hover{
background-color:black;
color: white;
}
.navigation-menu li a:active {
background-color: purple;
color:#fff;
}
.navigation-menuul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
<div class="nav-container">
<ul class="navigation-menu">
<li><a href='#' >Home</a></li>
<li class="active"><a href='#' >C2B Payments</a> </li>
<li><a href='#' >C2B SMS</a>
<ul>
<li> C2B SMS</li>
<li> Send SMS</li>
<li> Campaign SMS</li>
</ul>
</li>
</ul>
</div>
.nav-container {
float: center;
width: 100%;
padding-bottom: 0;
margin-bottom: 11px;
}
.navigation-menu {
padding: 0;
float: center;
clear: both;
font-size: 12px
margin-bottom: 0;
}
.navigation-menu > li {
margin-right: 3px;
margin: 100px auto;
line-height:20px;
max-width:860px;
display: inline;
}
.navigation-menu li {
list-style-type: none;
}
.navigation-menu li a {
background-color: #ffffff;
display:inline-block;
padding: 10px 20px;
color: #696969;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
.navigation-menu li.active a {
background-color: purple;
color:#fff;
}
.navigation-menu li ul {
display: none;
position: relative;
top: 50px;
left: 215px;
}
.navigation-menu ul li a{
padding:10px 20px;
}
#main {
clear: left;
}
.navigation-menu li:hover ul {
display: inline-block;
position: absolute;
padding:5px;
}
.navigation-menu li ul li a:hover{
background-color: black;
color: white;
display: block;
}
.navigation-menu li a:hover{
background-color:black;
color: white;
}
.navigation-menu li a:active {
background-color: purple;
color:#fff;
}
.navigation-menuul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
<div class="nav-container">
<ul class="navigation-menu">
<li><a href='#' >Home</a></li>
<li class="active"><a href='#' >C2B Payments</a> </li>
<li><a href='#' >C2B SMS</a>
<ul>
<li> C2B SMS</li>
<li> Send SMS</li>
<li> Campaign SMS</li>
</ul>
</li>
</ul>
</div>
I have a problem with the drop down menu style..
when I mouse hover the third level, the second level font color is changed to its color..
I want to make it keep white (as hover) when third level is hover..
How can I make it?
My style:
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu
{
font-size: 20px;
display: inline;
min-height: 45px;
overflow: auto;
}
ul#menu li
{
float: left;
list-style: none;
padding-left: 20px;
background-color: #ff6a00;
border-bottom: 2px solid #181818;
border-top: 2px solid #303030;
min-width: 160px;
display: block;
position: relative;
min-height: 45px;
}
ul#menu li:hover
{
background-color: #808080;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
border-bottom: 2px solid #222222;
border-top: 2px solid #1B1B1B;
}
ul#menu li a
{
text-decoration: none;
padding: 0px;
border-left: 3px solid rgba(0, 0, 0, 0);
color: white;
display: block;
font-family: 'Lucida Console';
font-size: 18px;
line-height: 45px;
padding: 0 10px;
text-decoration: none;
text-transform: uppercase;
text-align: left;
}
ul#menu li a:hover
{
border-radius: 5px 0 0 0;
border-left: 3px solid #C4302B;
color: #C4302B;
}
ul#menu li:hover
{
background-color: #DA251D;
}
ul#menu li ul
{
display: none;
}
ul#menu li:hover ul
{
display: block;
}
ul#menu li ul li
{
float: none;
}
#menu .submenu li:hover a
{
border-left: 3px solid #454545;
border-radius: 0;
color: #ffffff;
}
#menu > li:hover .submenu, .menu > li:focus .submenu
{
max-height: 2000px;
z-index: 10;
}
#menu > li:hover .submenu li, .menu > li:focus .submenu li
{
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
</style>
<title>Page Title</title>
</head>
<body>
<div class="ThirdMenu">
<ul id="menu" class="menu">
<li>sangeet
<ul class="submenu" id="submenu"
<li>sdfsadf
<ul class="thirdmenu" id="thirdmenu"><li>sdfsd</li></ul>
</li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Tell me simple way to display third menu hover on main category?
if i got you right:
HTML:
<div class="menu_wrap">
<ul class="newlevel level0">
<li>level0, link 1</li>
<li>
level0, link 2
<ul class="newlevel level1">
<li>level1, link 1</li>
<li>level1, link 2</li>
<li>
level1, link 3
<ul class="newlevel level2">
<li>level2, link 1</li>
<li>level2, link 2</li>
<li>level2, link 3</li>
</ul>
</li>
</ul>
</li>
<li>level0, link 3</li>
</ul>
</div>
CSS:
.menu_wrap
{
width: 300px;
}
ul
{
padding: 0;
}
li
{
list-style: none;
}
a
{
display: block;
padding: 10px;
text-decoration: none;
background: #ff6a00;
color: #000;
border-top: 1px solid;
}
a:hover, .current > a
{
background: #DA251D;
}
.level1 a
{
padding-left: 40px;
}
.level2 a
{
padding-left: 80px;
}
.level0 ul
{
display: none;
}
.newlevel li:hover > ul
{
display: block;
}
JQuery:
$(document).ready(function(){
$('.newlevel li').hover(function(){
if ($(this).children('ul').length > 0){
$(this).addClass('current');
}
},function(){
$(this).removeClass('current');
});
});
jsfiddle: http://jsfiddle.net/esf90kz5/3/
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