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>
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 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/
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 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