All my li elements allying at the same spot on on top of the other even tho they are supposed to use the display block.
The nav bar simply displays the sub-menu under the regular menu, but all the ul,li are on top of each other.
<ul class="navbar">
<li class="left">Scripts
<ul>
<li>
test1
</li>
<li>
test2
</li>
<li>
test3dfgdsfgdfsg
</li>
<li>
test523542352543253q4teargt
</li>
</ul>
</li>
Yes i know the code is very messy
ul.navbar {
list-style: none;
bottom: -30px;
padding: 0;
}
ul.navbar li.right {
float: right;
line-height: 14px;
display: block;
}
ul.navbar li.left {
float: left;
line-height: 14px;
display: block;
}
ul.navbar li a {
display: block;
color: #FFF;
font-size: 20px;
line-height: 14px;
text-decoration: none;
background: #3366CC;
margin: -30px 0 0 0;
padding: 10px 25px;
}
ul.navbar li ul {
list-style-type: none;
}
ul.navbar li a:hover {
background: #4075DE
}
ul.navbar li ul li a {
display: none;
color: #FFF;
font-size: 20px;
position: absolute;
margin:0px;
}
ul.navbar li:hover ul a{
display: block;
margin-left:-40px;
}
Remove position: absolute on the a{}
http://jsfiddle.net/v1kq7dva/
ul.navbar {
list-style: none;
bottom: -30px;
padding: 0;
}
ul.navbar li.right {
float: right;
line-height: 14px;
display: block;
}
ul.navbar li.left {
float: left;
line-height: 14px;
display: block;
}
ul.navbar li a {
display: block;
color: #FFF;
font-size: 20px;
line-height: 14px;
text-decoration: none;
background: #3366CC;
margin: -30px 0 0 0;
padding: 10px 25px;
}
ul.navbar li ul {
list-style-type: none;
}
ul.navbar li a:hover {
background: #4075DE
}
ul.navbar li ul li a {
display: none;
color: #FFF;
font-size: 20px;
position: absolute;
margin:0px;
}
ul.navbar li:hover ul a{
display: block;
margin-left:-40px;
}
Position absolute places the element at 0,0 in it's container, so if you put it on something then don't specify the location, everything ends up on top of eachother.
Related
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}.
Working on a website (inherited someone else's code) and I'm trying to make a dropdown menu. The dropdown appears correctly when I hover over the item, but as soon as I mouse down to the dropdown list items, they disappear. Can someone help me figure out what's wrong here?
#nav {
position:fixed;
top: -1em;
background: #000;
font-family: 'Abel', sans-serif;
font-size: 1.25em;
letter-spacing: 0.05em;
width:100%;
text-align:right;
padding: 1.25em;
z-index: 3;
}
#nav li {
list-style-type: none;
display: inline-block;
margin: 0em 0.25em;
color: #90918F;
}
#nav li a {
text-decoration: none;
display: inline-block;
padding: 0em 0.5em;
margin: 0;
color: #90918F;
}
#nav li a:hover {
text-decoration: none;
color: #90918F;
}
#nav li a.active {
text-decoration: none;
color: #90918F;
}
#nav li.space {
padding: 2em;
}
ul {
padding: 0.05em;
}
#nav ul {
z-index: 3;
margin-top: 0;
background: #000;
display: none;
position: absolute;
top: 72px;
right: 450px;
}
#nav ul li {
display: block;
padding: 0.75em;
text-align: left;
}
#nav li:hover > ul {
display: block;
}
#nav li > ul:hover {
position: absolute !important;
}
#nav ul li:after {
position: absolute;
left: 5%;
top: -20px;
width: 0;
height: 0;
content: '';
}
<ul id="nav">
<div id="logo">
<img src="images/logo.png" class="logo">
</div>
<li>ABOUT
<ul class="dropdown">
<li>Values</li>
<li>Our Team</li>
</ul>
</li>
<li>SERVICES</li>
<li>CLIENTS</li>
<li>STUDENTS</li>
<li>CONTACT</li>
</ul>
I want to set my drop down menu in the middle of my page. I could make it both left aligned or centered, but now it is not working anymore.
#navigation {
margin-top: -50;
background: #000;
height: 3em;
list-style: none;
position: center;
color: #fff;
font-family: Arial;
font-size: 14px;
z-index: +1;
}
#navigation > li {
position: relative;
left:15%;
display: inline;
height: 100%;
margin-right: 0.5em;
padding: 0 1cm 0 1cm;
z-index: 2;
}
#navigation > li > a {
position: relative;
left:15%;
display: inline;
height: 100%;
color: #c60;
text-decoration: none;
line-height: 3;
font-weight: bold;
text-transform: uppercase;
z-index: 2;
}
#navigation > li > a:hover {
color: orange;
text-decoration: underline;
display: inline;
}
#navigation > li.sub {
position: relative;
display: inline;
}
#navigation > li.sub ul {
width: 10em;
margin: 0;
padding: 0.5em 0;
list-style: none;
background: #a40;
position: absolute;
left:50%;
display: inline;
top: -1000em;
z-index: +2;
}
#navigation > li.sub ul li {
width: 90%;
margin: 0 auto 0.3em auto;
display: inline;
z-index: +2;
}
#navigation > li.sub ul li a {
height: 100%;
display: block;
padding: 0.4em;
color: #fff;
font-weight: bold;
text-decoration: none;
}
#navigation > li.sub ul li a:hover {
background: #c60;
text-decoration: underline;
display: inline;
}
#navigation > li.sub:hover ul {
top: 3em;
z-index: +2;
}
This code used to make the menu centered but it's not working anymore.
Since you haven't provided a snippet of the HTML code for your navigation dropdown, I went ahead and did some detective work to figure it out. So given that the HTML structure is something like this:
<ul id="navigation">
<li class="sub">
<a>option</a>
<ul>
<li><a>sub-option</a></li>
<li><a>sub-option</a></li>
</ul>
</li>
<li class="sub">
<a>option</a>
<ul>
<li><a>sub-option</a></li>
<li><a>sub-option</a></li>
</ul>
</li>
<li>
<a>lonely option</a>
</li>
</ul>
I noticed that there were a few problems in your CSS, I've added comments below to discuss these. So this is your current CSS:
#navigation {
margin-top: -50; /* <-- missing measurement unit, px? em? */
background: #000;
height: 3em;
list-style: none;
position: center; /* <-- no such thing as 'center' */
color: #fff;
font-family: Arial;
font-size: 14px;
z-index: +1; /* <-- not a big deal but you can leave out the plus for positive integers. */
}
#navigation > li {
position: relative;
left:15%; /* <-- this one ... */
display: inline;
height: 100%;
margin-right: 0.5em;
padding: 0 1cm 0 1cm;
z-index: 2;
}
#navigation > li > a {
position: relative;
left:15%; /* <-- ... and this were the ones causing you grief */
display: inline;
height: 100%;
color: #c60;
text-decoration: none;
line-height: 3;
font-weight: bold;
text-transform: uppercase;
z-index: 2;
}
#navigation > li > a:hover {
color: orange;
text-decoration: underline;
display: inline;
}
#navigation > li.sub {
position: relative;
display: inline;
}
#navigation > li.sub ul {
width: 10em;
margin: 0;
padding: 0.5em 0;
list-style: none;
background: #a40;
position: absolute;
left:50%;
display: inline;
top: -1000em;
z-index: +2;
}
#navigation > li.sub ul li {
width: 90%;
margin: 0 auto 0.3em auto;
display: inline;
z-index: +2;
}
#navigation > li.sub ul li a {
height: 100%;
display: block;
padding: 0.4em;
color: #fff;
font-weight: bold;
text-decoration: none;
}
#navigation > li.sub ul li a:hover {
background: #c60;
text-decoration: underline;
display: inline;
}
#navigation > li.sub:hover ul {
top: 3em;
z-index: +2;
}
This is the current state of the navigation dropdown. Before I could solve your issue, I had to fix the following problems:
Removed the rule position: center; from #navigation {} as it is
not a valid rule and wasn't doing anything
Removed the rule left: 15% from #navigation > li {} and #navigation > li > a. Using these two rules to try and center was not only not truly centering the dropdown but causing it to break as well.
Removed the rule margin-top: -50; as it was not doing anything
Changed display: inline; to display: inline-block; in #navigation > li {}. This way height: 100%; would make the height of the li element the same height as the navigation bar.
Now with all that out of the way - all you need to do is, instead of using position: center you need to use text-align: center in #navigation {}. That will center your navigation.
Finally, here is the updated and working navigation dropdown demo and code.
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;
}
So I'm working on a drop menu and I'd like each menu item to have an auto width. i.e. the background to expand to the width of the menu item rather than having an overall fixed width for all the UL. I thought that giving the ul li an auto width would sort it but it seems not. What am I missing?
<ul id="nav">
<li><a class="last" href="#">MENU ▼</a>
<ul>
<li>Short</li>
<li>Very Long</li>
</ul>
</li>
#nav {
height: 1;
list-style-type: none;
padding-top: 1.25em;
margin-top: 0em;
}
#nav li {
float: right;
position: relative; padding: 0;
}
#nav li a {
display: block;
font-size: 14px;
padding: 0 1em;
margin-bottom: 1em;
color: #333;
text-decoration: none;
border-left: 1px solid #333;
}
#nav .last, #nav li ul li a {
border-left: none;
}
#nav li a:hover, #nav li a:focus {
color: #666;
}
#nav li ul {
opacity: 0;
position: absolute;
right: 0em;
list-style-type: none;
padding: 0; margin: 0;
}
#nav li:hover ul {
opacity: 1;
}
#nav li ul li {
float: none;
position: static;
width: auto;
height: 0;
line-height: 0;
background: none;
text-align: right;
margin-bottom: .75em;
}
#nav li:hover ul li {
height: 25px;
line-height: 2.5em;
}
#nav li ul li a {
background: #222;
}
#nav li ul li a:hover {
color: #666;
}
Your #nav li style is being applied to all child li elements, so you need to use the ">", which selects only the immediate child.
Here is updated CSS which fixes the problem. I also commented out some other CSS that was interfering:
#nav {
height: 1;
list-style-type: none;
padding-top: 1.25em;
margin-top: 0em;
}
#nav > li { /* Added ">" */
float: right;
position: relative;
padding: 0;
}
#nav li a {
display: inline-block; /* was block */
font-size: 14px;
padding: 0 1em;
margin-bottom: 1em;
color: #333;
text-decoration: none;
border-left: 1px solid #333;
}
#nav .last, #nav li ul li a {
border-left: none;
}
#nav li a:hover, #nav li a:focus {
color: #666;
}
#nav li ul {
opacity: 0;
/*position: absolute;
right: 0em; */
list-style-type: none;
padding: 0; margin: 0;
}
#nav li:hover ul {
opacity: 1;
}
#nav li ul li {
/*float: none;
position: static;
width: auto;*/
height: 0;
line-height: 0;
background: none;
text-align: right;
margin-bottom: .75em;
}
#nav li:hover ul li {
height: 25px;
line-height: 2.5em;
}
You are using display: block for your links. That causes them to fill the available space. That's why they are all the same width. And float: right is contributing to the general narrowness. Use inline-block instead of block and prevent the link wrapping by using white-space: nowrap:
Demo: http://jsfiddle.net/neJty/2/