I'm making a navigation menu.
I got it all working now but when the sub menu pops up all the html is distorting.
All the div's below are going downwards.
Is there somebody who can help me?
Here is the html with CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Show Hide Dropdown Using CSS</title>
<style type="text/css">
#body
{
width: 1200px;
}
ul{
padding: 0;
list-style: none;
}
ul li{
float: left;
width: 100px;
text-align: center;
}
ul li a{
display: block;
padding: 5px 10px;
color: #333;
background: #f2f2f2;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #939393;
}
ul li ul{
display: none;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
#uldiv
{
width:1200px;
float:left;
}
#secdiv
{
width:1200px;
float:left;
}
</style>
</head>
<body>
<div id="uldiv">
<ul>
<li>Home</li>
<li>About</li>
<li>
Products
<ul>
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
<div id="secdiv">
here some text whish will not move while the menu is popping up.
</div>
</body>
</html>
You need to add :
ul li:hover ul {
display: block; /* display the dropdown */
position:absolute; /* <--- this line */
}
To take the submenu out of the document flow and doesn't push the below content down.
You also need to add :
ul li ul li{
float:none;
}
So that the sub menu items don't display on the same line and stack below each other.
DEMO
Full code :
#body {
width: 1200px;
}
ul {
padding: 0;
list-style: none;
}
ul li {
float: left;
width: 100px;
text-align: center;
}
ul li a {
display: block;
padding: 5px 10px;
color: #333;
background: #f2f2f2;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
/* display the dropdown */
position:absolute;
}
ul li ul li{
float:none;
}
#uldiv {
width:1200px;
float:left;
}
#secdiv {
width:1200px;
float:left;
}
<div id="uldiv">
<ul>
<li>Home
</li>
<li>About
</li>
<li> Products
<ul>
<li>Laptops
</li>
<li>Monitors
</li>
<li>Printers
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</div>
<div id="secdiv">here some text whish will not move while the menu is popping up.</div>
Give position:absolute to the ul
Fiddle
ul li ul {
position:absolute;
display: none;
}
Related
I am trying to create a dropdown menu with CSS. When I hover on menu item, it doesn't work as expected. It does not show any categories below that item, I don't know why.
I do not want to use JavaScript, I want to use only pure css.
https://jsfiddle.net/3dovsL0g/
*{
margin:0px;
padding:0px;
}
#container ul{
list-style:none;
}
#container ul li{
background-color:#3c3e94;
width:150px;
border:1px solid white;
height:50px;
line-height: 50px;
text-align:center;
float:left;
color:white;
font-size:18px;
position:relative;
}
#container ul ul{
display:none;
}
#container ul li:hover{
background-color:#388222;
}
#container ul li:hover > ul{
display:block;
}
#container ul ul ul{
transform:translateX(100%);
top:0px;
position:absolute;
}
h4{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
<div id="container">
<ul>
<li><h4>Home</h4></li>
<li><h4>About</h4></li>
<li><h4>Entertainment</h4></li>
<ul>
<li><h4>Hollywood</h4></li>
<li><h4>Jollywood</h4></li>
<ul>
<li><h4>steve</h4></li>
<li><h4>jobs</h4></li>
<li><h4>john</h4></li>
</ul>
<li><h4>Bollywood</h4></li>
</ul>
<li><h4>Contact</h4></li>
</ul>
</div>
You'll need to place sub-menus inside the hovering elements, so that they are their child elements and then simply use class to target them. Here try this.
.hasSub:hover .sub-menu{
display: block !important;
}
.hasSub1:hover .sub-menu1{
display: block !important;
}
*{
margin:0px;
padding:0px;
}
#container ul{
list-style:none;
}
#container ul li{
background-color:#3c3e94;
width:150px;
border:1px solid white;
height:50px;
line-height: :50px;
text-align:center;
float:left;
color:white;
font-size:18px;
position:relative;
}
#container ul ul{
display:none;
}
#container ul li:hover{
background-color:#388222;
}
#container ul ul ul{
transform:translateX(100%);
top:0px;
position:absolute;
}
h4{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.hasSub:hover .sub-menu{
display: block !important;
}
.hasSub1:hover .sub-menu1{
display: block !important;
}
<div id="container">
<ul>
<li><h4>Home</h4></li>
<li><h4>About</h4></li>
<li class="hasSub"><h4>Entertainment</h4>
<ul class="sub-menu">
<li><h4>Hollywood</h4></li>
<li class="hasSub1"><h4>Jollywood</h4>
<ul class="sub-menu1">
<li><h4>steve</h4></li>
<li><h4>jobs</h4></li>
<li><h4>john</h4></li>
</ul>
</li>
<li><h4>Bollywood</h4></li>
</ul>
</li>
<li><h4>Contact</h4></li>
</ul>
</div>
and the fiddle: https://jsfiddle.net/kpdwf9th/1/
Use this code , and change it menu with dropDown
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
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;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
You need to nest your <ul> tags within each <li> element. Semantically, sub items should be children to their parents.
.nav { /* style nav bar */
display: flex;
color: #fff;
list-style: none;
padding: 0;
}
.nav li { /* style ALL li tags */
position: relative;
padding: 12px;
background-color: #333;
}
.nav li > ul { /* hide all ul tags at first */
display: none;
list-style: none;
padding: 0;
position: absolute;
z-index: 1;
}
.nav li:hover > ul { /* show ul tags when parent li is hovering */
display: block;
}
.nav li > ul > li > ul { /* move 3rd layer ul to the right */
left: 100%;
top: 0;
}
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Entertainment
<ul>
<li>Hollywood</li>
<li>Jollywood
<ul>
<li>steve</li>
<li>jobs</li>
<li>john</li>
</ul>
</li>
<li>Bollywood</li>
</ul>
</li>
<li>Contact</li>
</ul>
I've got 5 li on my page.
One of theme (the third) is higher than the other. I would like them to horizontally align to the center of this biggest LI. However, it's aligning on the top of it.
I've tried to use "Vertical-align: middle" but it doesn't work.
Here is my actual code:
<link rel="stylesheet" href="style2015.css" />
<div id="menu">
<ul>
<li>Portfolio
<ul>
<li>Sous-item 1</li>
<li>Sous-item 2</li>
<li>Sous-item 3</li>
</ul>
</li>
<li>Projets
</li>
<li id="logo"></li>
<li>A propos</li>
<li>Contact</li>
</ul>
</div>
Css:
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:0;
background-color:black;
display: inline;
vertical-align: middle;
}
#menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu li ul {
position:absolute;
}
#menu {
height:30px;
}
/* Logo */
#logo{
height: 190px;
width: 266px;
background-color:black;
}
#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
width: 700px;
/* some fixed width so, menu doesn't fall on next line*/
}
#menu li {
/* float: left; you can't align a floated element easily */
margin: auto;
padding: 0;
background-color: black;
display: inline-block;
vertical-align: middle;
}
#menu li a {
display: block;
width: 100px;
color: white;
text-decoration: none;
}
#menu li a:hover {
color: #FFD700;
}
#menu ul li ul {
display: none;
}
#menu ul li:hover ul {
display: block;
}
#menu li:hover ul li {
float: none;
}
#menu li ul {
position: absolute;
}
#menu {
height: 30px;
}
/* Logo */
#logo {
height: 190px;
width: 266px;
background-color: black;
}
<div id="menu">
<ul>
<li>Portfolio
<ul>
<li>Sous-item 1
</li>
<li>Sous-item 2
</li>
<li>Sous-item 3
</li>
</ul>
</li>
<li>Projets
</li>
<li id="logo"></li>
<li>A propos
</li>
<li>Contact
</li>
</ul>
</div>
If i got your question correct, then this is what you need to do. I have just made the required changes, rest of code is all yours.
here is the HTML:
http://codepen.io/anon/pen/epvNRG
<select>
<red>
</select>
.
^ is what i tried to use but it doesnt look as good! thanks
What I need:
A dropdown menu on hover. When cursor is on 'glossary' have a dropdown menu below glossary that can say anything! Thanks! Please make it the same size as the glossary box! Aparrt from that, a little transparancy would be cool too!
Thanks!
My suggestion to you would be to either learn some bootstrap becasue it makes a lot of the css coding and such a whole lot easier, or do a quick google search before asking on the form. Anyways:
html:
<html>
<head>
<meta charset="UTF-8">
<title>Watts</title>
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<ul>
<li class="highlight">Home</li>
<li>References</li>
<li>Glossary</li>
<li>
Products ▾
<ul class="dropdown">
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS:
body
{
margin: 0;
padding: 0;
background-color: #ccc;
} /* End of body rule */
ul
{
list-style: none;
background-color: #444; /* A very dark shade of grey as a background colour. */
text-align: center;
margin: 0;
padding: 0;
} /* End of ul rule */
li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
} /* End of li rule */
a
{
color: #fff; /* A white colour. */
text-decoration: none;
display: block;
transition: 0.65s;
} /* End of a rule */
a:hover
{
background-color: #005f5f; /* rgb(0, 95, 95) - A colour similar to teal. */
} /* End of a:hover rule */
.highlight a /* Makes the block of the navigation page that you are on white on the navigation bar. */
{
background-color: #fff; /* A white background colour. */
cursor: default;
color: #444
} /* End of .highlight a rule */
ul{
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li{
display: inline-block;
position: relative;
line-height: 21px;
text-align: left;
}
ul li a{
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #939393;
}
ul li ul.dropdown{
min-width: 125px; /* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
}
ul li ul.dropdown li{
display: block;
}
You can try this pure HTML/CSS Menu:
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
nav { width:100%; background:#000; display:inline-block;}
nav ul { margin:0; padding:0;}
nav ul li { margin:0; padding:0; list-style:none; display:inline-block; cursor:default;}
nav ul li a { color:#fff; padding:10px; font:15px 'Roboto', Arial, Helvetica, sans-serif; text-decoration:none; display:inline-block;}
nav > ul > li { float:left;}
nav ul li:hover > a { color:#fff; background:#005f5f;}
nav ul li a.active { color:#fff; background:#3b4747;}
nav ul ul { width:auto; min-width:200px; display:none; background:#131313; position:absolute; z-index:555; text-align:left;}
nav li:hover > ul { display:block;}
nav ul ul ul { left:100%; top:0;}
nav ul ul li { width:100%; display:block; float:none;}
nav ul ul a { width:100%; padding:8px 15px; display:block; color:#fff; border-bottom:1px solid #111;}
nav ul ul li:hover > a { background:#005f5f; color:#fff;}
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li><a>Services</a>
<ul>
<li>Sample Menu</li>
<li>Sample Menu</li>
<li>Sample Menu</li>
<li>Sample Menu</li>
</ul>
</li>
<li>Blog</li>
<li><a>Support</a>
<ul>
<li>Sample Menu</li>
<li>Sample Menu</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
On the 'shop' tab I have 5 drop down options that link to a specific part of content on the shop page. However my code does not seem to work, as when you hover over the shop tab when on the home page, the navigation appears inline with the rest of the navigation, whereas I would like the content to display below the word shop as a drop-down list.
This is the HTML
<pre>
<div id="navigation">
<ul class="nav-bar">
<li>home</li>
<li class="current">shop
<ul>
<li>Vintage Collection</li>
<li>Sofas & Beds</li>
<li>Tables & Chairs</li>
<li>Electricals</li>
<li>Storage</li>
</ul>
</li>
<li>about</li>
<li> get involved </li>
<li> contact us</li>
</ul>
</div>
</pre>
and this is the CSS
/* drop down list */
#navigation ul ul {
display: none;
top: 100%;
left:0;
background:#A3CC39;
padding: 0;
align-content: center;
width: 100%;
}
#navigation ul ul li {
float: none;
width: 100%;
margin-left:0px;
}
#navigation ul ul a {
line-height: 120%;
padding: 10px 15px;
}
#navigation ul ul ul {
top: 0;
left: 100%;
}
#navigation ul li:hover > ul {
display: block;
}
I have a feeling the reason it isn't working is to do with my code at the very top of my css which styles the original navigation bar. Really appreciate any help
EDIT: this is rest of the css for the navigation as a whole:
* {
margin:0;
border:0;
padding:0;
}
.wrapper {
max-width: 1000px;
margin: 0px auto;
clear: both;
text-align: center;
}
li {
display: inline;
list-style-type: none;
}
#navigation a:hover{
color: black;
background-color: #6A8F28;
}
#navigation a {
text-decoration: none; color:white;
}
a:visited {
text-decoration: none;
}
Just learning HTML and CSS and wondering how I could have an expandable list within an expandable list. I have the problem that the second expandable list is already expanded when I click the first expandable list. Yo dawg, I heard you like expandable lists....
Here is my code:
<!DOCTYPE html>
<head>
<title>Sample</title>
</head>
<style>
body {
padding: 0;
margin: 0;
font-size: 18px;
font-family: Arial;
}
#nav {
background-color: black;
}
#navbar {
margin: auto;
width: 960px;
text-align:left;
}
#nav ul{
position: relative;
list-style-type: none;
padding:0;
margin: 0;
}
#nav ul li {
display: inline-block;
}
#nav ul li a {
text-decoration: none;
color: white;
padding: 15px;
display: block;
}
#nav ul li:hover {
background-color: silver;
}
#nav ul ul{
display: none;
margin: 0;
background-color: black;
position: absolute;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul li {
display:block;
}
#nav ul ul ul{
display: none;
position: absolute;
margin-left: 110px;
margin-top: -52px;
background-color: black;
}
#nav ul ul li:hover ul{
display: block;
}
#nav ul ul ul li {
display: block;
}
</style>
<body>
<div id="nav">
<div id="navbar">
<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li>Social
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>YouTube
<ul>
<li>Our Page</li>
<li>Top Videos</li>
<li>Popular</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
Use the child (direct descendant) selector > instead of the descendant selector
#nav ul>li:hover>ul {
display: block;
}
Demo
What you are currently doing is saying: when hovering over the li set any decendant ul, no matter what the depth, to display:block.
The new code says: when hovering over the li set any uls that are children (or direct descendants) of that li to display:block. Any uls nested deeper will be untouched.