I tried so many times to work on a nested list but it appears in the middle of the page not under its parent. Also does not appear using hover. I tried an tried but nothing works. below is both the html and css. wahat margin and position should I use? what is the problem with hover?
<html>
<head>
<title> Life Clinck </title>
<link href="style.css" type="text/css" rel="stylesheet" >
</head>
<body>
<div id="header">
<img height="200px " width="200px" src="logo.jpg">
<h1> Life Clinck
</h1>
<hr>
</div>
<nav class="navClass">
<ul>
<li> map </li>
<li> apponintment</li>
<li> contact </li>
<li> clincks </li>
<ul class="submenu">
<li> 1 </li>
<li> 2</li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
</ul>
</ul>
</nav>
</body>
</html>
Here is the css code
body {
background-image: linear-gradient(to top, #c1dfc4 0%, #deecdd 100%);
text-align: center;
}
#header {
background: #FFFFFF;
width: 100%;
height:280px;
margin: 0px auto;
}
h1{
text-align: center;
font-family: "Times new Romans";
font: 28pt;
color:#CC0000;
}
hr
{
color: #dfcaca;
height:10pt;
width: 100%;
}
.navClass > ul{
list-style: none;
}
.navClass > ul > li{
padding: 5px 25px;
display: inline-block;
position: relative;
}
a {
text-decoration: none;
}
ul.submenu{
list-style: none;
margin-left: -10px;
display: none;
}
ul.submenu > li{
font-family: "Tahoma";
}
.navClass li:hover
{
background: #FFFFFF;
left: 0;
}
.navClass li:hover .submenu {
display: block;
}
Best Regards
body {
background-image: linear-gradient(to top, #c1dfc4 0%, #deecdd 100%);
text-align: center;
}
#header {
background: #FFFFFF;
width: 100%;
height:280px;
margin: 0px auto;
}
h1{
text-align: center;
font-family: "Times new Romans";
font: 28pt;
color:#CC0000;
}
hr
{
color: #dfcaca;
height:10pt;
width: 100%;
}
.navClass > ul{
list-style: none;
}
.navClass > ul > li{
padding: 5px 25px;
display: inline-block;
position: relative;
}
a {
text-decoration: none;
}
ul.submenu{
list-style: none;
margin-left: -10px;
display: none;
}
ul.submenu > li{
font-family: "Tahoma";
}
.navClass li:hover
{
background: #FFFFFF;
left: 0;
}
.navClass li:hover .submenu {
display: block;
}
<html>
<head>
<title> Life Clinck </title>
<link href="style.css" type="text/css" rel="stylesheet" >
</head>
<body>
<div id="header">
<img height="200px " width="200px" src="logo.jpg">
<h1> Life Clinck
</h1>
<hr>
</div>
<nav class="navClass">
<ul>
<li> map </li>
<li> apponintment</li>
<li> contact </li>
<li> clincks
<ul class="submenu"> /*---> Moved this ul inside upper li, and done...*/
<li> 1 </li>
<li> 2</li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Move the nested ul inside the li to make it work. See the snippet...
See below the changes...
<li> apponintment</li>
<li> contact </li>
<li> clincks
<ul class="submenu"> /*---> Moved this ul inside upper li, and done...*/
<li> 1 </li>
<li> 2</li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
</ul>
</li>
you need to put the <ul> inside the parent <li>.
Like this:
<ul>
<li>test</li>
<li>test
<ul>
<li>sub-item</li>
<li>sub-item</li>
</ul>
</li>
<li>test</li>
<ul>
Related
So I was trying to make a Super sub-menu and for some reason, the super sub-menu appears when I hover above the main menus, not the sub-menus. and I thought something is wrong with the display: none; but I don't know how to fix it. I already tried to put it with the class it still didn't work and I already double-check the HTML to ensure not typo and none so I'm so confused and stuck right now, PLEASE HELP.
The code :
* {
margin: 0;
padding: 0;
}
body {
background-image: url(photo-1542831371-29b0f74f9713.jpg);
background-size: cover;
}
nav {
/* this is a tag */
height: 60px;
background-color: white;
display:flex;
}
nav a {
font-family: arial, sans-serif;
color: #222;
font-size: 18px;
line-height: 55px;
padding: 2.3px 14px;
text-decoration: none;
text-align: center;
display: block;
}
nav form {
max-width: 100%;
height: 60px;
}
nav ul {
display:flex;
list-style: none;
}
nav li:hover>a {
background: rgb(224, 224, 224);
cursor: pointer;
}
nav ul li ul {
display: none;
position: absolute;
background-color: rgba(255, 238, 238, 0.89);
backdrop-filter: blur(5px);
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li ul {
display: none;
position: absolute;
top: 0;
right: 0;
-ms-transform: translate(100%,0);
-webkit-transform: translate(100%,0);
transform:translate(100%,0);
list-style: none;
}
.subMenu li:hover>.SuperSubMenu{
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>Wall of nothing</title>
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<nav id="navbar">
<form name="" method="" action="BUTTON%20TEST.html">
<input type="image" name="IB1" src="gradient-coding-logo-template_23-2148809439.jpg" width="70" height="60">
</form>
<ul>
<li>
About
<ul>
<li>
Expectations
</li>
<li>
FAQ
</li>
<li>
Laptop Program
</li>
</ul>
</li>
<li>
Why?
<ul>
<li>
What?
</li>
<li>
Events & Activities
</li>
<li>
Meet The Grads
</li>
</ul>
</li>
<li>
Events
<ul>
<li>
Opportunities
</li>
<li>
asd
</li>
</ul>
</li>
<li>
assd
</li>
<li>
Contact
<ul class="subMenu">
<li>
Numbers
<ul class="SuperSubMenu">
<li>
Person1
</li>
<li>
Person2
</li>
</ul>
</li>
<li>
Fax
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
It's not working because
nav ul li:hover ul {
display: block;
}
is overwriting
.SuperSubMenu {
display: none;
}
property.
To fix it you can add !important to both css for SuperSubMenu. This isn't probably the best way, but it works.
* {
margin: 0;
padding: 0;
}
body {
background-image: url(photo-1542831371-29b0f74f9713.jpg);
background-size: cover;
}
nav {
/* this is a tag */
height: 60px;
background-color: white;
display:flex;
}
nav a {
font-family: arial, sans-serif;
color: #222;
font-size: 18px;
line-height: 55px;
padding: 2.3px 14px;
text-decoration: none;
text-align: center;
display: block;
}
nav form {
max-width: 100%;
height: 60px;
}
nav ul {
display:flex;
list-style: none;
}
nav li:hover>a {
background: rgb(224, 224, 224);
cursor: pointer;
}
nav ul li ul {
display: none;
position: absolute;
background-color: rgba(255, 238, 238, 0.89);
backdrop-filter: blur(5px);
border-radius: 0px 0px 4px 4px;
}
.SuperSubMenu {
display: none !important;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li ul {
display: none;
position: absolute;
top: 0;
right: 0;
-ms-transform: translate(100%,0);
-webkit-transform: translate(100%,0);
transform:translate(100%,0);
list-style: none;
}
.subMenu li:hover>.SuperSubMenu{
display: block !important;
}
<!DOCTYPE html>
<html>
<head>
<title>Wall of nothing</title>
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<nav id="navbar">
<form name="" method="" action="BUTTON%20TEST.html">
<input type="image" name="IB1" src="gradient-coding-logo-template_23-2148809439.jpg" width="70" height="60">
</form>
<ul>
<li>
About
<ul>
<li>
Expectations
</li>
<li>
FAQ
</li>
<li>
Laptop Program
</li>
</ul>
</li>
<li>
Why?
<ul>
<li>
What?
</li>
<li>
Events & Activities
</li>
<li>
Meet The Grads
</li>
</ul>
</li>
<li>
Events
<ul>
<li>
Opportunities
</li>
<li>
asd
</li>
</ul>
</li>
<li>
assd
</li>
<li>
Contact
<ul class="subMenu">
<li>
Numbers
<ul class="SuperSubMenu">
<li>
Person1
</li>
<li>
Person2
</li>
</ul>
</li>
<li>
Fax
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
You need to use direct descendant operators in your third-to-last CSS rule - the one which makes regular sub menus appear when hovering the main menu items. Otherwise this rule will also affect (i.e. make visible) the ul of the SuperSubMenus on hover of the main menu items. So change this selector:
nav ul li:hover ul {
display: block;
}
...to the following:
nav > ul > li:hover > ul {
display: block;
}
* {
margin: 0;
padding: 0;
}
body {
background-image: url(photo-1542831371-29b0f74f9713.jpg);
background-size: cover;
}
nav {
/* this is a tag */
height: 60px;
background-color: white;
display:flex;
}
nav a {
font-family: arial, sans-serif;
color: #222;
font-size: 18px;
line-height: 55px;
padding: 2.3px 14px;
text-decoration: none;
text-align: center;
display: block;
}
nav form {
max-width: 100%;
height: 60px;
}
nav ul {
display:flex;
list-style: none;
}
nav li:hover>a {
background: rgb(224, 224, 224);
cursor: pointer;
}
nav ul li ul {
display: none;
position: absolute;
background-color: rgba(255, 238, 238, 0.89);
backdrop-filter: blur(5px);
border-radius: 0px 0px 4px 4px;
}
nav > ul > li:hover > ul {
display: block;
}
nav ul li ul li ul {
display: none;
position: absolute;
top: 0;
right: 0;
-ms-transform: translate(100%,0);
-webkit-transform: translate(100%,0);
transform:translate(100%,0);
list-style: none;
}
.subMenu li:hover>.SuperSubMenu{
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>Wall of nothing</title>
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<nav id="navbar">
<form name="" method="" action="BUTTON%20TEST.html">
<input type="image" name="IB1" src="gradient-coding-logo-template_23-2148809439.jpg" width="70" height="60">
</form>
<ul>
<li>
About
<ul>
<li>
Expectations
</li>
<li>
FAQ
</li>
<li>
Laptop Program
</li>
</ul>
</li>
<li>
Why?
<ul>
<li>
What?
</li>
<li>
Events & Activities
</li>
<li>
Meet The Grads
</li>
</ul>
</li>
<li>
Events
<ul>
<li>
Opportunities
</li>
<li>
asd
</li>
</ul>
</li>
<li>
assd
</li>
<li>
Contact
<ul class="subMenu">
<li>
Numbers
<ul class="SuperSubMenu">
<li>
Person1
</li>
<li>
Person2
</li>
</ul>
</li>
<li>
Fax
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
you can do with simple CSS
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
<div class="dropdown">
<button class="dropbtn">Dropdown Menu</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
when over menu the menu slips in HTML.
Codes and view:
https://codepen.io/anon/pen/XvrJpx
Demo:
.menuu {
position: absolute;
z-index: 1;
}
.menuu ul {
text-align: center;
}
.menuu>ul>li {
list-style: none;
float: left;
margin: 5px;
}
.menuu>ul>li>a {
text-decoration: none;
text-transform: uppercase;
background-color: white;
padding: 5px;
font-weight: 600;
font-size: 16px;
}
.menuu ul li a:hover {
color: white;
background-color: black;
}
.menuu ul li ul {
display: none;
}
.menuu li:hover>ul {
display: block;
}
.menuu ul li ul li a {
text-decoration: none;
}
.menuu>ul>li>ul>li {
list-style: none;
text-align: center;
margin: 5px;
padding: 5px;
}
.icerik {
position: absolute;
top: 75px;
}
<div class="menuu">
<ul>
<li>
Anasayfa
</li>
<li>
c
<ul>
<li>
c1
</li>
</ul>
</li>
<li>
a
</li>
<li>
Programlama
<ul>
<li>
<a>Android</a>
</li>
<li>
Java
</li>
<li>
Php
</li>
<li>
Html
</li>
<li>
Css
</li>
<li>
Javascript
</li>
</ul>
</li>
<li>
Turizm
</li>
<li>
Origami
</li>
<li>
Bebek
<ul>
<li>
Bebeklerin Aylık Gelişimi
</li>
</ul>
</li>
<li>
İletişim
</li>
</ul>
</div>
<div class="icerik">Önceden İçerik Aşağı kayıyordu email de dediğiniz gibi projeme position absolute ekledim kaymıyor. Teşekkür ederim. Şimdi Tek sorun Bebek Bölümü ve C bölümü üstüne gelince yana kayıyorlar ve yanındakini de kaydırıyorlar</div>
Menu C and menu Bebek have submenu. When over menu the menu slips. I doesn’t would slip.
How I can resolve this problem?
I need your help.
All you have to do is remove the browsers default ul styles, as it is adding 40px of padding to the left, and position the sub-menu items absolutely.
In your case, this will work:
ul li ul {
padding: 0;
position: absolute;
}
To make the sub-menu easier to read, I would recommend having a background and some sort of border. eg:
ul li ul {
padding: 0;
position: absolute;
background: white;
border: 1px solid black;
}
Remove > ul from
.menuu li:hover {
display: block;
}
so that menu doesnt slip
Hope this is what you need
.menuu {
position: absolute;
z-index: 1;
}
.menuu ul {
text-align: center;
}
.menuu>ul>li {
list-style: none;
float: left;
margin: 5px;
}
.menuu>ul>li>a {
text-decoration: none;
text-transform: uppercase;
background-color: white;
padding: 5px;
font-weight: 600;
font-size: 16px;
}
.menuu ul li a:hover {
color: white;
background-color: black;
}
.menuu ul li ul {
display: none;
}
.menuu li:hover {
display: block;
}
.menuu ul li ul li a {
text-decoration: none;
}
.menuu>ul>li>ul>li {
list-style: none;
text-align: center;
margin: 5px;
padding: 5px;
}
.icerik {
position: absolute;
top: 75px;
}
<div class="menuu">
<ul>
<li>
Anasayfa
</li>
<li>
c
<ul>
<li>
c1
</li>
</ul>
</li>
<li>
a
</li>
<li>
Programlama
<ul>
<li>
<a>Android</a>
</li>
<li>
Java
</li>
<li>
Php
</li>
<li>
Html
</li>
<li>
Css
</li>
<li>
Javascript
</li>
</ul>
</li>
<li>
Turizm
</li>
<li>
Origami
</li>
<li>
Bebek
<ul>
<li>
Bebeklerin Aylık Gelişimi
</li>
</ul>
</li>
<li>
İletişim
</li>
</ul>
</div>
<div class="icerik">Önceden İçerik Aşağı kayıyordu email de dediğiniz gibi projeme position absolute ekledim kaymıyor. Teşekkür ederim. Şimdi Tek sorun Bebek Bölümü ve C bölümü üstüne gelince yana kayıyorlar ve yanındakini de kaydırıyorlar</div>
This is a double part fragment of dropdown menu with double part the issue is that I cannot make the two div be aside each other unless I use the div width to any ration.
the CSS code what I want is a method to display the two div below aside each other without using the width property in the html code.
.navbar ul li a{
text-decoration: none;
color: black;
padding: 16.2px;
display: block;
}
.navbar{
width: 100%;
height: 50px;
position: relative;
margin: 0;
padding: 0;
background-color: #c7ffff;
border:1px solid black;
}
.dropnavbar{
position: absolute;
margin: 0;
padding: 0;
height: 60px;/*can be negliacted if the default is auto*/
}
.active{
float: left;
text-align: center;
list-style: none;
width: 100px;
font-size: 15px;
}
.subnavbar{
display:none;
padding: 0;/*if forgotten the size of the dropdown nav will be greater than it's parrent*/
margin: 0;
}
.navbar li:hover .subnavbar{
display: block;
}
.navbar li:hover li,.navbar li:hover{
background-color:#e0ffff;
}
.subnavbar>li>a:hover{
background-color: aqua;
}
.subnavbar>li:nth-child(n+2){
border-top: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<link href="navbar.css" rel="stylesheet">
<title>DropDown NavBar Trial 3</title>
</head>
<body>
<header>
<div class="navbar">
<ul class="dropnavbar">
<li class="active">About
</li>
<li class="active">Branches
<ul class="subnavbar">
<li class="active">Egypt
</li>
<li class="active">USA
</li>
<li class="active">UAE
</li>
<li class="active">France
</li>
</ul>
</li>
<li class="active">Categories
<div style="width:auto;">
<div style="float:left; width:10%;">
<ul class="subnavbar">
<li class="active">Books
</li>
<li class="active">Electronic Devices
</li>
<li class="active">House Gadgets
</li>
<li class="active">Sport Equipments
</li>
</ul>
</div>
<div style="float:right;width:10%;">
<ul class="subnavbar">
<li class="active">Books
</li>
<li class="active">Electronic Devices
</li>
<li class="active">House Gadgets
</li>
<li class="active">Sport Equipments
</li>
</ul>
</div>
</div>
</li>
<li class="active">Paying
</li>
</ul>
</div>
</header>
</body>
</html>
I hope this example will help you out!!!!
* {
margin:0;
padding:0;
}
#nav {
list-style:none;
height:2em;
}
#nav li {
position:relative;
float:left;
width:192px;
background:#999;
text-align:center;
}
#nav li:hover {
background:#777;
}
#nav a {
display:block;
color:#000;
text-decoration:none;
line-height:2em;
}
/* --------- Drop Down -------- */
#nav ul {
position:absolute;
left:-999em;
top:2em;
list-style:none;
}
#nav li:hover ul {
left:0;
top:auto;
}
<ul id="nav">
<li>Link1</li>
<li>Link2
<ul>
<li>Drop1</li>
<li>Drop2</li>
<li>Drop3</li>
</ul>
</li>
<li>Link3</li>
</ul>
I´m trying to make a responsive navigation bar, I wan´t a element in the right of the nav, like this: Example
I was putting float:right, but it doesn´t work, after that, I tried with margin-left, but if I use margin left, it won´t be responsive. The element with the float left is a li element. This is all my HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Responsive Menu</title>
</head>
<body>
<div class="container">
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li class="test">
I amsterdam
</li>
<li class="test">
La Ciudad
<ul>
<li>
Museos
<ul>
<li>Museo van Gogh</li>
<li>Rijksmuseum</li>
<li>Casa de Ana Frank</li>
<li>Museo Casa de Rembrandt</li>
</ul>
</li>
<li>
Lugares
<ul>
<li>Vondelpark</li>
<li>Barrio de Jordan</li>
<li>Red Light Distrit</li>
</ul>
</li>
</ul>
</li>
<li class="test">
Alojamiento
<ul>
<li>
Hoteles
<ul>
<li>Los mejores Hoteles</li>
<li>Hoteles más económicos</li>
</ul>
</li>
<li>
Albergues
</li>
</ul>
</li>
<li class="test">
Eventos
<ul>
<li>
Concierto Kanye West
</li>
<li>
Ajax - Real Madrid
</li>
<li>
Amsterdam Fashion Week
</li>
</ul>
</li>
<li class="languages">
Languages
<ul>
<li>
English
</li>
<li>
Español
</li>
<li>
Français
</li>
<li>
Deutsch
</li>
</ul>
</li>
</ul>
</div>
And my CSS, I thought that it could be a problem for other styles, but the class .languages is the last one, them, I tried with an ID, but I got this:
The CSS is this:
body, nav, ul, li, a {
margin: 0;
padding: 0;
}
body {
width: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: red;
}
a {
text-decoration: none;
}
.container {
width: 100%;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background:#175e4c;
position: relative;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 10px 15px;
color:#fff;
*zoom: 1;
}
.nav > li {
float: left;
border-top: 1px solid #104336;
z-index: 200;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
z-index: 100;
}
.nav li li a {
display: block;
background: #1d7a62;
position: relative;
z-index:100;
border-top: 1px solid #175e4c;
}
.nav li li li a {
background:#249578;
z-index:200;
border-top: 1px solid #1d7a62;
}
#languages{
float: right;
}
I'm not sure why it wasn't working for you. Using your example code but simply adding id="languages" to the li element seems to work. See https://jsfiddle.net/eaLow5h3/
In your css3 you have id as a selector (#languages)and not a class! Try to change the '#' to '.' . If this doesnt work add to your css this path
.nav > li.languages{
float: right;
}
I want to make my navigation bar with dropdown, but there is always distance on left side of the div dropdown. How do I remove that distance?
Here is the code of the navigation bar:
.navbar {
background-color: #6b6b6b;
margin:10px;
}
.navbar ul {
display: inline;
color: white;
font-family: "Agency FB";
font-weight: bold;
text-transform: uppercase;
list-style-type: none;
font-size: 24px;
}
.navbar ul li {
display: inline-block;
padding-right: 10px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
.navbar ul li:hover {
background-color: #cccccc;
}
.navbar ul li ul {
display: none;
position: absolute;
margin-left:-10px;
margin-top:5px;
background-color:white;
color:#6b6b6b;
padding-left:-20px;
font-size:20px;
}
.navbar ul li ul li {
display: block;
}
.navbar ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
And here is the code of html navigation bar (without link):
<div class="navbar">
<ul>
<li>
Home
</li>
<li>
Category
<ul>
<li>Batik</li>
<li>Party</li>
<li>Office</li>
<li>Casual</li>
<li>Sport</li>
</ul>
</li>
<li>
Information
<ul>
<li>
About Us
</li>
<li>
Cara Belanja
</li>
<li>
Our Location
</li>
</ul>
</li>
<li>
Contact Us
</li>
</ul>
</div>
Thanks before :)
I remade it for you kinda, I'm sure you'll get the jist of it
<div id="nav">
<ul>
<li>Home</li>
<li>Category
<ul>
<li>Blah</li>
<li>Blah</li>
<li>Blah</li>
</ul>
</li>
<li>Information
<ul>
<li>Blah</li>
<li>Blah</li>
<li>Blah</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
http://jsfiddle.net/un64F/3/ for css
I'm not sure I understand what you are asking for exactly but does adding padding-left: 0; to the .navbar ul style have the effect you want?