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.
Related
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>
I watched a YouTube video on how to make a navigation menu using 's not 's. I am attempting to get the width of my navigation bar to 100% so it fills the width of the screen on all devices. I am happy with a my height of 30px. I also want the navigation bar to be centered, so if I add more tabs, it will fill the screen AND be centered automatically to 100%.Here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Kieran's Website</title>
</head>
<body>
<div id="body">
<div style="display:none">
<audio controls autoplay>
<source src="Audio/welcome 2.4.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<img src="Images/web-development-banner.jpg" width="100%" height="400">
<h1 class="webheading">Website Developement</h1>
<div id="navMenu">
<ul>
<li>Learn HTML
<ul>
<li>1. Things You Need</li>
<li>2. Setting Up Your Website Folders</li>
<li>3. Extra Information</li>
<li>4. HTML Layout</li>
</ul>
</li>
</ul>
<ul>
<li>Learn HTML
<ul>
<li>1. Things You Need</li>
<li>2. Setting Up Your Website Folders</li>
<li>3. Extra Information</li>
<li>4. HTML Layout</li>
</ul>
</li>
</ul>
<ul>
<li>Learn HTML
<ul>
<li>1. Things You Need</li>
<li>2. Setting Up Your Website Folders</li>
<li>3. Extra Information</li>
<li>4. HTML Layout</li>
</ul>
</li>
</ul>
<ul>
<li>Learn HTML
<ul>
<li>1. Things You Need</li>
<li>2. Setting Up Your Website Folders</li>
<li>3. Extra Information</li>
<li>4. HTML Layout</li>
</ul>
</li>
</ul>
<br class="clearFloat">
</div>
...There is more but it is irrelivant...
CSS:
#body {
background: url(Images/bigimage.jpg);
background-color:#000000;
background-size: 100% 100%;
width: auto;
height: auto;
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0px;
margin-top: 0px;
color: #FFFFFF;
}
#navMenu {
margin: 0 auto;
padding: 0;
width: 100%;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height: 30px;
}
#navMenu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background: #999;
}
#navMenu ul li a {
text-align: center;
font-weight: bold;
font-family: "Comic Sans MS", cursive;
text-decoration: none;
height: 30px;
width: 150;
display: block;
color: #FFF;
border: 1px solid #FFF;
text-shadow: 1px 1px 1px #000
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 32px;
}
#navMenu ul li:hover ul {
visibility: visible;
}
#navMenu li:hover {
background: #09F;
}
#navMenu ul li:hover ul li a:hover {
background: #CCC;
color: #000;
}
#navMenu a:hover {
color: #000
}
.clearFloat {
clear: both;
margin: 0;
padding: 0;
}
#body {
background: url(Images/bigimage.jpg);
background-color:#000000;
background-size: 100% 100%;
width: auto;
height: auto;
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0px;
margin-top: 0px;
color: #FFFFFF;
}
#navMenu {
margin: 0 auto;
padding: 0;
width: 100%;
text-align:center;
display:table;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height: 30px;
display: table-cell;
}
#navMenu li {
margin: 0;
padding: 0;
list-style: none;
float: none;
position: relative;
background: #999;
}
#navMenu ul li a {
text-align: center;
font-weight: bold;
font-family: "Comic Sans MS", cursive;
text-decoration: none;
height: 30px;
display: block;
color: #FFF;
border: 1px solid #FFF;
text-shadow: 1px 1px 1px #000
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 32px;
}
#navMenu ul li:hover ul {
visibility: visible;
}
#navMenu li:hover {
background: #09F;
}
#navMenu ul li:hover ul li a:hover {
background: #CCC;
color: #000;
}
#navMenu a:hover {
color: #000
}
.clearFloat {
clear: both;
margin: 0;
padding: 0;
}
<ul>
<li>Learn HTML
<ul>
<li>1. Things You Need</li>
<li>2. Setting Up Your Website Folders</li>
<li>3. Extra Information</li>
<li>4. HTML Layout</li>
</ul>
</li>
</ul>
<div id="body">
<div style="display:none">
<audio controls autoplay>
<source src="Audio/welcome 2.4.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<img src="Images/web-development-banner.jpg" width="100%" height="400">
<h1 class="webheading">Website Developement</h1>
<div id="navMenu">
<ul>
<li>Learn HTML
<ul>
<li>1. Things You Need</li>
<li>2. Setting Up Your Website Folders</li>
<li>3. Extra Information</li>
<li>4. HTML Layout</li>
</ul>
</li>
</ul>
<ul>
<li>Learn HTML
<ul>
<li>1. Things You Need</li>
<li>2. Setting Up Your Website Folders</li>
<li>3. Extra Information</li>
<li>4. HTML Layout</li>
</ul>
</li>
</ul>
<ul>
<li>Learn HTML
<ul>
<li>1. Things You Need</li>
<li>2. Setting Up Your Website Folders</li>
<li>3. Extra Information</li>
<li>4. HTML Layout</li>
</ul>
</li>
</ul>
<ul>
<li>Learn HTML
<ul>
<li>1. Things You Need</li>
<li>2. Setting Up Your Website Folders</li>
<li>3. Extra Information</li>
<li>4. HTML Layout</li>
</ul>
</li>
</ul>
<br class="clearFloat">
</div>
I'm trying to make a navbar using CSS. The nav links need to be spaced evenly from the picture in the middle of the bar. At the moment it looks like this:
The Code:
body {
background-image: url("../img/bg.jpg");
margin-left: 0px;
margin-right: 0px;
}
div.menucontainer {
margin-top: 50px;
background-image: url("http://www.thevincentcollection.com/img/menubg.jpg");
height: 35px;
box-shadow: 0px 5px 10px #000;
text-align: center;
}
IMG.vcmenulogo {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: 10px;
}
.menulinks {
position: relative;
right: 0px;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
.menulinks li {
display:inline;
}
.menulinks a {
display:inline-block;
padding:10px;
}
#footer {
position: fixed;
background-image: url("http://www.thevincentcollection.com/img/menubg.jpg");
box-shadow: 0px -6px 5px 0px rgba(0,0,0,0.75);
width:100%;
height:20;
bottom:0;
}
P.footer {
text-align: center;
color: white;
font-size: 11px;
font-family: Arial;
}
<!DOCTYPE html>
<html>
<head>
<title>The Vincent Collection: Luxury in Haircare</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="menucontainer">
<img class="vcmenulogo" src="http://www.thevincentcollection.com/img/vc-logo-menu.png" />
<ul class="menulinks">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div>
<div id="footer"> <p class="footer">Copyright © 2016 Salon on Wheels, LLC. All rights reserved.</p> </div>
</body>
</html>
you can change your HTML, insert the img as li and then remove the position:absolute from it and with a few other tweaks regarding position value and vertical-align, you have what you want.
body {
background-image: url("../img/bg.jpg");
margin: 0
}
.menucontainer {
margin-top: 50px;
background-image: url("http://www.thevincentcollection.com/img/menubg.jpg");
height: 35px;
box-shadow: 0px 5px 10px #000;
text-align: center;
}
.menulinks {
position: relative;
top: -90px;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.menulinks li {
display: inline-block;
padding: 10px;
vertical-align: middle
}
<div class="menucontainer">
<ul class="menulinks">
<li>Home
</li>
<li>About
</li>
<li>
<img class="vcmenulogo" src="http://www.thevincentcollection.com/img/vc-logo-menu.png" />
</li>
<li>Products
</li>
<li>Contact
</li>
</ul>
If you are trying to add some space between 2nd and 3rd button as I understood
just give class to 2nd and 3rd li element and give margin. Or maybe you can just add 2 ul elements and margin between
#joshua, its a gud approach to do as #ryuk said as well, and if i was to do this i would just make a dummy li between 2nd and 3rd child then margin it appropriately.
U can either do this,
<ul class="menulinks">
<li>Home</li>
<li>About</li>
<li class="third">Products</li>
<li>Contact</li>
</ul>
.third{ margin-left: 10% }
or make a dummy between 2nd and 3rd li
<ul class="menulinks">
<li>Home</li>
<li>About</li>
<li class="dummy"></li>
<li>Products</li>
<li>Contact</li>
</ul>
.dummy{
padding-left:10%
}
I have a menu. I need to show the submenus when I mouse hover on them. I have some code as follows. But the submenus overlaps with existing menu.
Following is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Drop Down Menus</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: "Trebuchet MS", Helvetica, Sans-Serif;
font-size: 14px;
}
a {
text-decoration: none;
color: #838383;
}
a:hover {
color: black;
}
#menu {
position: relative;
margin-left: 30px;
}
#menu a {
display: block;
width: 140px;
}
#menu ul {
list-style-type: none;
padding-top: 5px;
}
#menu li {
float: top;
position: relative;
padding: 3px 0;
text-align: center;
}
#menu ul.sub-menu {
display: none;
position: absolute;
top: 20px;
left: -10px;
padding: 10px;
z-index: 90;
}
#menu ul.sub-menu li {
text-align: top;
}
#menu li:hover ul.sub-menu {
display: block;
border: 1px solid #ececec;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>Home
<ul class="sub-menu">
<li>Pages</li>
<li>Archives</li>
<li>New Posts</li>
<li>Recent Comments</li>
</ul>
</li>
<li>About
<ul class="sub-menu">
<li>Get to know us</li>
<li>Find out what we do</li>
</ul>
</li>
<li>Contact
<ul class="sub-menu">
<li>E-mail Us</li>
<li>Use Our Contact Form</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I need some effect like this.
How can I make it.
You've set left: -10px on #menu ul.sub-menu, which is why it's overlapping #menu. You should set that to a value that'll move it far enough to the right for your purposes, perhaps left: 140px since that's the width of the menu div.
I think you're looking for something called a "navigation rollover with dropdowns".
This is one of the best implementations that you can find - adapt and use as necessary:
http://jorenrapini.com/blog/web-development/css-navigation-rollovers-with-drop-downs#post-170
And, to see if it's worth what trying, this is the end result:
http://jorenrapini.com/posts/css-rollovers/post2.html
Good luck!
I was able to make a side menu and it shows the submenu when i hove over the menu items.
Now I am facing two issues
1. When hover to menu-item, it shows the sub-menu but when i am hovering over submenu the hover state of menu-item goes away. I need it to be in hover state.
2. The sub-menu block when shown, it shows as transparent and I can see the contents behind it. But how can i make it completely opaque?
My code is as follows...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Drop Down Menus</title>
<style type="text/css">
<!-- * {
margin: 0;
padding: 0;
}
body {
font-family: "Trebuchet MS", Helvetica, Sans-Serif;
font-size: 14px;
} -->
a {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
color: black;
}
#menu {
position: relative;
width:20%;
height:400px;
border:1px solid #000;
}
#menu a {
display: block;
width: 140px;
background-image:url(menuitemhover.png);
}
#menu ul {
list-style-type: none;
padding-top: 5px;
}
#menu li {
float: top;
position: relative;
padding: 3px 0;
text-align: center;
}
#menu ul.sub-menu {
display: none;
position: absolute;
top: -10px;
left: 170px;
padding: 10px;
z-index: 90;
}
#menu ul.sub-menu li {
text-align: top;
}
#menu li:hover > ul.sub-menu {
display: block;
border: 1px solid #ececec;
background-image:url(menuitemhover.png);
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>Home
<ul class="sub-menu" style="border:1px solid #d14836"}>
<li>Pages</li>
<li>Archives</li>
<li>New Posts</li>
<li>Recent Comments</li>
</ul>
</li>
<li>About
<ul class="sub-menu" style="border:1px solid #d14836">
<li>Get to know us</li>
<li>Find out what we do</li>
</ul>
</li>
<li>Contact
<ul class="sub-menu" style="border:1px solid #d14836">
<li>E-mail Us</li>
<li>Use Our Contact Form</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
If I've understood right, you need to apply a background color to #menu li:hover > ul.sub-menu and also #menu a. It's easier for me to try to use very obvious colors for testing as in green or red. After the testing is done, just replace the colors which whatever you wish