body {
padding: 0px;
margin: 0px;
background-image: url("background.jpg");
background-size: cover;
}
* {
font-family: "Ubuntu", sans-serif;
font-size: 1rem;
text-decoration: none;
color: white;
}
.nav-bar {
background-color: darkred;
display: inline-block;
width: 100%;
height: 48px;
}
#navigation ul {
list-style: none;
float: right;
padding: 0px;
margin: 0px;
}
#navigation ul ul {
display: none;
position: absolute;
width: 200px;
}
#navigation ul li:hover ul {
display: block;
}
#navigation ul li {
float: left;
padding: 15px;
}
#navigation ul ul li {
margin-left: -15px !important;
}
#navigation ul li ul li:first-child {
margin-top: 15px;
}
#navigation ul ul li {
margin-left: 0px;
padding-top: 10px;
background-color: darkgreen;
}
#navigation ul li ul li:hover {
background-color: blueviolet;
}
#navigation ul li:hover {
background-color: firebrick;
}
#navigation ul li:last-child ul li { // Here is actually what the some magic has to be carried out actually.
right: 100px;
background: black;
}
<!DOCTYPE html>
<html>
<head>
<!-- Right hand sided navigation menu with level 1 drop down -->
<title>HTML - CSS Lessons</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="nav-bar">
<nav id="navigation">
<ul>
<li>
Menu Item 1
<ul>
<li>Submenu 1 Item 1</li>
<li>Submenu 1 Item 2</li>
<li>Submenu 1 Item 3</li>
</ul>
</li>
<li>Menu Item 2</li>
<li>
Menu Item 3
<ul>
<li>Submenu 3 Item 1</li>
<li>Submenu 3 Item 2</li>
<li>Submenu 3 Item 3</li>
</ul>
</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
<li>
Menu Item 6 // This is the place where the menu has to come out of screen
<ul>
<li>Submenu 6 Item 1</li>
<li>Submenu 6 Item 2</li>
<li>Submenu 6 Item 3</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
Why the last I mean the menu in black background appears inside the screen? How to pull it out? I have used "#navigation ul li:last-child ul li" to make the last drop down as black color. But, don't have any idea of pulling it out from the screen's right hand side. Can't we make use of "#navigation ul li:last-child ul li" to pull out the menu out of the screen?
body {
padding: 0px;
margin: 0px;
background-image: url("background.jpg");
background-size: cover;
}
* {
font-family: "Ubuntu", sans-serif;
font-size: 1rem;
text-decoration: none;
color: white;
}
.nav-bar {
background-color: darkred;
display: inline-block;
width: 100%;
height: 48px;
}
#navigation ul {
list-style: none;
float: right;
padding: 0px;
margin: 0px;
}
#navigation ul ul {
display: none;
position: absolute;
width: 200px;
}
#navigation ul li:hover ul {
display: block;
}
#navigation ul li {
float: left;
padding: 15px;
}
#navigation ul ul li {
margin-left: -15px !important;
}
#navigation ul li ul li:first-child {
margin-top: 15px;
}
#navigation ul ul li {
margin-left: 0px;
padding-top: 10px;
background-color: darkgreen;
}
#navigation ul li ul li:hover {
background-color: blueviolet;
}
#navigation ul li:hover {
background-color: firebrick;
}
#navigation ul li:last-child ul li {
position: relative;
right: 21%;
background: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Right hand sided navigation menu with level 1 drop down -->
<link rel="stylesheet" href="style.css" />
<title>HTML - CSS Lessons</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="nav-bar">
<nav id="navigation">
<ul>
<li>
Menu Item 1
<ul>
<li>Submenu 1 Item 1</li>
<li>Submenu 1 Item 2</li>
<li>Submenu 1 Item 3</li>
</ul>
</li>
<li>Menu Item 2</li>
<li>
Menu Item 3
<ul>
<li>Submenu 3 Item 1</li>
<li>Submenu 3 Item 2</li>
<li>Submenu 3 Item 3</li>
</ul>
</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
<li>
Menu Item 6
<ul>
<li>Submenu 6 Item 1</li>
<li>Submenu 6 Item 2</li>
<li>Submenu 6 Item 3</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
Related
Created a navigation menu with one drop menu. For some reason I am unable to get the correct CSS dropping the menu on "Main 3." Would someone mind looking at my CSS to see if there is something I may have missed.
HTML
<ul class="navmenu">
<li>Main 1</li>
<li>Main 2</li>
<li>
Main 3
<ul>
<li>Sub 1</li>
<li>Sub 2 </li>
<li>Sub 3</li>
<li>Sub 4</li>
</ul>
</li>
<li>Main 4</li>
<li>Main 5</li>
<li>Main 6</li>
<li>Main 7</li>
</ul>
CSS
.navmenu{
background: #510E2A;
height: 35px;
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
text-align: justify;
}
.navmenu li{
float: left;
}
.navmenu li a{
display: block;
padding:9px 20px;
text-decoration: none;
font-family: THCFontSemiBold;
color: #f3ac3f;
font-weight: bold;
}
.navmenu ul{
list-style-type: none;
position: absolute;
z-index: 1000;
left: -9999em;
}
.navmenu li:hover{
position: relative;
}
.navmenu li:hover ul {
left:0px;
top:30px;
background:#5FD367;
padding:0px;
}
.navmenu li:hover ul li a {
padding:5px;
display:block;
width:168px;
text-indent:15px;
background-color:red;
}
.navmenu li:hover ul li a:hover { background:#005555; }
Fiddle is here
Just remove overflow from navmenu
.navmenu{
background: #510E2A;
height: 35px;
margin: 0;
padding: 0;
list-style-type: none;
text-align: justify;
}
Updated Fiddle
I have a CSS dropdown navigation menu with a submenu. My problem is that the submenu closes before I click on it. When I move the cursor halfway to the submenu, it disappears. For example when I move my mouse to click on "Item 3 sub 1.1", it disappears.
The main dropdown menu works fine but the submenu is the problem.
What can I do to make the submenu stay until I click on it?... Thanks for the help
This is my CSS for the menu:
.nav {
padding: 0px;
text-align: center;
border: 0px;
vertical-align: middle;
display: table-row;
width: 100%;
margin: 0px auto;
background-color:#660000;
overflow: hidden;
position:relative;
height: 30;
text-align: center;
margin: 0px auto 0px auto;
}
ul {
list-style: none;
padding: 0px;
margin: 0px;
float:left;
display:inline;
}
ul li {
display:block;
position: relative;
float: left;
left: 85px;
}
li ul {
display: none;
margin:0;
}
ul li a {
display: block;
background: #660000;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
border-left:1px solid #660000;
border-right:1px solid #660000;
}
ul li a:hover {
background: #3300cc;
display: block;
}
li:hover ul {
position: fixed;
display: block;
}
li:hover li {
float: none;
}
li:hover a {
background: #3300cc;
}
li:hover li a:hover {
background: #660000;
}
.drop-nav li ul li {
border-top: 0px;
z-index: 100;
border-bottom:0;
right:0;
left:0;
}
li li:hover a {
display: block;
}
li li ul a {
margin-top:-25px;
margin-bottom: 25px;
margin-left: 85px;
display: none;
}
li:hover li:hover ul li a:hover {
margin-top:-25px;
margin-bottom:25px;
margin-left: 85px;
overflow: none;
}
This is the html:
<div class="nav" >
<ul class="drop-nav">
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2 sub 1</li>
<li> Item 2 sub 2</li>
<li > Item 2 sub 2</li>
</ul>
</li>
<li> Item 3
<ul>
<li> Item 3 sub 1 »
<ul>
<li> Item 3 sub 1.1</li>
<li> Item 3 sub 1.2</li>
<li > Item 3 sub 1.3</li>
</ul>
</li>
<li> Item 3 sub 2 »
<ul>
<li> Item 3 sub 2.1 </li>
<li> Item 3 sub 2.2 </li>
<li> Item 3 sub 2.3 </li>
</ul>
</li>
<li> Item 3 sub 3 </li>
<li> Item 3 sub 4 </li>
<li> Item 3 sub 5 </li>
</ul>
</li>
</ul>
</div>
Your css selectors are very confusing. Only using ul li and then li ul or li li ul a on the next line is too vague and not really targeting an element. While this approach might work for nesting of one level deep, it seriously get's confusing (for the browser) when you start nesting 2 level deep.
I'd give each UL element a certain, descriptive class, which you can precisely target.
Additonally, make use of the position attribute for your UL and don't forget to think about z-index when menus overlap.
Something like this, not very pretty, but it works the way you propably expect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav {
position: relative;
top: 0;
width: 80%;
height: auto;
border: 1px solid #e6e6e6;
margin: 0 auto;
font-family: 'Helvetica', Arial, sans-serif;
}
/* Root Level */
.dropdown-menu {
position: relative;
top: 0;
left: 0;
padding: 0;
margin: 0;
background: #eeeeee;
}
/* Clear the float */
.dropdown-menu:after {
display: table;
content: "";
clear: both;
}
.dropdown-menu li {
display: block;
border-left: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
min-width: 150px;
float: left;
}
.dropdown-menu li a:link,
.dropdown-menu li a:visited {
padding: 10px 15px;
text-decoration: none;
color: #111111;
display: block;
}
.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
color: #222222;
}
/* Level 1 */
.dropdown-level-1 {
position: absolute;
padding: 0;
margin: 0;
display: none;
background: grey;
width: 150px;
}
.dropdown-level-1 li {
}
/* The ">" triggers the direct child to show up as "block" */
.dropdown-menu li:hover > .dropdown-level-1 {
display: block;
}
/* Level 2 */
.dropdown-level-2 {
position: absolute;
display: none;
background: #888888;
padding: 0;
margin: -38px 0 0 148px;
}
/* same trick here for level 2 */
.dropdown-level-1 li:hover > .dropdown-level-2 {
display: block;
}
/* Target all links at once */
.dropdown-level-0 li a:link,
.dropdown-level-0 li a:visited,
.dropdown-level-1 li a:link,
.dropdown-level-1 li a:visited,
.dropdown-level-2 li a:link,
.dropdown-level-2 li a:visited {
padding: 10px;
color: purple;
display: block;
}
.dropdown-level-0 li a:hover,
.dropdown-level-0 li a:focus,
.dropdown-level-1 li a:hover,
.dropdown-level-1 li a:focus,
.dropdown-level-2 li a:hover,
.dropdown-level-2 li a:focus {
color: orange;
}
</style>
</head>
<body>
<div class="nav">
<ul class="dropdown-menu">
<li>Item 1</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li> Item 2 sub 2</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Please take a look at this Fiddle:
https://jsfiddle.net/wd9wj7oe/1/
CODES:
HTML
<nav id="navigation">
<ul class="menu">
<li>home</li>
<li>about</li>
<li>products</li>
<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
<li>Line 5</li>
</ul>
<li>help</li>
<li>join us</li>
<li>contact</li>
</ul>
</nav>
CSS:
#navigation{
float: left;
list-style: none;
font-family: Arial;
font-size: 20px;
position: absolute;
}
#navigation li{
list-style: none;
float:left;
padding-left: 28px;
}
#navigation ul ul{
left: 0;
top: 100%;
position: absolute;
float: none;
list-style: none;
}
#navigation ul ul li{
display: none;
left: 0;
float: none;
z-index: 1000;
}
#navigation ul li:hover > ul{
display:block;
}
As you can see, there are two main problems happening here:
1 - The sub menu is not showing up when i hover over "products", as it should.
2 - Even if it would show up, the sub is not positioned correctly.
Help please!
You have the wrong markup for a drop-down menu
instead
<ul>
<li>item 1</li>
<li>item 2</li>
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
<li>subitem 3</li>
</ul>
<li>item 3</li>
</ul>
to
<ul>
<li>item 1</li>
<li>item 2
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
<li>subitem 3</li>
</ul>
</li>
<li>item 3</li>
</ul>
ul{
padding: 0;
}
#navigation {
float: left;
list-style: none;
font-family: Arial;
font-size: 20px;
position: absolute;
}
#navigation li {
list-style: none;
float:left;
padding-left: 28px;
position: relative;
}
#navigation ul li:hover > ul {
display: block;
}
#navigation ul ul {
position: absolute; left: auto; top: 100%;
list-style: none;
display: none;
z-index: 1000;
}
#navigation ul ul li {
float: none;
padding: 0;
}
<nav id="navigation">
<ul class="menu">
<li>home
</li>
<li>about
</li>
<li>products
<ul>
<li>Line 1
</li>
<li>Line 2
</li>
<li>Line 3
</li>
<li>Line 4
</li>
<li>Line 5
</li>
</ul>
</li>
<li>help
</li>
<li>join us
</li>
<li>contact
</li>
</ul>
</nav>
You have to hide the ul and not the li element. And for the positioning, you have to set position: relative on #navigation li.
#navigation {
float: left;
list-style: none;
font-family: Arial;
font-size: 20px;
position: absolute;
}
#navigation li {
position: relative;
list-style: none;
float:left;
padding-left: 28px;
}
#navigation ul ul {
display: none;
left: 0;
top: 100%;
width: 6em;
position: absolute;
float: none;
list-style: none;
}
#navigation ul ul li {
left: 0;
float: none;
z-index: 1000;
}
#navigation ul li:hover > ul {
display:block;
}
https://jsfiddle.net/wd9wj7oe/5/
How can I create a drop down menu like the one in this picture:
What I already tried:
Check out this jsfiddle
I really can't get it to work, sorry for this noobish question and the code in the JSFiddle is all I have.
CSS:
#import url(http://fonts.googleapis.com/css?family=Homenaje);
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', sans-serif;;
color: #666666;
font-size: 14px;
background: url(../img/header.jpg) repeat-x;
margin: 0;
}
/*=============================*/
/*===== Functionality =====*/
/*=============================*/
/*===== Parents =====*/
#navMenu,
#navMenu ul,
#navMenu li {
display: block;
color: black;
font-size: 12px;
}
#navMenu ul {
line-height:30px;
}
#navMenu li {
list-style:none;
float:left;
position:relative;
width: 120px;
height:45px;
}
#navMenu ul li a {
line-height:45px;
display:block;
background-color: #333333;
margin-left: auto;
text-align: left;
color: white;
padding-left: 10px;
}
#navMenu ul li a:hover {
background-color: #03A6CF;
}
/*end Parents*/
/*===== Children =====*/
#navMenu ul ul {
position:absolute;
visibility:hidden;
margin-left: -13px;
}
#navMenu ul li:hover > ul {
visibility:visible;
}
/*end children*/
/*==========================*/
/*===== Prettyness =====*/
/*==========================*/
#navMenu ul li a {
text-decoration:none;
}
What about something like this? http://fiddle.jshell.net/Egg4t/
#navMenu ul,
#navMenu li {
display: block;
font-size: 12px;
margin: 0;
}
#navMenu {
position: relative;
}
#navMenu ul {
line-height:30px;
}
#navMenu li {
list-style:none;
float: left;
padding-right: 20px;
padding-left: 10px;
font-size: 14px;
}
#navMenu li li {
line-height: 25px;
color: #03A6CF;
float: left;
}
#navMenu li li li {
float: none;
display: block;
}
#navMenu ul li a {
display: block;
font-size: 12px;
line-height: 25px;
margin-left: auto;
text-align: left;
}
#navMenu ul ul {
position:absolute;
left: 0;
padding: 0;
width: 500px;
background-color: #333333;
visibility:hidden;
}
#navMenu ul ul ul {
position: static;
display: inline;
}
#navMenu ul li:hover ul {
visibility:visible;
}
<div id="navMenu" class="last-topnav">
<ul>
<li> Menu 1
<ul>
<li> Menu 1 Column 1
<ul>
<li>item 1</li>
<li>item 2</li>
<li> Level 2
<ul>
<li>item 2</li>
<li>item 2</li>
</ul>
</li>
</ul>
</li>
<li> Menu 1 Column 2
<ul>
<li>
item 1
</li>
<li>item 2</li>
<li>item 3<li>
<li>item 4<li>
</ul>
</li>
</ul>
</li>
<li> Menu 2
<ul>
<li> Menu 2 Column 1
<ul>
<li>item 1</li>
<li>item 2</li>
<li> Level 2
<ul>
<li>item 2</li>
<li>item 2</li>
</ul>
</li>
</ul>
</li>
<li> Menu 2 Column 2
<ul>
<li>
item 1
</li>
<li>item 2</li>
<li>item 3<li>
<li>item 4<li>
</ul>
</li>
<li> Column 3
<ul>
<li>
item 1
</li>
<li>item 2</li>
<li>item 3<li>
<li>item 4<li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
I've got this menu wich is setup inline and has dropdowns.
The inner ul has a background.
Each dropdown li has a :hover that changes the background of the li:
<div id="navMain">
<ul>
<li>Forside
<ul>
<li>1111111111111</li>
<li>Link 1-2</li>
<!-- etc. -->
</ul>
</li>
<li>Om Os
<ul>
<li>Link 2-1</li>
<li>Link 2-2</li>
<!-- etc. -->
</ul>
</li>
<li>Link 3
<ul>
<li>Link 3-1</li>
<li>Link 3-2</li>
<!-- etc. -->
</ul>
</li>
</ul>
</div>
Problem is, that when one of the submenu li is longer than the others, it will only expand itself, and not the other li ofcourse.
This results in the :hover effect having different lengths.
So how would i make all li in each inner ul the same size as the widest one?
Here you can find the CSS if needed.
Here. Notice I added a class to your menu li's and that I added a body background to your css, because I couldn't notice your menus. Finally the trick is done by making the li elements 100% width
body {
background-color: green;
}
.menu li {
width: 100%
}
#navMain {}
#navMain ul {
padding: 0;
margin: 0;
z-index: 2;
}
#navMain ul li {
margin-right: 5px;
text-align: center;
}
#navMain li a {
display: block;
text-decoration: none;
color: white;
padding-left: 10px;
padding-right: 10px;
}
#navMain li a:hover {
background-color: black;
}
#navMain ul li:last-child {
margin-right: 0px;
}
#navMain li {
position: relative;
float: left;
list-style: none;
margin: 0;
padding: 0;
font-size: 17px;
font-weight: bold;
color: #fff;
}
#navMain ul ul {
position: absolute;
top: 20px;
visibility: hidden;
background-image: url(img/alphaBg.png);
}
#navMain ul li ul li {
font-size: 12px;
margin-right: 0px;
text-align: left;
}
#navMain ul li ul li:first-child {
padding-top: 5px;
}
#navMain ul li:hover ul {
visibility: visible;
}
<html>
<head>
</head>
<body>
<div id="navMain">
<ul>
<li>Forside
<ul class="menu">
<li>1111111111111</li>
<li>Link 1-2</li>
<li>Link 1-3</li>
<li>Link 1-3</li>
<li>Link 1-3</li>
<li>Link 1-3</li>
</ul>
</li>
<li>Om Os
<ul class="menu">
<li>Link 2-1</li>
<li>Link 2-2</li>
<li>Link 2-3</li>
</ul>
</li>
<li>Link 3
<ul class="menu">
<li>Link 3-1</li>
<li>Link 3-2</li>
<li>Link 3-3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
li {display:block} will make the list items as wide as the widest item in that parent container
body {
background: #ededed;
margin: 0 auto;
}
.wrapper {
width: 720px;
border: 1px solid red;
padding: 5px;
}
.menu {
padding: 0;
margin: 0;
width: 100%;
border-bottom: 0;
}
.menu li {
display: table-cell;
width: 1%;
float: none;
border: 1px solid green;
margin: 2px;
padding: 10px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="wrapper">
<ul class="menu">
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
</ul>
</div>
</body>
</html>