How can i add a sub-sub menu with CSS - html

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>

Related

Gap Between dropdown menu and sub menu

I'd like for the menu sub menu to show 10 pixels underneath the menu, i can achieve that using margin-top on the ul, but then i cant move my mouse down to the sub menu because there is a gap. There are posts very similar to this but i could't extract an answer from them. Like this one
Space between menu and drop down menu
deepMenu {
background: black !important;
margin-left: 100px !important;
position: absolute !important;
}
.lmao li ul {
display: none;
position: absolute;
border-top: 5px solid black;
margin-top: 18px;
}
.lmao li ul li {
display: none;
border-top: 0.1px solid #F2F2F2;
padding: 10px 40px 10px 10px;
margin: 0;
position: relative;
z-index: 9999999;
background: white;
font-size: 8pt;
line-height: 24px;
text-align: left;
}
.lmao li:hover > ul,
.lmao li:hover > ul li {
display: block;
}
<ul class="lmao">
<li class="point1">home
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2 long lel</li>
<li>Sub Menu 3 really bare long mad</li>
<li>Sub Menu 4 dvg</li>
</ul>
<li class="point">features
<ul>
<li>sdfgsdfgsdfgsdfgsdfgsdfg</li>
<li>sdfg</li>
<li>sdfgsdfgsdfgsdfg</li>
<li>sdfgsdfgsdfgsdfgsdfg</li>
</ul>
<li class="point layout">Layouts
<ul>
<li>sfdgsdfgsdfgsdfgsdfgdfgsdgsdf</li>
<li>sfdgsdfgsdfgl</li>
<li>dfsgsdfgsdfgsdfgsdfgsdfgsdfg</li>
<li class="arrow">sfgsdfg
<ul class="deepMenu">
<li>Deep Menu 1
<ul>
<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>
</ul>
</li>
<li class="point">pages</li>
<li class="point">light version</li>
</ul>
UPDATE:
Now that you gave the reference, the hover menu is not actually distant from the li itself, but it is positioned right below it. On the example site the li has a height bigger than the text within and has position: relative; on it.
The dropdown is absolute positioned right below this bigger <li> element with a top: 100%; that way it is distant from the text that triggers the dropdown.
Check the updated Snippet bellow with an updated solution.
Margins are not 'hoverable', and therefore the hover selector is not triggered. One way to keep it distant whilst 'hoverable' is to use padding instead of margins.
So you could change your .lmao li ul, although I wouldn't advise adding style to tags as a CSS best practice, I usually adopt a CSS naming convention such as BEM, SMACSS, among others.
/* Reset the ul style */
ul {
list-style: none;
padding: 0;
margin: 0;
}
deepMenu {
background: black !important;
margin-left: 100px !important;
position: absolute !important;
}
.lmao {
width: 100%;
text-align: center;
}
.lmao li {
display: inline-block;
background-color: white;
padding: 15px;
position: relative;
padding: 20px;
}
.lmao li a {
text-decoration: none;
color: black;
}
.lmao li a:hover {
text-decoration: none;
color: #f38763;
}
.lmao li ul {
display: none;
position: absolute;
border-top: 5px solid black;
top: 100%;
min-width: 200px;
}
.lmao li ul li {
display: none;
border-top: 0.1px solid #F2F2F2;
padding: 10px 40px 10px 10px;
margin: 0;
position: relative;
z-index: 9999999;
background: white;
font-size: 8pt;
line-height: 24px;
text-align: left;
}
.lmao li:hover > ul,
.lmao li:hover > ul li {
display: block;
}
<ul class="lmao">
<li class="point1">home
<ul>
<li>Sub Menu 1
</li>
<li>Sub Menu 2 long lel
</li>
<li>Sub Menu 3 really bare long mad
</li>
<li>Sub Menu 4 dvg
</li>
</ul>
<li class="point">features
<ul>
<li>sdfgsdfgsdfgsdfgsdfgsdfg
</li>
<li>sdfg
</li>
<li>sdfgsdfgsdfgsdfg
</li>
<li>sdfgsdfgsdfgsdfgsdfg
</li>
</ul>
<li class="point layout">Layouts
<ul>
<li>sfdgsdfgsdfgsdfgsdfgdfgsdgsdf
</li>
<li>sfdgsdfgsdfgl
</li>
<li>dfsgsdfgsdfgsdfgsdfgsdfgsdfg
</li>
<li class="arrow">sfgsdfg
<ul class="deepMenu">
<li>Deep Menu 1
<ul>
<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>
</ul>
</li>
<li class="point">pages
</li>
<li class="point">light version
</li>
</ul>
body {
background-color: #cac3bc
}
nav {
float: left;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background-color: #fff;
margin-top: 10px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
margin-right: -80px;
}
nav ul li {
float: left;
}
nav ul li:hover {
border-bottom: 5px solid #f5aa65;
color: #fff;
}
nav ul li a:hover {
color: #000;
}
nav ul li a {
display: block;
padding: 15px 15px;
font-family: 'PT Sans', sans-serif;
color: #000;
text-decoration: none;
}
nav ul ul {
background-color:#fff;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #000;
}
nav ul ul:before {
content: "";
display: block;
height: 20px;
position: absolute;
top: -20px;
width: 100%;
}
<body>
<nav>
<ul>
<li>One
<ul>
<li>A</li>
<li>B
</ul>
</li>
<li>Two
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
<li>Three
<ul>
<li>A</li>
<li>B</li>
</ul>
</li>
<li>Four</li>
</ul>
</nav>
</body>

Change priority for drawing border

I want draw <div> border over <li> border.
Now it see like that:
But i want draw that:
All my code on JsFiddle:
#mainmenu ul ul {
display: none;
}
#mainmenu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#mainmenu ul li {
list-style-type: none;
text-align: center;
width: 120pt;
height: 20pt;
padding: 10pt 0pt 10pt 0pt;
border: 2px gray solid;
}
#mainmenu ul li:hover {
background-color: gray;
}
#mainmenu ul li:hover ul {
position: absolute;
top: 10px;
left: 130pt;
display: block;
}
#mainmenu h1 {
font-size: 14pt;
margin: 0px;
}
#mainmenu {
display: inline-block;
border: 2px red solid;
}
<div id="mainmenu">
<ul>
<li>
<h1>Семинар 1</h1>
<ul>
<li>Задача 1</li>
<li>Задача 2</li>
<li>Задача 3</li>
</ul>
</li>
<li>
<h1>Семинар 2</h1>
<ul>
<li>Задача 1</li>
<li>Задача 2</li>
<li>Задача 3</li>
</ul>
</li>
</ul>
</div>
Big thanks for your response!
Based on your screenshot, I'm guessing you're trying to change the border-color of the left-most boxes.
Rather than "covering" up the gray border with a red one, I'd recommend specifically targeting those top-level <li>s with CSS, and setting the border of those elements to red. You can use the CSS direct descendant selector to do that:
#mainmenu > ul > li {
border: 2px solid red;
}
Full Example Below (click "run code snippet"):
#mainmenu ul ul {
display: none;
}
#mainmenu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#mainmenu ul li {
list-style-type: none;
text-align: center;
width: 120pt;
height: 20pt;
padding: 10pt 0pt 10pt 0pt;
border: 2px gray solid;
}
#mainmenu > ul > li {
border: 2px solid red;
}
#mainmenu ul li:hover {
background-color: gray;
}
#mainmenu ul li:hover ul{
position: absolute;
top: 10px;
left: 130pt;
display: block;
}
#mainmenu h1 {
font-size: 14pt;
margin: 0px;
}
#mainmenu {
display: inline-block;
}
<div id="mainmenu">
<ul>
<li><h1>Семинар 1</h1>
<ul>
<li>Задача 1</li>
<li>Задача 2</li>
<li>Задача 3</li>
</ul>
</li>
<li><h1>Семинар 2</h1>
<ul>
<li>Задача 1</li>
<li>Задача 2</li>
<li>Задача 3</li>
</ul>
</li>
</ul>
</div>
Your Image:
From your image (that I have posted above), I believe you are looking for something like this:
#mainmenu ul ul {
display: none;
}
#mainmenu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#mainmenu ul li {
list-style-type: none;
text-align: center;
width: 120pt;
height: 20pt;
padding: 10pt 0pt 10pt 0pt;
}
ul li ul li {
border: 2px gray solid;
margin-left:6px;
}
#mainmenu ul li:hover {
background-color: gray;
}
#mainmenu ul li:hover ul {
position: absolute;
top: 10px;
left: 130pt;
display: block;
}
#mainmenu h1 {
font-size: 14pt;
margin: 0px;
z-index:2;
}
#mainmenu {
display: inline-block;
border: 6px red solid;
}
<div id="mainmenu">
<ul>
<li>
<h1>Семинар 1</h1>
<ul>
<li>Задача 1</li>
<li>Задача 2</li>
<li>Задача 3</li>
</ul>
</li>
<li>
<h1>Семинар 2</h1>
<ul>
<li>Задача 1</li>
<li>Задача 2</li>
<li>Задача 3</li>
</ul>
</li>
</ul>
</div>

align ul next to each other dropdown menu

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

Level 3 of drop down menu not stretching to width of text

I am trying to figure out why the third level of my drop down menu is not stretching to the width of the text that is contained within it. So far the text just automatically indents to the next line but all the other li's do not do this and are on a single line. Can someone help me find out why this is happening? Thank you!
here is the example I have made so far: http://themedwebdesign.com/salmon/
here is the html
<header>
<div class="container clearfix">
<div id="logo"><img src="./img/salmon-logo.png" alt=""></div>
<nav>
<ul>
<li>Home</li>
<li>Pages
<ul>
<li>About</li>
<li>Services</li>
<li>Meet the Team</li>
</ul>
</li>
<li>Features
<ul>
<li>Feature</li>
<li>Level 3
<ul>
<li>Level 3</li>
<li>Level 3</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio
<li>Blog
<ul>
<li>Single</li>
<li>Large</li>
<li>Medium</li>
<li>Small</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
and here is the css, I apologize its made using sass. If the compiled css file is needed then I will post it.
nav {
float: right;
ul {
list-style: none;
position: relative;
display: inline-block;
margin: 0;
li {
float: left;
text-transform: uppercase;
font-weight: 300;
a {
text-decoration: none;
color: inherit;
padding: 15px 25px;
display: block;
}
&:hover {
color: $colorSite;
}
&:hover > ul {
display: block;
}
}
&:after {
content: "";
clear: both;
display: block;
}
ul {
position: absolute;
top: 100%;
display: none;
padding: 0;
margin: 0;
border: 1px solid $colorSite;
li {
float: none;
position: relative;
a {
color: $colorDark;
text-decoration: none;
display: block;
padding: 15px 25px;
background-color: #fff;
&:hover {
color: #fff;
background-color: $colorSite;
}
}
}
ul {
position: absolute;
left: 100%;
top: 0;
}
}
}
}
If you want to stretch and don't want the 2nd line, you can simply do this in your css
header nav ul ul li a { white-space: nowrap; }
Just make width: 100%; under css header nav ul ul ul
white-space: nowrap; will prevent the text from wrapping.
header nav ul ul li {
float: none;
position: relative;
white-space: nowrap;
}

How can I "center" the child elements of this variable-width menu?

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.