.menu li {
float: left;
color: #fff;
font-weight: bold;
}
.menu li a {
display: block;
height: 20px;
min-width: 110px;
text-decoration: none;
border-radius: 3px;
padding: 4px;
padding-left: 6px;
padding-right: 6px;
margin-left: 25px;
margin-right: 25px;
}
.menu li ul {
display: none;
max-width: 110px;
padding: 4px;
margin-left: 25px;
margin-right: 25px;
list-style: none !important;
list-style-image: none !important;
}
.menu li a:hover {
background-color: rgba(0, 88, 153, 0.8);
}
.menu li:hover ul {
display: block;
padding: 0;
margin-top: 9px;
list-style: none !important;
list-style-image: none !important;
}
.menu li:hover ul a {
display: block;
background-color: rgba(0, 88, 153, 0.8);
width: 110px;
border-radius: 3px;
padding-top: 6px;
padding: 4px;
padding-left: 6px;
padding-right: 6px;
text-align: left;
margin: 0;
margin-bottom: 5px;
Above here the code I'm currently using, I want the UL to float above everything, I tried 'fixed' and 'absolute' but then it disappears, I tried to change 'margin-left' to 'inherit' but that didn't work either. I want the UL to float beneath the parent LI.
JSFiddle
You need to position the submenu absolutely after first having positioned the parent li relative
HTML (Corrected) (with thanks to #Malcom for the container
<div class="container">
<div class="menu">
<ul>
<li>Home
</li>
<li>Sub
<ul>
<li>Sub1
</li>
<li>Sub2
</li>
<li>Sub3
</li>
</ul>
</li>
</ul>
</div>
</div>
As you can see, this text moves when you hover 'Sub'
CSS (clipped to relevant parts)
.menu li {
float: left;
color: #fff;
font-weight: bold;
position: relative; /* this */
}
.menu li ul {
position: absolute; /* this */
display: none;
max-width: 110px;
padding: 4px;
margin-left: 25px;
margin-right: 25px;
list-style: none !important;
list-style-image: none !important;
}
JSfiddle Demo
Related
Hey i have my drop down menu here:
https://i.gyazo.com/642cdb023365cd8e7e086d53551fc385.png
I am having trouble getting the drop down text closer together i tried putting padding on content a {} but it doesn't seem to work
I included the html mark up as well along with the other styles I used for my nav bar.
nav {
padding-left: 5px
}
nav .main-nav {
height: 80px;
width: 100%;
margin-top: 64px;
background: url(../images/navHeader.png) no-repeat top;
position: relative
}
nav .main-nav ul {
width: 360px;
height: 80px;
margin-top: 2px;
padding: 0;
list-style-type: none
}
nav .main-nav ul a,
nav .main-nav ul li {
display: inline-block;
width: 115px;
line-height: 80px;
height: 80px
}
nav .main-nav ul a {
text-align: center;
font-weight: 750;
font-size: 15px;
color: #84827d;
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out
}
nav .main-nav ul a:hover {
text-decoration: none;
color: #7289da
}
nav .main-nav li .dropdown {
}
nav .main-nav .dropdown-content {
position: absolute;
display: none;
float: left;
z-index: 10;
-webkit-box-shadow: 0 3px 5px 0 #999;
-moz-box-shadow: 0 3px 5px 0 #999;
box-shadow: 0 3px 5px 0 #999;
border: 1px solid #CCC;
background: #3A4FC5;
color: #656161;
opacity: .8;
min-width: 10%;
top: 60px;
}
nav .main-nav .dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: center;
}
nav .main-nav .dropdown-content a:hover {
background-color: #3A4FC5
}
nav .main-nav .dropdown:hover .dropdown-content {
display: inline-block;
}
<nav>
<div class="main-nav">
<ul class="left">
<li class="dropdown">Home
<div class="dropdown-content">
Third
Third Link
Third Link 3
</div>
</li>
<li>Gods</li>
<li>Goddesses</li>
</ul>
<div class="play-now"></div>
<ul class="right">
<li>Heroes</li>
<li>Myths</li>
<li>Beasts</li>
</ul>
</div>
</nav>
This was problem with your code:
nav.main-nav ul a,
nav.main-nav ul li {
display: inline-block;
width: 115px;
line-height: 80px;
height: 80px;
}
You set line-height and height to be fixed size.
If you remove heightand set, for example, line-height: 2em; it should be much better.
nav.main-nav ul a,
nav.main-nav ul li {
display: inline-block;
width: 115px;
line-height: 2em;
}
Change height and line-height in tis rule:
nav .main-nav ul a,
nav .main-nav ul li {
display: inline-block;
width: 115px;
line-height: 8px;
height: 80px
}
That will solve your problem - I changed it to 30 px in the snippet below:
nav {
padding-left: 5px
}
nav .main-nav {
height: 80px;
width: 100%;
margin-top: 64px;
background: url(../images/navHeader.png) no-repeat top;
position: relative
}
nav .main-nav ul {
width: 360px;
height: 80px;
margin-top: 2px;
padding: 0;
list-style-type: none
}
nav .main-nav ul a,
nav .main-nav ul li {
display: inline-block;
width: 115px;
line-height: 30px;
height: 30px
}
nav .main-nav ul a {
text-align: center;
font-weight: 750;
font-size: 15px;
color: #84827d;
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out
}
nav .main-nav ul a:hover {
text-decoration: none;
color: #7289da
}
nav .main-nav li .dropdown {}
nav .main-nav .dropdown-content {
position: absolute;
display: none;
float: left;
z-index: 10;
-webkit-box-shadow: 0 3px 5px 0 #999;
-moz-box-shadow: 0 3px 5px 0 #999;
box-shadow: 0 3px 5px 0 #999;
border: 1px solid #CCC;
background: #3A4FC5;
color: #656161;
opacity: .8;
min-width: 10%;
top: 60px;
}
nav .main-nav .dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: center;
}
nav .main-nav .dropdown-content a:hover {
background-color: #3A4FC5
}
nav .main-nav .dropdown:hover .dropdown-content {
display: inline-block;
}
<nav>
<div class="main-nav">
<ul class="left">
<li class="dropdown">Home
<div class="dropdown-content">
Third
Third Link
Third Link 3
</div>
</li>
<li>Gods</li>
<li>Goddesses</li>
</ul>
<div class="play-now"></div>
<ul class="right">
<li>Heroes</li>
<li>Myths</li>
<li>Beasts</li>
</ul>
</div>
</nav>
Your dropdown anchors inherit properties from the following rule:
nav .main-nav ul a,
nav .main-nav ul li {
display: inline-block;
width: 115px;
line-height: 80px;
height: 80px
}
You can provide a more specific rule below like this:
nav .main-nav .dropdown-content a {
/* Set your height and line-height to whatever you want it to be to make the space between your items smaller */
height: 40px;
line-height: 40px
}
An easier way to manage this however would be set the height and line-height to their initial values and use padding:
nav .main-nav .dropdown-content a {
height: auto;
line-height: initial;
padding: 5px 0;
}
I've made this navigation with CSS and now I'm trying to make it responsive using media queries, but I can't get the submenus to show properly. In responsive mode, I'd like to display the full menu with all links neatly underneath each other in one box. Would really appreciate some help!
https://jsfiddle.net/4L8ghza0/1/
HTML:
<header>
<div class="nav">
<ul>
<li>Start</li>
<li>Submenu1 <span class="arrow">▼</span>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</li>
<li>Service</li>
<li>Events</li>
<li>Submenu2 <span class="arrow">▼</span>
<ul>
<li>link4</li>
<li>link5</li>
<li>link6</li>
</ul>
</li>
</ul>
</div>
</header>
CSS:
header {
top: 0px;
background-color: #EFE7D2;
position: fixed !important;
width: 100%;
height: 125px;
z-index: 10;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 2px 10px 0 rgba(0,0,0,0.12);
}
.nav {
float: right;
padding: 40px 80px 0 0;
}
ul {
list-style-type: none;
}
ul li {
font-family: Arial, sans-serif;
font-size: 95%;
text-transform: uppercase;
display: inline-block;
position: relative;
float: left;
margin: 5px;
}
ul li a {
padding: 8px 10px;
display: block;
text-decoration: none;
color: #000000;
}
ul li:hover{
background: #CCB18E;
}
.nav .arrow {
font-size: 70%;
line-height: 0%;
}
ul li ul {
display: none;
position: absolute;
width: 210%;
padding: 0;
}
ul li ul li {
display: block;
text-decoration: none;
background: #CCB18E;
padding: 0px 10px;
margin: 0;
width: 100%;
}
ul li ul li:hover {
display: block;
background: #DAC7AD;
text-decoration: none;
padding: 0px 10px;
margin: 0;
width: 100%;
}
ul li:hover ul{
display:block;
visibility:visible;
}
ul ul li:hover li{
display:block;
}
.current {
background:#CCB18E;
color: #000000;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(https://cdn0.iconfinder.com/data/icons/social-messaging-productivity-4/128/menu-2-512.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
#media screen and (max-width: 1080px){
#menu-icon {
display: inline-block;
}
ul li ul li a {
display: block;
}
ul, ul:active {
display: none;
z-index: 1000;
position: absolute;
padding: 10px;
background: #EFE7D2;
right: 100px;
top: 60px;
width: 25%;
border: 1px #5F7B65 solid;
}
.nav:hover ul {
display: block;
}
ul li:hover ul li ul li {
display: none;
}
}
#JD26 I find it easier using flex-box. You can set .nav {display: flex; flex-direction:column;} in your media query. This should get you started. Or with block display: .nav {display: block}.
I'm trying to align the dropdown menu when I hover over get started, but it doesn't work.
I tried adding the code left:auto; right:0; margin-right:-10px; to my CSS (as you'll see below) but it did nothing.
How do I fix this or add another code to make my menu aligned?
Is there a certain CSS trick to solve this?
nav ul {
background: url(transparent.png);
width: 100%;
height: 52px;
text-align: center;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
}
nav ul li a {
text-decoration: none;
color: #fff;
letter-spacing: 0.2em;
font: normal 100% arial, sans-serif;
text-align: center;
display: inline-block;
margin: 10px 0 0 10px;
padding: 9px 26px 9px 26px;
text-transform: uppercase;
}
nav ul li a:hover {
color: #000;
background-color: #fff;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
background: #f9f9f9;
min-width: 160px;
position: absolute;
display: none;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background: #bada55;
left: auto;
right: 0;
margin-right: -10px;
}
.dropdown:hover .dropdown-content {
display: block;
}
<header>
<h1>Model United Nations Conference</h1>
<img src="dove.png" alt="a simple dove logo">
<nav>
<ul>
<li>Home</li>
<li class="dropdown"><a id="start" href="#">Get started</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li>Gallery</li>
<li>Contact Us</li>
<li>Forum</li>
</ul>
</nav>
</header>
You should go with this:
left: 50%;
transform: translateX(-50%);
also, take a look at my comments in your CSS
nav ul {
background: transparent;
width: 100%;
height: 52px;
text-align: center;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
}
nav ul li a {
text-decoration: none;
color: #DDD;
letter-spacing: 0.2em;
font: normal 100% arial, sans-serif;
text-align: center;
display: inline-block;
/*
margin: 10px 0 0 10px;
Use Equal margins: */
margin: 5px;
padding: 9px 26px 9px 26px;
text-transform: uppercase;
}
nav ul li a:hover {
color: #000;
background-color: #fff;
}
.dropdown {
display: inline-block;
/* important: */
position: relative;
}
.dropdown-content {
background: #f9f9f9;
min-width: 160px;
position: absolute;
display: none;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
/* Position */
left: 50%;
transform: translateX(-50%);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background: #bada55;
}
.dropdown:hover .dropdown-content {
display: block;
}
<header>
<h1>Model United Nations Conference</h1>
<img src="dove.png" alt="a simple dove logo">
<nav>
<ul>
<li>Home</li>
<li class="dropdown"><a id="start" href="#">Get started</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li>Gallery</li>
<li>Contact Us</li>
<li>Forum</li>
</ul>
</nav>
</header>
For nav ul li a
I set this margin: 10px 0 0 0px;
This would align the "Get Started" header with the drop down values Aligned Dropdown Img
Is this how you wanted ?
nav ul {
background: url(transparent.png);
width: 100%;
height: 52px;
text-align: center;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
position:relative
}
nav ul li >a {margin: 10px 0 0 10px;}
nav ul li a {
text-decoration: none;
color: #000;
letter-spacing: 0.2em;
font: normal 100% arial, sans-serif;
text-align: center;
display: inline-block;
padding: 9px 26px 9px 26px;
text-transform: uppercase;
}
nav ul li:hover a{
color: #000;
background-color: #fff;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
background: #f9f9f9;
min-width: 160px;
position: absolute;
display: none;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
left: 10px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background: #bada55;
left: auto;
right: 0;
}
.dropdown:hover .dropdown-content {
display: block;
}
<header>
<h1>Model United Nations Conference</h1>
<img src="dove.png" alt="a simple dove logo">
<nav>
<ul>
<li>Home</li>
<li class="dropdown"><a id="start" href="#">Get started</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li>Gallery</li>
<li>Contact Us</li>
<li>Forum</li>
</ul>
</nav>
</header>
This is my JSFIDDLE DEMO
Hover works fine, but I want to show the sub menu when i click on an option locks the submenu and then if hover on the main menu, display sub menu options but to stay on the other,
any help?
<div id="cssmenu">
<div class="divul">
<ul>
<li class="has-sub">
<a>Buscador</a>
<ul>
<li><a>Busqueda Datos</a></li>
<li><a>Estadisticas</a></li>
</ul>
</li>
<li class="has-sub">
<a>Clientes</a>
<ul>
<li><a>Buscador Clientes</a></li>
<li><a>Nuevo Cliente</a></li>
</ul>
</li>
<li class="has-sub">
<a>Incidencias</a>
<ul>
<li><a>Nuevo Incidencia</a></li>
<li><a>Buscador Incidencias</a></li>
</ul>
</li>
</ul>
</div>
#cssmenu{
border-bottom: 1px solid #278204;
margin-top: 10px;
}
#cssSubmenu{
background-color: #CCCCCC;
height: 30px;
/*margin-top: 10px;*/
}
#cssmenu ul{
height: 21px;
display: inline-block;
background-color: #278204;
margin-left: 15px;
padding-top: 5px;
}
.divul{
background:
url(/CI_Gestion_incidencias/images/menuL.png) left no-repeat,
url(/CI_Gestion_incidencias/images/menuR.png) right no-repeat;
display: inline-block;
padding-right: 29px;
margin-left: -3px;
}
#cssmenu ul li
{
height: 30px;
color: #FFF;
list-style: none;
display: inline;
padding-right: 20px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 4px;
z-index: 1000;
}
/**
**/
/*#cssmenu li a {
color: #666666;
display: block;
font-weight: bold;
line-height: 30px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}
*/
#cssmenu li:hover {
background: #CCCCCC;
color: #000;
text-decoration: none;
}
#cssmenu li ul {
background: #CCCCCC;
display: none;
height: 25px;
filter: alpha(opacity=95);
opacity: 0.95;
position: absolute;
z-index: 200;
margin-left: 0px;
margin-top: 2px;
width: 100%;
}
#cssmenu li:hover > ul {
display: block;
}
#cssmenu li li {
display: block;
color: #000;
display: inline;
/* float: none;
padding: 0px;
position: relative;*/
}
#cssmenu li li:active {
display: block;
color: #000;
display: inline;
}
#cssmenu li ul a {
color: #000;
display: inline;
font-size: 12px;
font-weight: bold;
text-align: left;
text-decoration: none;
}
If you want show on click then use jquery.
You can try below code:
Demo
$('.has-sub a').click(function(){
$('.has-sub ul').hide();
$(this).next().show();
});
You can use tabindex="0" in HTMl and :focus in CSS together: DEMO
<li class="has-sub" tabindex="0">
#cssmenu li:hover > ul,
#cssmenu li:focus > ul{
display: block;
}
SEE LIVE MENU HERE.
I am trying to figure out why the drop-down disappears after you attempt to rollover it. Can someone see the problem in my code? Thank you.
HERE IS MY HTML MENU
<div id="menu">
<ul>
<li><span>Needs Assessment</span> </li>
<li><span>Knowledge Acquisition</span>
<ul>
<li>Administer Knowledge<br>Pre-Test</li>
<li>Assign Asthma<br>Article </li>
<li>Administer Knowledge<br>Post-Test</li>
<li>Discuss Asthma<br>Case Study</li>
</ul>
</li>
<li><span>Skills Proficiency</span> </li>
<li><span>Simulation in Teams</span>
<ul>
<li>Perform Asthma<br>Simulation</li>
<li>Facilitate<br>Debriefing</li>
</ul>
</li>
<li><span>Performance</span></li>
<li><span>Resources</span></li>
</ul>
</div>
HERE IS MY CSS
#menu {
position: relative;
top: 10px;
left: 0px;
width: 940px;
height: 47px;
}
#menu ul {
position: relative;
top: -15px;
left: 0px;
margin-left: 0px;
padding-left: 0px;
list-style: none;
}
#menu ul li {
position: relative;
display: inline;
float: left;
list-style: none;
margin-right: 0px;
border: solid 0px #4981a8;
width: 156px;
background-image: url ('http://www.laerdal.com/Laerdal/usa/discoversimulation/images/button.png');
background-repeat: no-repeat;
}
#menu ul li a {
display: block;
width: 156px;
padding: 12px 0px 10px 0px;
border: solid 0px #fff;
font-family: 'Cabin', sans-serif;
font-size: 14px;
font-weight: lighter;
text-align: center;
text-decoration: none;
}
#menu a span {
float: left;
display: block;
padding: 3px 5px 4px 6px;
color:#fff;
float: none;
}
#menu a:hover span {
color:#ffdd00;
}
#menu li ul {
position: absolute;
top: 47px;
left: 0px;
background-color:#4981a8;
border: solid 1px #4981a8;
display: none;
}
#menu li:hover ul {
display: block;
z-index: 999;
}
#menu li li a {
font-family: 'Cabin', sans-serif;
font-size: 14px;
color: #000;
font-weight: lighter;
height: 38px;
background-color:#eee;
margin-bottom: -9px;
}
#menu li li a:hover {
color: #065389;
}
You have another element on your page that's partially covering up the navigation:
#textbox {
position: relative;
top: -30px;
}
This is blocking the :hover. To solve this, give your #header a z-index:1. Any positive value should work, you just need to set it to something so the element stays on top.