I am building a website for a non-profit company an d I need a dropdown menu in it.
I found this tut on youtube
"https://www.youtube.com/watch?v=wHFflWvii3M"
As far as I can see Iḿ doing everything just as is is supposed to be done. But somehow the menu will not react as in dropdown.
What is going wrong?
Here is a copy of my html
<!DOCTYPE html>
<html>
<head>
<title>dropdown </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="menu-bar">
<ul>
<li class="active"><a href="#">Home<a></li>
<div class="sub-menu-1">
<ul>
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
<li>sub4</li>
<li>sub5</li>
<li>sub6</li>
<li>sub7</li>
</ul>
</div>
<li>Nieuws</li>
<li>de Klomp</li>
<li>de Werkplaats</li>
<li>Activiteiten</li>
<li>Agenda</li>
<li>Archief</li>
<li>Contact</li>
</ul>
</div>
</body>
</body>
</html>
And here of my css code//
*
{
padding: 0;
margin: 0;
}
body
{
background-image: url(deKlomp.jpg);
background-size: cover;
background-attachment: fixed;
box-sizing: border-box;
font-family: sans-serif;
}
.menu-bar
{
background: rgb(0,100,0);
text-align: center;
}
.menu-bar ul
{
display: inline-flex;
list-style: none;
color:#fff
}
.menu-bar ul li
{
widows: 120px;
margin: 15px;
padding: 12px;
}
.menu-bar ul li a
{
text-decoration: none;
color:#fff;
}
.active, .menu-bar ul li:hover
{
background: #2bab0b;
border-radius:3px;
}
.menu-bar .fa
{
margin-right: 8px;
}
.sub-menu-1
{
display:none;
}
.menu-bar ul li:hover .sub-menu-1
{
display: block;
position: absolute;
background: rgb(0,100,0);
margin-top: 15px;
margin-left: -15px;
}
Your code its not exactly same like on this video tutorial ;)
First: you have /body twice
Second: "li" closing should be after you sub-menu div, not after
<li class="active"><a href="#">Home<a>
All here:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>dropdown </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="menu-bar">
<ul>
<li class="active"><a href="#">Home<a>
<div class="sub-menu-1">
<ul>
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
<li>sub4</li>
<li>sub5</li>
<li>sub6</li>
<li>sub7</li>
</ul>
</div>
</li>
<li>Nieuws</li>
<li>de Klomp</li>
<li>de Werkplaats</li>
<li>Activiteiten</li>
<li>Agenda</li>
<li>Archief</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
}
body{
background-image: url("https://homepages.cae.wisc.edu/~ece533/images/watch.png");
background-size: cover;
background-attachment: fixed;
box-sizing: border-box;
font-family: sans-serif;
}
.menu-bar{
background: #005400;
width:100%;
padding:20px;
}
.menu-bar > ul{
width:85%;
margin:auto;
display: flex;
justify-content:space-around;
}
.menu-bar ul li{
list-style: none;
}
.menu-bar > ul > li a{
padding: 10px 20px 10px 20px;
color:#ffffff;
text-decoration:none;
}
.sub_menu{
display:none;
}
.menu-bar ul li ul.sub_menu li{
padding:20px;
width:100px;
}
.menu-bar ul li:hover > ul.sub_menu{
display: block;
position:absolute;
background:#005400;
margin-top:20px;
}
.menu-bar ul li a:hover{
background:#2BAB0B;
padding: 10px 20px 10px 20px;
border-radius:5px;
}
<div class="menu-bar">
<ul>
<li class="active">Home
<ul class="sub_menu">
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
</li>
<li>News
<ul class="sub_menu">
<li>News1</li>
<li>News2</li>
<li>News3</li>
</ul>
</li>
<li>Agenda</li>
<li>Archief</li>
<li>Contact</li>
</ul>
</div>
Related
I want to program a dropdown-menu. The code I am using is only css and I use flexbox to make the drop-down-menu.
However, my problem is to position my sub-menus that they are directly under my main menu. How can I do that?
I've looked for an answer but I didn't found a thread, that describes exactly my problem.
Dropdown menu overlapping it's container inside flexbox
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Arial, sans-serif;
font-size: 62.5%;
}
* {
box-sizing: border-box;
}
.content {
margin: 0 15%;
}
/* ########################################################################## */
/* Dropdownmenu */
/* ########################################################################## */
nav {
background-color: #F0F0F0;
font-size: 1.8rem;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
color: #666;
}
nav ul {
display: flex;
}
nav>ul li {
padding: 10px;
}
nav>ul>li>ul {
position: absolute;
display: flex;
flex-direction: column;
}
nav ul li ul li {
display: none;
}
.align-menu-right {
margin-left: auto;
}
.active {
background-color: #999;
}
.current-menu>a {
color: #E95D0F;
}
nav>ul>li:hover ul>li {
display: block;
}
nav>ul>li:hover,
nav>ul>li>ul li:hover {
background-color: #CCC;
}
nav>ul>li:hover>a,
nav>ul>li>ul li:hover>a {
color: #FFF;
}
.current-menu:hover>a {
color: #E95D0F;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Dropdownmenü</title>
<link rel="stylesheet" type="text/css" href="src/css/styles.css">
</head>
<body>
<div class="content">
<!-- ########################################################################## -->
<!-- Dropdownmenu -->
<!-- ########################################################################## -->
<div class="nav-container">
<nav>
<ul class="flex-container">
<li class="current-menu">Menü 1
<ul>
<li class="current-menu">Untermenü 1-1</li>
<li>Untermenü 1-2</li>
<li>Untermenü 1-3</li>
</ul>
</li>
<li>Menü 2
<ul>
<li>Untermenü 2-1</li>
<li>Untermenü 2-2</li>
<li>Untermenü 2-3</li>
</ul>
</li>
<li class="align-menu-right">Menü 3
<ul>
<li>Untermenü 3-1</li>
<li>Untermenü 3-2</li>
<li>Untermenü 3-3</li>
</ul>
</li>
<li>Menü 4
<ul>
<li>Untermenü 4-1</li>
<li>Untermenü 4-2</li>
<li>Untermenü 4-3</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
Your problem is setting padding:10px for all <ul> and <li>.
nav > ul li{
padding: 10px;
}
Try to separate them with different classes then do the styling. In my example below, I've added .li-padding class in order to style differently.
html, body{
margin: 0;
padding: 0;
width: 100%;
height:100%;
font-family: Arial, sans-serif;
font-size: 62.5%;
}
*{
box-sizing: border-box;
}
.content{
margin: 0 15%;
}
/* ########################################################################## */
/* Dropdownmenu */
/* ########################################################################## */
nav{
background-color: #F0F0F0;
font-size: 1.8rem;
}
nav ul{
list-style: none;
margin: 0;
padding: 0;
}
nav a{
text-decoration: none;
color: #666;
}
nav ul{
display: flex;
}
nav > ul{
padding: 10px;
}
.li-padding{
padding-right:10px
}
nav > ul > li > ul{
position: absolute;
display: flex;
flex-direction: column;
}
nav ul li ul li{
padding-top: 10px;
display: none;
}
.align-menu-right{
margin-left: auto;
}
.active{
background-color: #999;
}
.current-menu > a{
color:#E95D0F;
}
nav > ul >li:hover ul > li{
display: block;
}
nav > ul > li:hover, nav > ul > li > ul li:hover{
background-color: #CCC;
}
nav > ul > li:hover > a, nav > ul > li > ul li:hover > a{
color: #FFF;
}
.current-menu:hover > a{
color:#E95D0F;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Dropdownmenü</title>
<link rel="stylesheet" type="text/css" href="src/css/styles.css">
</head>
<body>
<div class="content">
<!-- ########################################################################## -->
<!-- Dropdownmenu -->
<!-- ########################################################################## -->
<div class="nav-container">
<nav>
<ul class="flex-container">
<li class="current-menu li-padding"><a href="#" >Menü 1</a>
<ul>
<li class="current-menu">Untermenü 1-1</li>
<li>Untermenü 1-2</li>
<li>Untermenü 1-3</li>
</ul>
</li>
<li>Menü 2
<ul>
<li>Untermenü 2-1</li>
<li>Untermenü 2-2</li>
<li>Untermenü 2-3</li>
</ul>
</li>
<li class="align-menu-right li-padding">Menü 3
<ul>
<li>Untermenü 3-1</li>
<li>Untermenü 3-2</li>
<li>Untermenü 3-3</li>
</ul>
</li>
<li>Menü 4
<ul>
<li>Untermenü 4-1</li>
<li>Untermenü 4-2</li>
<li>Untermenü 4-3</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
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!
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 am attempting to create a drop down menu bar for the "Our Collections" but my attempts are not working. Can anyone lend me a hand please. Below is my html and the css for it. I have removed my random trial and errors for it, and kept .menu ul ul {display:none}
* html .clearfix {
height: 1%;
overflow: visible;
}
* + html .clearfix {
min-height: 1%;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
body {
margin: 0;
padding: 0;
}
.menu {
text-align: center;
background-color: #222;
}
.menu ul {
list-style: none;
height: auto;
padding: 40px;
width: 500px;
float: right;
}
.menu ul li {
float: left;
padding: 0 20px;
font-size: 20px;
font-family: Impact;
}
.menu ul ul {
display: none;
}
.menu ul li a {
color: white;
text-decoration: none;
transition: 350ms;
}
.menu ul li a:hover {
color: #ed702b
}
.title {
float: left;
font-size: 40px;
margin-left: -173px;
margin-top: 37px;
}
.title a {
text-decoration: none;
color: white;
}
.center {
width: 980px;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" type="text/css" href="includes/site.css">
<title>Home</title>
</head>
<body>
<div class="menu">
<div class="center clearfix" style="height: 124px">
<h1 class="title">My first web</h1>
<ul class="clearfix">
<li>Home
</li>
<li>Our Collections
</li>
<ul>
<li>First Collection
</li>
<li>Second Collection
</li>
</ul>
<li>About Us
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</body>
</html>
I got an old menu I made a long time ago.
I think you can work from this: Fiddle
Link 3 is the dropdown menu. Just look at the Fiddle
<div id="mainnav">
<nav>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3
<ul class="sub">
<li>2011</li>
<li>2012</li>
<li>2013</li>
</ul>
</li>
<li>link4</li>
<li class="end">link5</li>
</ul>
</nav>
</div>
If you need more help just say so.
I threw this together really quick for you as well. It's nothing elegant, but it's a great starting point and uses your original skeleton for your menu
Link to the fiddle:
http://jsfiddle.net/Lgpapw2p/
<ul class='menu'>
<li>
Home
</li>
<li>
Our Collections
<ul>
<li>First Collection</li>
<li>Second Collection</li>
</ul>
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul>
.menu{
list-style:none;
font-weight:bold;
margin-bottom:10px;
float:left;
width:100%;
}
.menu li{
float:left;
margin-right:10px;
position:relative;
}
.menu a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
.menu a:hover{
color:#fff;
background:#6b0c36;
text-decoration:underline;
}
.menu ul{
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
.menu ul li{
padding-top:1px;
float:none;
}
.menu ul a{
white-space:nowrap;
}
.menu li:hover ul{
left:0;
}
.menu li:hover a{
background:#008;
text-decoration:underline;
}
.menu li:hover ul a{
text-decoration:none;
}
.menu li:hover ul li a:hover{
background:#333;
}
The sub-menus under the about link are a little shifted from the left even though I gave it position: absolute; left: 0px.
Basically, I want all the menu items (including sub-menus) to be overlapped. Here is the code.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.nav{
position:relative;
}
#menu {
position:absolute;
left:0px;
margin: 0;
padding: 0;
}
#menu ul{
position:absolute;
left:0px;
list-style: none;
}
#menu li {
line-height:40px;
font: 100%;
font-family:Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
background: #333333;
border-bottom:#444444 thin solid;
}
#menu a {
color: #CCCCCC;
text-decoration: none;
margin: 0;
padding: 8px 12px;*/
text-decoration: none;
font-weight:bold;
}
#menu a:hover {
color: #fff;
padding-bottom: 8px;
}
</style>
</head>
<body>
<div class="nav">
<ul id="menu">
<li>Home</li>
<li>About
<ul>
<li>Bio</li>
<li>Blog
<ul>
<li>Bloger Blog</li>
<li>Wordpress Blog</li>
<li>other</li>
</ul>
</li>
<li>Hobby</li>
</ul>
</li>
<li>Gallery</li>
<li>News</li>
<li>Links</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Try adding margin: 0; padding: 0; to #menu UL.