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>
Related
My Dropdown menu opens up but it goes down under behind the screen like unless I increase the navbar height it isn't visible.
here is my code.
I want it to come on top of everything so the user can actually see it.
It goes underneath the nav section, so is not visible.
.sub-menu {
display: none;
margin-top: 0 !important;
}
.navbar-header .navbar-ul .main-menu-items .about-us-menu #about-sub-menu {
z-index: 100;
position: relative;
}
.navbar-header .navbar-ul .about-us-menu .sub-menu {
width: 150px;
}
.navbar-header .navbar-ul .about-us-menu .sub-menu ul li a {
padding-top: 10px;
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
.sub-menu ul li {
margin: 15px;
width: 120px;
position: relative;
/* padding: 15px; */
}
.navbar-header .navbar-ul .courses-sub-menu:hover .sub-menu ul li a {
width: 150px;
margin: 0 !important;
padding-top: 10px;
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
.navbar-header .navbar-ul .about-us-menu .sub-menu {
width: 180px;
}
.navbar-header ul li:hover .sub-menu {
display: block !important;
position: absolute;
background: #333333;
margin-top: 15px;
}
.sub-menu ul:hover {
display: block !important;
}
.navbar-header ul li:hover .sub-menu ul {
display: block;
/* margin: 10px; */
}
.sub-menu ul li:hover {
display: block;
background: #f5f5f7;
color: black !important;
}
.sub-menu ul li a {
color: #f5f5f7;
}
.navbar-header ul li:hover .sub-menu ul li {
display: block !important;
color: black;
width: 150px;
padding: 0 !important;
border-radius: 0;
text-align: center;
}
.sub-menu ul li a:hover {
color: black;
}
<div class="navbar-header" style="padding: 0; margin: 0; ">
<ul class="navbar-ul">
<div class="main-menu-items">
<li>
<a routerLink="/home"><img src="../../../assets/xyz" class="navbar-logo" alt=""></a>
</li>
<!-- logo -->
<!-- <li><a routerLink="/home">Home</a></li> -->
<!-- <li><a routerLink="/aboutus">About Us</a></li> -->
<li class="about-us-menu"><a routerLink="#">About Us</a>
<div class="sub-menu">
<ul id="about-sub-menu">
<li>
Gallery
</li>
<li>
Testimonials
</li>
<li>
Blogs
</li>
</ul>
</div>
</li>
<li class="courses-sub-menu"><a routerLink="/courses">Courses</a>
<div class="sub-menu">
<ul>
<li>
Science
</li>
<li>
Physics
</li>
<li>
Biology
</li>
<li>
Mathematics
</li>
<li>
Chemistry
</li>
<li>
Business Studies
</li>
<li>
Accountancy
</li>
<li>
Economics
</li>
<li>
Psychology
</li>
<li>
SAT/ACT
</li>
</ul>
</div>
</li>
Here you go.
Check out these CSS properties to achieve your desired result.
.main-menu-items {
background: none;
color: Black;
padding: 12px 26px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
min-width: 160px;
}
.sub-menu {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.sub-menu a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.sub-menu a:hover {background-color: #f1f1f1}
.dropdown:hover .sub-menu {
display: block;
position: absolute;
left: 100%;
top: 0;
}
.nav-wrapper {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="navbar-header">
<div class="nav-wrapper">
<div class="dropdown">
<button class="main-menu-items">About Us</button>
<div class="sub-menu">
Gallery
Testimonials
Blogs
</div>
</div>
</div>
<div class="nav-wrapper">
<div class="dropdown">
<button class="main-menu-items">Courses</button>
<div class="sub-menu">
Science
Physics
Biology
Mathematics
Chemistry
Business Studies
Accountancy
Economics
Psychology
SAT/ACT
</div>
</div>
</div>
</div>
</body>
</html>
Here's my HTML:
<body>
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fas fa-bars"></i>
</span>
logo
<ul class="main-nav" id="js-menu">
<li>
Home
</li>
<li>
Products
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
<li>
Blog
</li>
</ul>
</nav>
</body>
Here's my CSS:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Josefin Sans", sans-serif;
}
.navbar {
font-size: 18px;
padding-bottom: 10px;
}
.main-nav {
list-style-type: none;
display: none;
}
.nav-links,
.logo {
text-decoration: none;
color: black;
}
.main-nav li {
text-align: center;
margin: 15px auto;
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
}
.navbar-toggle {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
color: rgba(255, 255, 255, 0.8);
font-size: 24px;
}
.active {
display: block;
}
And this is the output I'm getting:
I'd like my output to be like this instead (ignore the spacing difference, just my screenshot, but have them split in the center like so):
What's the best way of doing this?
I'm thinking of creating another unorder list and moving it, but I don't know how to do that.
Make use of justify-content: space-between;.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
ul {
list-style-type: none;
}
.nav-links, .logo {
text-decoration: none;
color: #000;
}
.navbar {padding: 20px;}
.navbar, ul {display: flex; flex-direction:row;}
ul li {padding: 0 5px;}
.wrapper {display:flex; justify-content: space-between; width:100%; }
<nav class="navbar">
logo
<div class="wrapper">
<ul class="main-nav" id="js-menu">
<li>
Home
</li>
<li>
Products
</li>
<li>
About Us
</li>
</ul>
<ul class="ul2">
<li>
Contact Us
</li>
<li>
Blog
</li>
</ul>
</div>
</nav>
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>
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>
I am learning html and css for front-end web development. While writing code for drop-down box in navigation-menu, i am not getting the desired output. In the navigation menu drop down is opening at the left corner but the navigation link is somewhere else. Please help.
HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<div id="wpback"></div>
<div id="wallpaper" ></div>
<div id="name"> <!
========================Name of Company================= >
<header>
<h1 class="prince">PRINCE Institute</h1>
<input type="button" value="Log In" style="float:right"></input>
<input type="button" value="Sign Up" style="float:right">
</input>
</header>
What do you want to know?<br><input type="text"></input>
<input type="button" value="Search"></input>
</div>
<div id="menu"> <!
========================Navigation Menu================= >
<ul>
<li>Home</li>
<li>About
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul></li>
<li>Courses
<ul>
<li>Java</li>
<li>Python</li>
<li>Data Base Management System</li>
<li>Machine Learning</li>
<li>Blockchain</li>
</ul></li>
<li>Settings
<ul>
<li>Your Profile</li>
<li>Your Cart</li>
<li>Mode</li>
</ul></li>
</ul>
</div>
<div> <!
========================Content=========================== >
<ul >Courses Offered:
<li>Java</li>
<li>Python</li>
<li>Machine Learning</li>
<li>Block Chain</li>
<li>Data Base Management System</li></ul>
</div>
</body>
</html>
CSS code:
body {
font-family: lucida console;
font-size: 14px;
color: white;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
#name {
position: relative;
top: 0;
left: 0;
}
.prince {
color: white;
text-align: center;
padding: 5px;
background-color: rgba(65, 15, 0, 0.5);
}
#wpback {
background-color: black;
position: absolute;
width: 100%;
height: 100%;
}
#wallpaper {
background-image: url('tech.jpg');
opacity: 0.1;
position: absolute;
width: 100%;
height: 100%;
}
#menu {
margin-top: 10px;
background-color: rgba(65, 15, 0, 1);
height: 50px;
position: relative;
}
#menu ul {
padding: 0;
margin: 0;
}
#menu ul li {
list-style: none;
display: inline;
}
#menu ul li a {
margin: 10px;
padding: 16px;
text-decoration: none;
color: white;
line-height: 50px;
}
#menu ul li a:hover {
background-color: gray;
color: black;
transition: ease-in-out 0.2s;
}
#menu ul li ul li {
display: none;
}
#menu ul li:hover ul li {
background-color: silver;
display: block;
width: 220px;
}
#menu ul li:hover ul li a {
margin: 10px;
padding: 15px;
text-decoration: none;
line-height: 50px;
color: black;
}
#menu ul li ul li a:hover {
background-color: gray;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<div id="wpback"></div>
<div id="wallpaper"></div>
<div id="name">
<!
========================Name of Company================= >
<header>
<h1 class="prince">PRINCE Institute</h1>
<input type="button" value="Log In" style="float:right"></input>
<input type="button" value="Sign Up" style="float:right">
</input>
</header>
What do you want to know?<br><input type="text"></input>
<input type="button" value="Search"></input>
</div>
<div id="menu">
<!
========================Navigation Menu================= >
<ul>
<li>Home</li>
<li>About
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul>
</li>
<li>Courses
<ul>
<li>Java</li>
<li>Python</li>
<li>Data Base Management System</li>
<li>Machine Learning</li>
<li>Blockchain</li>
</ul>
</li>
<li>Settings
<ul>
<li>Your Profile</li>
<li>Your Cart</li>
<li>Mode</li>
</ul>
</li>
</ul>
</div>
<div>
<!
========================Content=========================== >
<ul>Courses Offered:
<li>Java</li>
<li>Python</li>
<li>Machine Learning</li>
<li>Block Chain</li>
<li>Data Base Management System</li>
</ul>
</div>
</body>
</html>
When i am putting no options in the navigation menu then the options Home, About, Couses & Settings are in line but when i am adding options in the menu in dropdown the individual options come downward.
Aligned Dropdown Content
Determine whether the dropdown content should go from left to right or
right to left with the left and right properties.
CSS code
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
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: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
And HTML code is
<div class="dropdown" style="float:left;">
<button class="dropbtn">Left</button>
<div class="dropdown-content" style="left:0;">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown" style="float:right;">
<button class="dropbtn">Right</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>