I'm trying to achieve the following result:
So far, I've written the following:
a {
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
border-top: 1px solid;
border-bottom: 1px solid;
padding-left: 1em;
line-height: 2em;
}
li li {
margin-left: -1em;
padding-left: 2em;
border-bottom: none;
}
li li li {
margin-left: -2em;
padding-left: 3em;
border-bottom: none;
}
Demo: https://jsfiddle.net/9h891a0s/1/
However, I am looking for a solution that would allow for infinite depth. Is there a clean solution for this?
Take a look of this by using the position:absolute tricks for the borders.
body {
margin: 0;
padding: 1em;
}
body > ul {
border-bottom: 1px solid black;
overflow: hidden;
}
a {
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
line-height: 2em;
position: relative;
}
li ul {
padding-left: 1em;
}
li:after {
content:"\00A0";
position: absolute;
width: 200%;
left: -100%;
top: 0;
border-top: 1px solid black;
z-index: -1;
}
<ul>
<li>Level 1
<ul>
<li>Level 2</li>
<li>
Level 2
<ul>
<li>Level 3</li>
<li>Level 3</li>
<li>Level 3</li>
</ul>
</li>
<li>Level 2</li>
</ul>
</li>
</ul>
Fiddle Demo: http://jsfiddle.net/Lr5cmoo6/
You could fake the borders by applying a repeating linear-gradient as the background of the top level ul. Then you'd need to just need a single rule for your list items to set your padding.
Here's an example:
body{
font-family:arial;
font-size:14px;
margin:0;
}
body>ul{
background:linear-gradient(0deg,#000 3.333%,#fff 3.333%);
background-size:100% 30px;
}
ul{
margin:0;
padding:0;
list-style-type:none;
}
li{
line-height:30px;
padding:0 1em;
}
<ul>
<li>Level 1
<ul>
<li>Level 2</li>
<li>
Level 2
<ul>
<li>Level 3</li>
<li>Level 3</li>
<li>Level 3</li>
</ul>
</li>
<li>Level 2</li>
</ul>
</li>
</ul>
There's no way to increase the margin/padding of an element by the nesting.
May this could help you:
a {
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
border-top: 1px solid;
border-bottom: 1px solid;
line-height: 2em;
}
li li {
border-bottom: none;
}
li li a {
margin-left: 1em;
}
li li li a {
margin-left: 2em;
}
li li li li a {
margin-left: 3em;
}
Related
I've been copying and pasting my dropdown menus for years but not fully understanding the function behind them. I decided to start my own from scratch with a minimum of code. The basics are there, but I can't figure out how to align the dropdown horizontally. I've looked at dozens of examples posted here, but I'm missing something.
Currently:
Desire:
Sample:
* { font-family: verdana;
box-sizing: border-box; /* use instead of padding-left: 0 ?? */}
li { list-style: none; padding: 4px 0; border: 1px solid green; }
a { text-decoration: none; }
ul li a { color: blue; }
ul li ul li a { color: red; }
ul li a:hover { opacity: 0.3; }
/*--------------
Salient code
----------------*/
ul li {
float: left; /* horizontal */
width: 120px;
position: relative;
}
ul li:hover ul {
/* left: auto; */
display: block
}
ul li ul {
position: absolute;
display: none; /* left: -999em; */
top: 28px;
padding-left: 0;
}
<ul>
<li>Top One</li>
<li>Top Two</li>
<li>Top Three
<ul>
<li>Middle One</li>
<li>Middle Two</li>
<li>Middle Three</li>
</ul>
</li>
</ul>
Just set padding-left to zero on your UL. Marked up code below.
* {
font-family: verdana;
}
li {
list-style: none;
padding: 4px 0;
border: 1px solid green;
}
a {
text-decoration: none;
}
ul li a {
color: blue;
}
ul li ul li a {
color: red;
}
ul li a:hover {
opacity: 0.3;
}
/*--------------
Salient code
----------------*/
ul li {
float: left;
/* horizontal */
width: 120px;
position: relative;
}
ul li:hover ul {
left: auto;
}
ul li ul {
position: absolute;
left: -999em;
top: 28px;
/* Just set padding-left to zero here */
padding-left:0;
}
<ul>
<li>Top One</li>
<li>Top Two</li>
<li>Top Three
<ul>
<li>Middle One</li>
<li>Middle Two</li>
<li>Middle Three</li>
</ul>
</li>
</ul>
why Increased Height item Contact when hover on it? how fix it?
This is My code :
ul {
padding: 0;
}
#nav ul {
display: none;
}
#nav li:hover > ul {
display: block;
}
#nav > li {
float: left;
}
#nav li {
list-style: none;
width: 150px;
position: relative;
border: 1px solid red;
box-sizing: border-box;
}
#nav a {
display: block;
background-color: #000;
color: red;
text-decoration: none;
padding: 10px 20px;
text-align: center;
box-sizing: border-box;
border: 2px solid transparent;
}
#nav ul ul {
position: absolute;
left: 150px;
top: 0;
}
#nav li:hover > a {
color: orange;
}
#nav li:hover > a:after {
content:'\25B6';
color: red;
margin-left: 5px;
padding: 0;
}
#nav > li:hover > a:after {
content: '\25BE';
color: red;
margin-left: 5px;
padding: 0;
}
<div id="wrapper">
<ul id="nav">
<li>Home</li>
<li>Products
<ul>
<li>Product 1</li>
<li>Product 2
<ul>
<li>Model 1</li>
<li>Model 2</li>
<li>Model 3</li>
</ul>
</li>
<li>Product 3</li>
</ul>
</li>
<li>Services
<ul>
<li>Service 1</li>
<li>Service 2</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
See This Image :
When you hover over the list items - you're adding an arrow to the anchor tag via generated content.
Thant's what's causing the increase in height.
To fix this - just set position:absolute on the generated content.
ul {
padding: 0;
}
#nav ul {
display: none;
}
#nav li:hover > ul {
display: block;
}
#nav > li {
float: left;
}
#nav li {
list-style: none;
width: 150px;
position: relative;
border: 1px solid red;
box-sizing: border-box;
}
#nav a {
display: block;
background-color: #000;
color: red;
text-decoration: none;
padding: 10px 20px;
text-align: center;
box-sizing: border-box;
border: 2px solid transparent;
}
#nav ul ul {
position: absolute;
left: 150px;
top: 0;
}
#nav li:hover > a {
color: orange;
}
#nav li:hover > a:after {
content:'\25B6';
color: red;
margin-left: 5px;
padding: 0;
position:absolute;
}
#nav > li:hover > a:after {
content: '\25BE';
color: red;
margin-left: 5px;
padding: 0;
}
<div id="wrapper">
<ul id="nav">
<li>Home</li>
<li>Products
<ul>
<li>Product 1</li>
<li>Product 2
<ul>
<li>Model 1</li>
<li>Model 2</li>
<li>Model 3</li>
</ul>
</li>
<li>Product 3</li>
</ul>
</li>
<li>Services
<ul>
<li>Service 1</li>
<li>Service 2</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
Because of
#nav > li:hover > a:after {
content: '\25BE';
}
the height (font size) is to high of this content.
maybe you should try a background-img.
Or position it absolute and the a-tag relative.
Its because of the :after content attribute (#nav > li:hover > a:after) you are adding on hover(the small arrow icon)
To avoid this, applying line-height: 0 is an efficient way of doing it.
#nav > li:hover > a:after {
content: '\25BE';
color: red;
margin-left: 5px;
padding: 0;
line-height: 0; //fix
}
Also you have this code twice, make sure you remove the redundant one.
It simple line height issue.
ul {
padding: 0;
}
#nav ul {
display: none;
}
#nav li:hover > ul {
display: block;
}
#nav > li {
float: left;
}
#nav li {
list-style: none;
width: 150px;
position: relative;
border: 1px solid red;
box-sizing: border-box;
}
#nav a {
display: block;
background-color: #000;
color: red;
text-decoration: none;
padding: 10px 20px;
text-align: center;
box-sizing: border-box;
border: 2px solid transparent;
line-height: 20px;
}
#nav ul ul {
position: absolute;
left: 150px;
top: 0;
}
#nav li:hover > a {
color: orange;
}
#nav li:hover > a:after {
content:'\25B6';
color: red;
margin-left: 5px;
padding: 0;
}
#nav > li:hover > a:after {
content: '\25BE';
color: red;
margin-left: 5px;
padding: 0;
}
<div id="wrapper">
<ul id="nav">
<li>Home</li>
<li>Products
<ul>
<li>Product 1</li>
<li>Product 2
<ul>
<li>Model 1</li>
<li>Model 2</li>
<li>Model 3</li>
</ul>
</li>
<li>Product 3</li>
</ul>
</li>
<li>Services
<ul>
<li>Service 1</li>
<li>Service 2</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
I have menu position on botoom of the page.
And I need to have three level menu, when each level is in row and located to the left.
My CSS Code:
.primary-navigation {
clear: both;
float: left;
display: block;
position: relative;
width: 100%;
top: 80px;
border: 2px solid red;
}
.primary-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.primary-navigation ul > li,
.primary-navigation ul > li > ul > li,
{
position: relative;
float: left;
padding: 3px 5px;
margin: 10px 5px;
cursor: pointer;
}
.primary-navigation ul ul ul li {
float: none;
}
.primary-navigation li > ul {
display: none;
position:absolute;
bottom: 100%;
left: -50%;
border: 2px solid red;
}
.primary-navigation li:hover > ul {
position: absolute;
display: block;
width: 600px;
}
.primary-navigation li {
float: left;
position: relative;
font-size: 20px;
}
.primary-navigation li ul li {
float: left;
position: relative;
font-size: 15px;
}
.primary-navigation a {
color: #FFF;
display: block;
line-height: 16px;
padding: 9px 15px;
text-decoration: none;
}
<nav class="primary-navigation">
<ul>
<li>Ahoj</li>
<li>Test A
<ul>
<li>Test 1</li>
<li>Test 2
<ul>
<li>Test A</li>
<li>Test B</li>
<li>Test C</li>
</ul></li>
<li>Test 3</li>
</ul></li>
<li>Test B
<ul>
<li>Test 4</li>
<li>Test 5</li>
<li>Test 6</li>
</ul></li>
</ul>
</nav>
I know, that there is a problem in li > ul part, when is
position:absolute;
bottom: 100%;
left: -50%;
I know, that "left" give me a horizontal position.
The problem is, how to get this second row to the left and make it wide full length
Here you go, you have to delete the position: relative out of your children <li> elements, because this is the reason the children of those will align absolute to it's parent (<li> and not the <nav> itself.) Further, you've to do a little trick with the border, because it affects the absolute positioning. So here I use box-shadow on the left side of your elements to achieve the same effect without a border. border-bottom is not needed, because you stack the elements anyway.
CSS for border "trick"
border-right: 2px solid red;
border-top: 2px solid red;
box-shadow: inset 2px 0 0 red //imitates a border-left
SNIPPET
html * {
box-sizing: border-box;
}
.primary-navigation {
clear: both;
float: left;
display: block;
position: relative;
width: 100%;
top: 80px;
border: 0;
box-shadow: inset 0 0 0 2px red;
}
.primary-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.primary-navigation ul > li,
.primary-navigation ul > li > ul > li,
{
float: left;
padding: 3px 5px;
margin: 10px 5px;
cursor: pointer;
}
.primary-navigation ul ul ul li {
float: none;
}
.primary-navigation li > ul {
display: none;
position:absolute;
bottom: 100%;
left: 0;
border-right: 2px solid red;
border-top: 2px solid red;
box-shadow: inset 2px 0 0 red
}
.primary-navigation li:hover > ul {
position: absolute;
display: block;
width: 600px;
}
.primary-navigation li {
float: left;
font-size: 20px;
}
.primary-navigation li ul li {
float: left;
font-size: 15px;
}
.primary-navigation a {
color: #FFF;
display: block;
line-height: 16px;
padding: 9px 15px;
text-decoration: none;
}
<nav class="primary-navigation">
<ul>
<li>Ahoj</li>
<li>Test A
<ul>
<li>Test 1</li>
<li>Test 2
<ul>
<li>Test A</li>
<li>Test B</li>
<li>Test C</li>
</ul></li>
<li>Test 3</li>
</ul></li>
<li>Test B
<ul>
<li>Test 4</li>
<li>Test 5</li>
<li>Test 6</li>
</ul></li>
</ul>
</nav>
I've read all the questions concerning centering submenus. But I don't get my problem solved.
I have a simple navigation bar with 2 submenus.
You can find it here: Fiddle.
ul#nav, ul#sub1, ul#sub2 {
list-style-type: none;
}
ul#nav {
position: relative;
}
ul#nav li {
width: 125px;
text-align: center;
float: left;
margin-right: 4px;
}
ul#nav a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
color: #000;
}
ul#sub1 a, ul#sub2 a {
margin-top: 4px;
}
ul#nav li:hover > a {
background-color: #6E6E6E;
color: #FFF;
}
ul#nav li:hover a:hover {
background-color: #E2E2E2;
color: #000;
}
ul#sub1, ul#sub2 {
display: none;
position: absolute;
left: 0px;
}
ul#nav li:hover ul#sub1 {
display: block;
}
ul#sub1 li:hover ul#sub2 {
display: block;
}
<nav>
<ul id="nav">
<li>Reisen
<ul id="sub1">
<li>Europa</li>
<li>Amerika</li>
<li>Asien
<ul id="sub2">
<li>Thailand</li>
<li>Bhutan</li>
<li>China</li>
<li>Vietnam</li>
<li>Japan</li>
</ul>
</li>
<li>Afrika</li>
<li>Australien</li>
</ul>
</li>
<li>Magazin</li>
<li>Karriere
<ul id="sub1">
<li>Thema 1</li>
<li>Thema 2</li>
<li>Thema 3</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
</nav>
I want the submenu centered. When I hover over "Reisen" the submenu gets the same width like the main menu.
When I hover over "Karriere", I want the submenu centered under "Karriere" and not positioned left under "Reisen".
I was thinking of a span-element to the button "Karriere" but I couldn't solve it.
Thanks for your help.
I don't really now if this is what you're looking for or not, but maybe something like this?
Note: I made a few changes to your CSS and HTML, mainly changing everything to use classes instead of IDs
JS Fiddle Example
HTML
<nav>
<ul id="nav">
<li>Reisen
<ul class="sub">
<li>Europa</li>
<li>Amerika</li>
<li>Asien
<ul class="sub-second">
<li>Thailand</li>
<li>Bhutan</li>
<li>China</li>
<li>Vietnam</li>
<li>Japan</li>
</ul>
</li>
<li>Afrika</li>
<li>Australien</li>
</ul>
</li>
<li>Magazin</li>
<li>Karriere
<ul class="sub">
<li>Thema 1</li>
<li>Thema 2</li>
<li>Thema 3</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
CSS
ul#nav, ul.sub {
list-style-type: none;
}
ul#nav {
position: relative;
}
ul#nav li {
width: 125px;
text-align: center;
float: left;
margin-right: 4px;
position: relative;
}
ul#nav a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
color: #000;
}
ul.sub a {
margin-top: 4px;
}
ul#nav li:hover > a {
background-color: #6E6E6E;
color: #FFF;
}
ul#nav li:hover a:hover {
background-color: #E2E2E2;
color: #000;
}
ul.sub {
display: none;
position: absolute;
left: 0px;
padding-left: 0;
}
ul.sub-second {
display: none;
list-style: none;
left:100px;
top: 0;
position: absolute;
}
ul#nav li:hover ul.sub {
display: block;
}
ul#nav li:hover ul.sub li:hover ul.sub-second {
display:block;
}
}
I am hoping that someone could help me out with a css problem that has been driving me crazy all day. I know I'm missing something obvious here, I just don't see it. If you can help that would be greatly appreciated.
Here is the fiddle http://jsfiddle.net/taglegacy/HK7Hy/
And here is the css:
body
{
margin: 20;
padding: 20;
text-align: center;
font: 85% arial, helvetica, sans-serif;
background: #f1f1f1;
color: #444;
}
#container
{
text-align: left;
margin: 0 auto;
width: 700px;
height: 400px;
background: #FFF;
}
/*---NavigationBar---*/
ul
{
font-family: Arial, Verdana;
font-size: 14px;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
float: left;
background: #9b1b19;
}
ul li
{
display: block;
position: relative;
float: left;
border-right: 1px solid #fff;
}
li ul
{
display: none;
position:absolute;
left:0;
}
ul li a
{
display: block;
text-decoration: none;
color: #fff;
padding: 5px 15px 5px 15px;
background: #9b1b19;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover
{
background: #af1f1c;
}
li:hover ul
{
display: block;
position: absolute;
background: #af1f1c;
}
li:hover li
{
float: none;
font-size: 11px;
background: #af1f1c;
border-top: 1px solid #fff;
}
li:hover a
{
background: #af1f1c;
}
li:hover li a:hover
{
background: #af1f1c;
}
Here is the HTML:
<body>
<div id="container">
<ul>
<li>Menu 1</li>
<li>Menu 2
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
<li>Submenu 4</li>
<li>Submenu 6</li>
</ul>
</li>
<li>Menu 4
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Really Long Submenu 3 Really Long</li>
</ul>
</li>
</ul>
</div>
</body>
The "really long" list item is being cut off because your submenu ul is set to the width of it's parent li. Take out the width: 100% and it'll show the enter text.
Move it so that it only applies to the parent ul to retain the navbar width:
#topnav { width: 100% }
Fiddle
I think, a position:absolute is needed for the 2nd ul. Play around a bit with padding-top and/or top. In the example the padding-top is equal to height of main menu items.
ul#topnav > li > ul {position: absolute; top:0; left:0; padding-top:36px;}
should work, good luck!