I have the next fiddle: http://jsfiddle.net/cristi_mvp/e8UkN/4/
I want the columns to be displayed next to each other, instead of one over another.
Each column has different widths.
I tried different things but they dont work.
Also I do not want to use css column.
It should be simple, but i just can't find the answer.
Thank you.
Here is the HTML code:
<div class="header-main">
<div class="header-main-menu">
<ul class="menu">
<li> <a href='#' title='Menu 1'> Menu 1</a>
<ul>
<li>Column 1 lenght xxxx</li>
<li>Column 1</li>
<li>Column 1</li>
<li>Column 1</li>
<li>Column 1</li>
<li>Column 1</li>
</ul>
<ul>
<li>Column 2 lenght</li>
<li>Column 2</li>
<li>Column 2</li>
<li>Column 2</li>
</ul>
<ul>
<li>Column 3</li>
<li>Column 3</li>
<li>Column 3</li>
<li>Column 3</li>
<li>Column 3</li>
</ul>
</li>
<li> <a href='#' title='Menu 2'> Menu 2</a>
<ul>
<li>Column 1-2</li>
<li>Column 1-2</li>
<li>Column 1-2</li>
<li>Column 1-2</li>
</ul>
<ul>
<li>Column 2-2</li>
<li>Column 2-2</li>
<li>Column 2-2</li>
</ul>
</li>
</ul>
</div>
</div>
Here is my css:
.header-main-menu .menu {
color: #fff;
float: left;
margin: 0;
}
.header-main-menu .menu li {
display: inline-block;
float: left;
position: relative;
margin: 0;
padding: 0;
}
.header-main-menu .menu li a {
display: block;
color: #00000;
text-decoration: none;
font-size: 15px;
line-height: 15px;
height: 20px;
padding: 10px 24px 6px 10px;
display: block;
}
.header-main-menu .menu ul {
background-color:rgba(0, 0, 0, 0.9);
position: absolute;
left: -9999px;
/* Hide off-screen when not needed (this is more accessible than display:none;) */
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
z-index: 5000;
}
.header-main-menu .menu ul li {
/*padding-top: 1px;*/
/* Introducing a padding between the li and the a give the illusion spaced items */
float: none;
background-image: none;
display: block;
min-width: 120px;
}
.header-main-menu .menu ul a {
white-space: nowrap;
/* Stop text wrapping and creating multi-line dropdown items */
display: block;
font-size: 13px;
line-height: 13px;
padding: 6px 24px 2px 14px;
}
.header-main-menu .menu li:hover ul {
/* Display the dropdown on hover */
left: 0;
/* Bring back on-screen when needed */
fload:left;
}
.header-main-menu .menu li:hover a {
/* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
}
.header-main-menu .menu li:hover ul a {
/* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration: none;
background: none;
}
.header-main-menu .menu li:hover ul li a:hover {
/* Here we define the most explicit hover states--what happens when you hover each individual link. */
background: #FF0000;
}
.header-main-menu .menu li a:hover {
background-color: #000;
}
.header-main-menu .menu li:hover {
background: #000;
}
.header-main-menu .menu ul li:hover {
background: none;
}
Please add padding: 0 to your code. Like this:
.header-main-menu .menu ul {
color: #fff;
float: left;
margin: 0;
padding: 0;
}
.menu
{
display:block;
}
ul
{
list-style-type:none;
}
ul li
{
float:left;
width:80px;
padding:10px;
background-color:#003366;
color:white;
text-align:center;
}
a
{
color:white;
text-decoration:none;
}
ul li ul
{
display:none;
}
ul li:hover ul
{
display:block;
margin-left:-50px;
}
fiddle
Related
I'm trying to create a nested dropdown menu that may potentially be very long and overflow off the page.
What I'd like to do is, when the menu is too long it will display a scroll bar. I'm doing this with overflow: auto. However, when I do this, it traps any submenus within the same 'scroll space' as defined by the first scroll bar.
I've also tried various iterations of overflow: none with the :not(:hover) selector, but nothing I've tried seems to work.
What I'd like it to do is show the scrollbar on each level, only if necessary (i.e. that submenu would scroll off the page). Each submenu should 'pop' out of the previous scroll bar, if any, as if it was not there.
I'd like to do this in all CSS, but I'm open to a JS solution as well.
I have a code pen showing the issue here:
https://codepen.io/mcmurphy510/pen/ZyGLKd
I'm not sure if I'm understanding your question correctly, but try isolating your desired element by using ID or CLASS. See the third level menu.
#primary_nav_wrap {
margin-top: 15px
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
}
#primary_nav_wrap ul a {
display: block;
color: #333;
text-decoration: none;
font-weight: 700;
font-size: 12px;
line-height: 32px;
padding: 0 15px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0;
}
#primary_nav_wrap ul li.current-menu-item {
background: #ddd
}
#primary_nav_wrap ul li:hover {
background: #f6f6f6
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0;
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover > ul {
display: block;
height: 200px;
}
#primary_nav_wrap ul li ul li:not(:hover) {
}
/* ul li ul li ul li {
overflow: auto;
} */
#subdeep {
overflow: auto;
height: 50px !important;
}
<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul id="subdeep">
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
</ul>
</nav>
Probably you could use the proposed solution as the elements are positioned relative to each other and therefore the menu can set up some branches, you would "just" require to ensure that the parent element(s) remain visible
Mouse over on item "Link 3" will shows its sub-menu on the right side of it and then mouse over on "Link 31" for further sub menu.
.menu {
position: relative;
}
ul {
width: 200px;
margin: 0;
color: black;
list-style:none;
padding:0;
max-height:100px;
overflow-x: hidden;
overflow-y: auto;
}
li {
padding:0.5em;
}
li:hover{
background-color:blue;
color:white;
}
li .menu {
position: absolute;
z-index: 10;
background-color:lightgrey;
opacity: 0;
transition: opacity 0.5s;
}
li:hover > .menu,
.menu:hover {
opacity: 1;
}
li.parent {
cursor: pointer;
}
.level2 {
top: 0px;
left: 200px;
}
<div class="menu">
<ul>
<li>Link1</li>
<li class="parent">Link3...
<div class="menu level2">
<ul>
<li class="parent">Link31...
<div class="menu level2">
<ul>
<li>Link 311</li>
<li>Link 312</li>
<li>Link 313</li>
<li>Link 314</li>
</ul>
</div>
</li>
<li>Link 32</li>
<li>Link 33</li>
<li>Link 34</li>
</ul>
</div>
</li>
<li>Link2</li>
<li>Link1</li>
<li>Link2</li>
</ul>
</div>
I am trying to create a navigation bar that contains 4 menus and 1 sub menu for the first menu, however, I can not create the sub menu. This is my code so far and I'm not sure how to make the sub menu appear when I hover or even click on the first menu. Thanks.
<!DOCTYPE html>
<html>
<head>
<title> Website </title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<nav>
<ul>
<li><a class="#" href="#">Menu 1</a></li>
<ul>
<li>Submenu 1</li>
</ul>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
</body>
</html>
And here is my CSS
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #111111;
border: solid 1px black;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav ul li a:hover {
background-color: #ee8601;
}
.active {
background-color: #ee8601;
}
HTML error: ul is not a valid descendant of ul (should be inside the li)
CSS: set li to position:relative; in order to contain the position of the inner Sub-UL
CSS (missing part): set the Sub ul to position:absolute; and display:none;
CSS (missing part): On li:hover > display:block; it's child ul element.
Example 1:
Reveal Submenu using display: none/block
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
/*overflow: hidden;*/
background-color: #111;
/*border: solid 1px black;*/
}
nav ul li {
/*float: left;*/
display:inline-block; /*add istead of "float:left;" */
vertical-align:top; /*add*/
position:relative; /*add to contain sub ul*/
}
nav a {
display: block;
color: white;
text-align: center;
white-space:nowrap; /*add*/
padding: 14px 16px;
text-decoration: none;
}
nav li:hover > a, /* target the LI:hover, than change styles to A */
nav a.active{ /* merge together */
background-color: #ee8601;
}
/* HIDE sub ul */
nav li ul{
position:absolute;
display:none;
}
/* SHOW sub ul */
nav li:hover ul{
display:block;
}
<nav>
<ul>
<li>
<a class="#" href="#">Menu 1</a>
<ul>
<li>Submenu 1</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
The above was using display none/block, now instead let's see how to make it more fresh adding some animations:
Example 2:
Reveal Submenu using visibility, opacity, transition and transform
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #111;
}
nav ul li {
display:inline-block;
vertical-align:top;
position:relative;
}
nav a {
display: block;
color: white;
text-align: center;
white-space:nowrap;
padding: 14px 16px;
text-decoration: none;
}
nav li:hover > a,
nav a.active{
background-color: #ee8601;
}
nav li ul{ /* HIDE sub ul */
position:absolute;
visibility:hidden;
opacity:0;
transition:0.2s;
transform: translateY(20%);
}
nav li:hover ul{ /* SHOW sub ul */
visibility: visible;
opacity:1;
transform: translateY(0%);
}
<nav>
<ul>
<li>
<a class="#" href="#">Menu 1</a>
<ul>
<li>Submenu 1</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
You can do something like this:
Hide the submenu and then show it when it's parent li is hovered.
nav ul li ul {
display:none;
}
nav ul li:hover ul {
display:block;
}
But you'll need to put the submenu ul inside of the li like this:
<li><a class="#" href="#">Menu 1</a>
<ul>
<li>Submenu 1</li>
</ul>
</li>
Here's a working example: http://codepen.io/caleboleary/pen/eJOdQb
I'm trying to add a "sub menu" to a drop down menu. Say I wanted to add a sub menu to Item 3 (see html), how would I go about doing that?
Thanks,
Here's my CSS:
.nav_menu {
width:100%;
background-color:#EFEFEF;
z-index:2000;
border:1px solid #ccc;
}
.selected {
background-color:#ccc;
color:#333;
}
.nav_menu a:link {
color:#007dc1;
}
.nav_menu a:visited {
color:#007dc1;
}
.nav_menu a:hover {
color:#007dc1;
}
.nav_menu ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
.nav_menu ul li {
font-size:16px;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 8px 22px;
font-weight:600;
transition: all 50ms linear;
transition-delay: 0s;
}
.nav_menu ul li ul {
padding: 0;
position: absolute;
top: 37px;
left: 0;
width: 230px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
display: block;
opacity: 0;
-webkit-transition: opacity .2s;
z-index:50000;
}
.nav_menu ul li ul li {
background-color:#535353;
border-top:1px solid #fff;
display: block;
font-size:12px;
color:#fff;
}
.nav_menu ul li ul li:hover {
background: #B2B2B2;
}
.nav_menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Here's my HTML:
<ul>
<li>All Items
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3 with Sub Menu</li>
</ul>
</li>
</ul>
Firstly, since your menu is based simply on the CSS :hover pseudo-class, make sure that your ul and li elements do not have any space between them, because this will lead to the entire menu dissapearing.
The HTML code
<div class='nav_menu'>
<ul>
<li>All Items
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class='nav_menu_sub'>Item 3 with Sub Menu
<ul>
<li>SubItem 3.1</li>
<li>SubItem 3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Just like the drop down that you already provided, simply adding a ul element within the li element should suffice to create the sub menu. I added a nav_menu_sub class to the li that opens the sub menu making it easier to select via CSS (avoiding .nav_menu ul li ul li).
The CSS code
.nav_menu_sub {
padding:0;
margin:0;
}
.nav_menu_sub ul {
margin-top:-7px;
display: none !important;
}
.nav_menu_sub:hover ul {
display: block !important;
opacity: 1;
visibility: visible;
}
The margin-top:-7px on the ul element was added to ensure that it fits nicely up against the li.
Add the !important to the display attribute to get it overwrite the previously declared styling.
Working jsFiddle: http://jsfiddle.net/akhrbkug/
Judging from the css you posted:
.nav_menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
It looks like you have to add another ul in the submenu li:
<ul>
<li class='nav-menu'>All Items
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3 with Sub Menu
<ul>
<li>SubItem 3.1</li>
<li>SubItem 3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
Fiddle for the demo
http://jsfiddle.net/ee9ebv2s/
Im trying to do a sub-sub menu in a webpage. I tried following the help in this post: how do I make a sub sub menu with css? but to be honest i didnt understand what code i had to add in each class and when i tried it didnt show anything. Here is the code of the menu:
<div class="l7menu">
<ul class="dpdown">
<li class="mainlist">Hombres
<ul class="sub_menu">
Prueba
Here goes the sub-submenu
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>
</ul>
</li>
</ul>
</div>
Also the CSS of the classes are these ones (The sub_menu and l7menu class dont have any style applied):
.mainlist {
border-bottom: 2px solid #EAD704;
background: none;
margin-left: 2px !important;
}
.mainlist:hover {
color: #EAD704 !important;
}
ul.dpdown {
float: right;
position: relative;
z-index: 1000;
}
ul.dpdown li {
font-weight: bold;
float: left;
zoom: 1;
display: inline;
line-height: 20px;
list-style: none outside none;
margin-left: -25px;
}
ul.dpdown a:hover {
color: #EAD704;
}
ul.dpdown a:active {
color: #FFFFFF;
}
ul.dpdown li a {
color: #e8e8e8;
display: block;
padding-bottom: 4px;
text-align: center;
width: 150px;
}
ul.dpdown li:last-child a {
border-right: none;
} /* Doesn't work in IE */
ul.dpdown li.hover, ul.dpdown li:hover {
color: black;
position: relative;
}
ul.dpdown li.hover a {
color: white;
}
/*
LEVEL TWO
*/
ul.dpdown ul {
width: 150px;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}
ul.dpdown ul li {
font-weight: normal;
background: #333;
color: #000;
float: none;
}
/* IE 6 & 7 Needs Inline Block */
ul.dpdown ul li a {
background-color: #101010;
border-right: medium none;
display: inline-block;
margin-top: 2px;
padding: 10px 0;
width: 150px;
font-size: 13px;
color: #999999;
}
ul.dpdown ul li a:hover {
background-color: #222222;
}
/*
LEVEL THREE
*/
ul.dpdown ul ul {
left: 100%;
top: 0;
}
ul.dpdown li:hover > ul {
visibility: visible;
}
As always thank you very very much !
Here's a FIDDLE, I fixed your CSS a little.
Your HTML should look like this
<div class="l7menu">
<ul class="dpdown">
<li class="mainlist">Hombres
<ul class="sub_menu">
<li>Prueba</li>
<li>Here goes the sub-submenu
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
Here's a Codepen link that displays what I have so far:
http://codepen.io/alih/pen/xijbm
Edited: Here's a new Codepen link, with the nested divs replaced with list items & uls. I welcome suggestions for how to do this without extraneous mark-up, but my major concern remains how to center the Drop-down panel against the borders reaching up to the menu above it.
http://codepen.io/alih/pen/KzsAc
I am building a drop-down menu with the following features:
Multiple levels, but only one level of drop-down. Child lists will be displayed inline immediately beneath their parent elements.
The parent level of the menu will be list items of variable width
The drop-down lists will have a background on them that is always the same width
The drop-down lists will appear to be "connected" to the parent element with "ropes" that connect to the left and right edges of the top level menu items.
And here is the bit I am having trouble with: the background on the drop-down list will be centered against these "ropes". On the Codepen demo, this means that the green & grey panel will be centered against the borders "connecting" the panel to the list item above.
This menu needs to work as far back as IE7, and while I may make flagrant use of extraneous divs to achieve my goal, I may not use JavaScript (which is normally how I would solve this: subtract the width of the parent item from the width of the drop-down and add a negative margin of that amount to the drop-down).
What I want to know is: is there any way this is possible using HTML & CSS alone?
My CSS (Edited):
.other {
float:left
}
ul#topnav,
ul#topnav li,
ul#topnav ul {
list-style: none;
margin: 0;
padding: 0;
}
#topnavblock {
background:grey;
width:100%;
position:relative;
z-index:700;
}
#topnav {
z-index:2;
}
#topnav > li > a {
border-right: 1px solid #999;
}
#topnav li a:hover {
color: #444;
text-shadow: -1px -1px 1px #ffffff;
}
#topnav [class^="current"] {
background: lightyellow;
}
#topnav li a {
color: #893200;
text-decoration: none;
padding: 8px 25px 5px 25px;
text-align: center;
display: block;
text-shadow: 1px 1px 1px #ffffff;
font: bold 14px 'Arvo', serif;
}
#topnav [class^="current"] > a {
color: #FF6600;
}
#topnav [class^="current"] > a:hover {
color: #FF6600;
}
ul#topnav {
position: relative;
z-index: 597;
float: left;
left:20px;
padding: 0;
}
ul#topnav > li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul#topnav > li {
padding:10px 0 14px 0;
}
ul#topnav li.hover,
ul#topnav li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul#topnav ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul#topnav li .navwrap1 {
background: yellow;
margin-top: -23px;
padding-top: 23px;
width: 210px;
position: relative;
top: 15px;
}
ul#topnav li .navwrap2 {
background:grey;
padding-bottom: 33px;
}
ul#topnav > li > ul {
border-right: 3px solid grey;
margin-top: -11px;
margin-left: 0;
padding-left: 0;
}
ul#topnav ul .navwrap3 {
border-left:3px solid grey;
padding-top:60px;
}
ul#topnav .navwrap2 li {
float: none;
background:lightgreen;
width:100%;
}
ul#topnav ul ul {
position:relative;
top: 1px;
left: 0;
}
ul#topnav ul li a {
padding: 10px 10px 10px 15px;
}
ul#topnav ul ul li a {
padding: 10px 5px 10px 20px;
}
ul#topnav ul ul ul li a {
padding-left:20px;
}
ul#topnav li:hover ul {
visibility: visible;
}
My mark-up (abbreviated, the whole menu is visible at the CodePen link above):
<div id="topnavblock">
<ul id="topnav">
<li>Here is a menu item
<ul>
<li class="navwrap4">
<ul class="navwrap3">
<li class="navwrap1">
<ul class="navwrap2">
<li>Menu item 1</li>
<li>Another menu item of a different length
<ul>
<li>Sub-menu 2</li>
<li>Sub-menu 2
<ul>
<li>Third level nested menu</li>
<li>This also has a child of different length</li>
</ul>
</li>
<li>Sub-menu 2</li>
</ul>
</li>
<li>Sub-menu 3</li>
</ul><!--end navwrap2-->
</li> <!--end navwrap1-->
</ul><!--end navwrap3-->
</li><!--end navwrap4-->
</ul>
</li>
<li>Item
<ul>
<li class="navwrap4">
<ul class="navwrap3">
<li class="navwrap1">
<ul class="navwrap2">
<li>Sub-menu 3</li>
<li>Sub-menu 3
<ul>
<li>Sub-menu 4</li>
<li>Sub-menu 4</li>
<li>Sub-menu 4</li>
</ul>
</li>
<li>Sub-menu 3</li>
</ul><!--end navwrap2-->
</li> <!--end navwrap1-->
</ul><!--end navwrap3-->
</li><!--end navwrap4-->
</ul>
</li>
</ul>
For ul#topnav li .navwrap1 change margin-top: -23px; to margin: -23px auto 0;. That will center that element.