Float: right doesn´t work with an element - html

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;
}

Related

Super Sub menu Not appearing like supposed to

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>

The menu slips in HTML

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>

Nested list does not appears in hover css

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>

New to CSS/HTML - dropdown options are offset?

I'm a total newbie to CSS and HTML but I'm slowly constructing a website for uni. One thing that's bugging me: I can't figure out how to align the dropdown options. They're slightly off-centre, as shown in the screenshot
here. I'll paste the actual CSS below too (the preview doesn't work so don't bother with that. The code actually does work when run in Brackets, however):
ul {
list-style: none;
padding: 0px;
margin: 0px;
position: absolute;
padding-left: 0px;
}
ul li {
display: block;
position: relative;
float: left;
border:1px solid #ed85c4;
text-align:center;
}
li ul {
display: none;
}
ul li a {
display: block;
background: #ffeff8;
padding: 4px 20px 2px 25px;
text-decoration: none;
white-space: nowrap;
color: #ed85c4;
font-family: Luna;
font-size: 14px;
}
ul li a:hover {
background: #f1dae8;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #ffeff8;
color: #ed85c4
}
li:hover li a:hover {
background: #f1dae8;
color: #d771ae
}
li:hover li {
color:#d771ae
}
#drop-nav li ul li {
border-top: 0px;
}
ul {
display:table;
margin:auto;}
}
And here's the html (ignore that the links are currently empty):
<!DOCTYPE html>
<html>
<head><meta charset="UF-8">
<title>Happea Organic Restaurant</title>
<link href="style.css" rel ="stylesheet" type ="text/css">
</head>
<body>
<center><img src="images/eskimoo.png" width="600"></center>
<ul id="drop-nav">
<li>home</li>
<li>about
<ul>
<li>history</li>
<li>values</li>
<li>the truck</li>
<li>produce info.</li>
</ul>
</li>
<li>menus
<li>events
<ul>
<li>upcoming</li>
<li>past</li>
<li>booking/hiring</li>
</ul>
</li>
<li>find us
<ul>
<li>truck tracker</li>
<li>offices</li>
</ul>
</li>
<li>contact
<ul>
<li>message us</li>
<li>newsletter</li>
</ul>
</li>
<li>extras
<ul>
<li>gallery</li>
<li>competitions</li>
<li>mascot</li>
</ul>
</li>
</ul>
<br><br>
<c><img src="images/pad.png" width=1000></c>
</body>
<br><br><br>
</html>
Thanks in advance!

html / css menu hitbox

I wrote a code using different internet source and I ran into a problem every object that's in the bottom of the menu parts cannot be interacted the menu interferes everything below him where the dropdown falls . the hitbox of the menu seems to included the dropdown even when its not shown
body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 23px;
}
#nav {
background-color:1a1a1a;
opacity: 0.9;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: right;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 0px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}
.left-to-right {
text-align: left;
}
<body dir-"rtl"><div id="nav">
<div id="nav_wrapper">
<div>
<ul <ul dir="RTL">
<li> תרמילים
<ul class="left-to-right">
<!-- <li class="backpacks" id="firstlight-20l"> FirstLight 20L </li>
<li class="backpacks" id="firstlight-30l"> FirstLight 30L </li>
<li class="backpacks" id="firstlight-40l"> FirstLight 40L </li>-->
<li class="backpacks"> rotation180° Professional 38L Deluxe </li>
<li class="backpacks"> rotation180° Horizon 34L </li>
<li class="backpacks"> rotation180° Panorama 22L </li>
<!-- <li class="backpacks" id="rotation180-travel-away"> rotation180° Travel Away 22L </li>-->
<li class="backpacks" id="rotation180-trail"> rotation180° Trail 16L </li>
</ul>
</li>
<li> תיקי מצלמות ספורט
<ul class="left-to-right">
<li>GP 1 kit case
</li>
<li>GP 2 kit case
</li>
</ul>
</li>
<li> אביזרים
<ul class="left-to-right">
<li>r180º Panorama/Horizon Photo Insert
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
Help will be appreciated
edit:
the menu is working but everything below him in the area where the dropdown fals dosent