I am trying to get my dropdown menu to work, but for some reason, it doesn't appear in the browser.
I already checked the other questions and couldn't find a reason for my problem. I already removed overflow:hidden from my parent list, even though the gradient I had in the navbar disappeared because of that and I don't know how to fix that either.
I used w3school for help (although they didn't use a list, which is a requirement) and a template from one of my friends that I even copypasted into my css and it still didn't work.
Okay, so for your reference, here you have my CSS and HTML:
body {font-family: "Century Gothic", "Trebuchet MS";
width: 780px;
margin: auto;
background-color: #555555}
#site {background-color: white;
padding: 10px;}
/** My Friend's CSS that didn't work either
.main li {list-style-type: none;
float: left;
width: 150px;
background: linear-gradient(to bottom, rgba(240,240,240,1) 0%, rgba(204,204,204,1) 100%);
text-align: center;}
.main li:hover {color: white;}
.main2 li {display: none;
background-color: lightgrey;
color: black;}
.main2 li:hover {background-color: grey;
color: white;}
.main li:hover .main2 li {display: block;}**/
.main {list-style-type: none;
background: linear-gradient(to bottom, rgba(240,240,240,1) 0%, rgba(204,204,204,1) 100%);
width: 100%}
.main li {display: block;
float: left;
position: relative}
.main li a {display: block;
position: relative;
padding: 6px 12px 5px 10px;
font-weight: 900;
font-size: 14px;
height: 20px;
text-align: center;}
.main a {text-decoration: none;
color: black;}
.main2 li {position: absolute;
display: none;
width: 100%
}
.main li a:hover .main2 li {display: block;}
.main2 li a {color: black;
text-decoration: none;
display: block;}
<body>
<div id="site">
<nav>
<ul class="main">
<li>Home</li>
<li>Über mich</li>
<li>Blog</li>
<ul class="main2">
<li>2015</li>
<li>2016</li>
<li>2017</li>
</ul>
<li>Forum</li>
<li>Kontakt</li>
<li>Links</li>
<ul class="main2">
<li>facebook</li>
<li>Insta</li>
<li>Twitter</li>
</ul>
</ul>
</nav>
also, here's a screenshot of how the website looks like at the moment (I only included the important parts of the HTML because I actually haven't formatted the rest of the site in CSS
screenshot
Thank you so much for your help!
I assume you want the .main2 menu displayed only when parent link is covered.
2 changes:
1) make a child ul tag part of the li (nest it)
2) change the display logic of :hover to act on child element (.main li:hover > ul)
Result:
.main {
list-style-type: none;
background-image: linear-gradient( rgba(240,240,240,1), rgba(240,240,240,0) );
width: 100%;
display:flex;
}
.main li {
display: block;
float: left;
position: relative;
}
.main li a {
display: block;
position: relative;
padding: 6px 12px 5px 10px;
font-weight: 900;
font-size: 14px;
height: 20px;
text-align: center;
}
.main a {
text-decoration: none;
color: black;
}
.main2 {
width: 100%;
display:none;
position: absolute;
padding:0;
}
.main2 li {
width: 100%;
}
.main li:hover > ul {
display: block;
}
.main2 li a {
color: black;
text-decoration: none;
display: block;
}
<div id="site">
<nav>
<ul class="main">
<li>Home</li>
<li>Über mich</li>
<li>Blog
<ul class="main2">
<li>2015</li>
<li>2016</li>
<li>2017</li>
</ul>
</li>
<li>Forum</li>
<li>Kontakt</li>
<li>Links
<ul class="main2">
<li>facebook</li>
<li>Insta</li>
<li>Twitter</li>
</ul>
</li>
</ul>
</nav>
If you are thinking about optimizing the styling, here is my version with less selectors:
https://codepen.io/VsevolodTS/pen/KRxeRL
Here is a solution, I commented the changed code.
The problem is that your <ul class="main2"> is in the same level as the other li which is not valid.
I olso changed this line of css
.main li a:hover .main2 li {display: block;}
to
.main li:hover .main2 li {display: block;}
Edit
For the gradient problem use display: inline-block; on main
body {font-family: "Century Gothic", "Trebuchet MS";
width: 780px;
margin: auto;
background-color: #555555}
#site {background-color: white;
padding: 10px;}
.main {list-style-type: none;
background: linear-gradient(to bottom, rgba(240,240,240,1) 0%, rgba(204,204,204,1) 100%);
display: inline-block; // <-- here
width: 100%}
.main li {display: block;
float: left;
position: relative}
.main li a {display: block;
position: relative;
padding: 6px 12px 5px 10px;
font-weight: 900;
font-size: 14px;
height: 20px;
text-align: center;}
.main a {text-decoration: none;
color: black;}
.main2 li {position: absolute;
display: none;
width: 100%
}
/*Changed this part*/
.main li:hover .main2 li {display: block;}
.main2 li a {color: black;
text-decoration: none;
display: block;}
<div id="site">
<nav>
<ul class="main">
<li>Home</li>
<li>Über mich</li>
<li>
Blog
<!-- Move this inside li -->
<ul class="main2">
<li>2015</li>
<li>2016</li>
<li>2017</li>
</ul>
</li>
<li>Forum</li>
<li>Kontakt</li>
<li>
Links
<!-- Move this inside li -->
<ul class="main2">
<li>facebook</li>
<li>Insta</li>
<li>Twitter</li>
</ul>
</li>
</ul>
</nav>
</div>
Related
I Created this page with the help of some tutorial and I edited the code to attach a text box in the center of the page but the text box is mixing with the navigation menu. Some Help Would be appreciated. I have very less knowledge of html and css so please guide me in a simple way. I searched on the google and also got a w3 article but that did not help as I have used it in the css as yu can can see I have used margin-top , bottom , left and right to solve problem but instead it is mixing or overlapping it self with the navigation menu.
body {
background: url('nature.jpg') no-repeat;
background-size: cover;
font-family: Arial;
color: white;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 2px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
div.transbox {
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
/* For IE8 and earlier */
margin-top: 200px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
<html>
<link href='style.css' rel='stylesheet'>
<ul>
<li>Home</li>
<li>About
<ul>
<li><a>Our Team</a></li>
<li><a>Camp Sites</a></li>
<li><a>Mission</a></li>
<li><a>Resources</a></li>
</ul>
</li>
<li>Things to do
<ul>
<li><a>Activities</a></li>
<li><a>Parks</a></li>
<li><a>Shops</a></li>
<li><a>Events</a></li>
</ul>
</li>
<li>Contact
<ul>
<li><a>Map</a></li>
<li><a>Directions</a></li>
</ul>
</li>
<li>News</li>
</ul>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</html>
You have to add
.background {
clear: both;
}
This is to clear the float: left that was applied before.
Read more on float
I'm asked to create a html/css menu such as the following picture:
This looks a simple menu to me, wasn't it by the fact that it has 'cut-out' sections between the menu items. I don't think it's clear from the image but the upper and lower part of the menu are connected with one another. Let me explain that with the use of a picture created in paint:
The grey area's are the 'cut-out' parts I was talking about. The upper and lower part are connected with each other.
I hope this is clear and I'm hoping for someone to help. Thanks in advance!
EDIT:
Herewith some code sample and JSFiddle, this is how far I got.
<div class="behandelingen-en-prijzen">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
.behandelingen-en-prijzen
{
}
.behandelingen-en-prijzen ul li
{
display: inline-block;
padding: 20px;
background-color: #000;
background-color:rgba(0,0,0,0.3);
}
.behandelingen-en-prijzen ul li a
{
text-transform: uppercase;
color: #000;
}
you can do it without using images
HTML
<ul class="cutout">
<li>
home
</li>
<li>
about
</li>
<li>
contact
</li>
</ul>
CSS
body{ background: url(https://i.imgur.com/lsoomRq.jpg); }
.cutout{ list-style: none; padding: 0; border: 3px solid rgba(235, 235, 235, 0.8); }
.cutout, .cutout li{ height: 40px; line-height: 40px; overflow: hidden; }
.cutout li{ float: left; width: 33.33%; text-align: center; }
.cutout a{ display: block; margin-right: 3px; background: rgba(235, 235, 235, 0.8); color: #555; text-transform: uppercase; font-family: sans-serif; text-decoration: none;}
.cutout a:hover{background: #fff}
.cutout li:last-child{ float: right; }
.cutout li:last-child a{margin-right: 0; }
Updated the fiddle: http://jsfiddle.net/a7d9v/3/
Removed padding from li and left 1px, added padding to a and floated the li - left.
<div class="behandelingen-en-prijzen">
<ul>
<li>Home</li>
<li>About</li>
<li><a class="no-border" href="#">Contact</a></li>
</ul>
</div>
.behandelingen-en-prijzen ul {
list-style: none;
width: 100%;
}
.behandelingen-en-prijzen ul li
{
float: left;
padding: 1px;
background-color: #000;
background-color:rgba(0,0,0,0.3);
}
.behandelingen-en-prijzen ul li a
{
text-transform: uppercase;
color: #fff;
display: block;
padding: 20px;
border-right: 1px solid #fff;
}
.behandelingen-en-prijzen ul li a.no-border {
border: none;
}
I'm trying to center my nav bar.
HTML is
<nav>
<ul>
<li>HJEM</li>
<li>FORUM</li>
<li>DONER</li>
<li style="margin-right: 0px;">SERVERE
<li style="margin-right: 0px;">FAQ</li>
<li style="margin-right: 0px;">KONTAKT</li>
</ul>
</nav>
CSS is
nav {margin: 3px 0; width: 700px;}
nav ul {width: 700px; height: auto; list-style: none;}
nav ul li a {
background: #FFFFFF;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-weight: 300;
font-size: 18px;
text-align: center;
color: #717171;
text-decoration: none;
float: left;
padding: 8px 0;
width: 106px;
margin: 0px 10px 0 0;
}
nav ul li a:hover {background: #f1f1f1;}
Right now it floats from left to right. I want to center it.
Bonus question; if someone know this, if you can point me in the direction on how to create a touch compatible sub menu for "doner".
Thanks for your time.
hjortefjellet.com
If you want the elements to be in a line, I would use li { display:inline-block; }
then yo can define for your nav element: margin: 3px auto;.
Did I understand you right that you want a dropdown menu for the items in the nav? That's not too difficult: Add the dropdown menu as a div element into the li element:
<li>
HJEM
<div class="dropdown">Hello!<br />I'm a dropdown menu!</div>
</li>
Then add to the stylesheet:
.dropdown {
display:none;
position:absolute;
top:56px;
background-color:#f1f1f1;
width:200px;
padding:10px;
}
li:hover .dropdown, .dropdown:hover { display:block; }
Just do this
nav {
margin: 3px auto;
}
first of all, close your 4th "li" tag. Also, add "margin:0 auto;" to "nav ul" and remove inline styles.
code should look like this:
HTML
<nav>
<ul>
<li>HJEM</li>
<li>FORUM</li>
<li>DONER</li>
<li>SERVERE</li>
<li>FAQ</li>
<li>KONTAKT</li>
</ul>
</nav>
And CSS
nav {margin: 3px auto; width: 700px;}
nav ul {width: 700px; height: auto; list-style: none; margin:0 auto; display:block;}
nav ul li a {
background: none repeat scroll 0% 0% #FFF;
font-family: 'Open Sans',Arial,Helvetica,sans-serif;
font-weight: 300;
font-size: 18px;
text-align: center;
color: #717171;
text-decoration: none;
float: left;
padding: 8px 0px;
width: 106px;
}
nav ul li a:hover {background: #f1f1f1;}
http://jsfiddle.net/Sb42u/1/
1. To center your nav bar:
You just need to change margin: 3px 0; to margin: 3px auto in nav.
2. To create a DropDown menu:
First I would advise to change your markup this way:
<nav>
<ul>
<li>HJEM</li>
<li>FORUM</li>
<li>
DONER
<ul class="submenu">
<li>SERVERE
<li>FAQ</li>
<li>KONTAKT</li>
</ul>
</li>
</ul>
</nav>
Then you can simulate a dropdown using this css classes:
nav ul li{
position:relative;
float:left;
}
nav ul li ul.submenu {
position: absolute;
width: auto;
display:none;
top: 35px;
}
nav ul > li:hover > ul {
left: 0;
display: block;
}
Fiddle here: http://jsfiddle.net/9Yg47/4/
my sub navigation menu items are being displayed on top of each other
here is the code:
/* NAVIGATION */ .nav-bar {width: 100%; height: 80px; background-image:url(../images/bg-menu80.jpg);}
.nav-hold {overflow: hidden;}
.nav-list {float: right;}
.nav-list li {float: left; width: auto; position: relative;}
.nav-list li a {text-decoration: none; display:block; padding: 30px 7px 20px 7px; color: #f9f9f9; font-size: .9em; font-weight: bold;}
.nav-list li ul {display: none;}
.nav-list li a:hover {text-decoration: none; display: block; padding: 30px 7px 20px 7px; color: #000; font-size: .9em; font-weight: bold; background-color: #e7e4e4;}
.nav-list li a:hover li{display: block; position: absolute; margin: 0; padding: 0;}
.nav-list li a:hover li{float: left;}
.nav-list li:hover li a{ background-color: #333; border-bottom: 1px solid #fff; color: #FFF;}
<ul class="nav-list" id="navigation"><!--Menu list-->
<li>Home</li>
<li>About Us</li>
<li> <ul>Members
<li>Board of Directors</li>
<li>Committee</li>
</ul></li> <li>Join Us</li> <li>Events</li>
<li>Rules & Guidelines</li> <li>Archive</li> <li>Contact Us</li> <li>Login</li> </ul><!--ENDS Menu list-->
Your code doesn't really do much when you copy it directly into a jsfiddle (a website used to 'mock up' and test your HTML, CSS and JS), and there's not much description about what you are expecting/wanting to happen, so there's going to be some guess work here...
I think there are 2 problems here.
The HTML
First, the <li> that has the subnavigation <ul> inside it has some incorrect html.
The Members needs to be before the <ul>, not inside it.
So it should look like this:
<li>
Members
<ul>
<li>Board of Directors
</li>
<li>Committee
</li>
</ul>
</li>
The CSS
Second, you are trying to display the subnavigation <ul> (by default this is display: none) when you hover on the <a> tag, but you need to do it when you hover the <li>, because it's that element that contains the subnavigation <ul>.
So it should look like this:
.nav-list li ul {
display: none;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
}
.nav-list li:hover ul {
display: block;
}
Here's a fiddle with my tweaks, hopefully that'll get you back on track.
http://jsfiddle.net/davidpauljunior/ve9Ub/
I have originally created my navigation in Chrome in which the outcome fits perfectly to my needs. I have then found out that Mozilla Firefox won't output the same result, the drop-down menus under Member Action and Admin Related will display vertically instead on horizontally as i wanted. However my biggest dissapointment was testing the navigation in Internet Explorer which won't even show the drop-down menus.
I would really appreciate someone checking the below code and your feedback, Thanks.
Solved the problem by changing one of the lines in css;
navigation ul li {float: left; list-style:none; }
HTML
<div id="navigationContainer">
<div id="navigation">
<ul>
<li class="borderleft">Home </li>
<li>Register </li>
<li>Search cars</li>
<li>Display all cars</li>
<li>Member Actions
<ul> <!-- Open drop down menu -->
<li class="bordertop">Login</li>
<li class="floatLeft">Member Area</li>
<li>Reservation</li>
<li>Contact us</li>
<li>Admin Related
<ul>
<li class="bordertop">Insert new car</li>
<li>Delete a car</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>
CSS
* {padding: 0%; margin 0%; } /* Overwrites the browser stylesheet */
#navigationContainer {background:url(images/navi.png); width:100%;position: relative; white-space:nowrap; word-spacing:0; }
#navigation {width:1200px; height:65px; position: relative; font-family: Arial; margin: 2px auto; font-size: 125%; }
#navigation ul { list-style-type: none; }
#navigation ul li {float: left; position: relative; }
#navigation ul li a { border-right: 2px solid #e9e9e9; padding: 20px;
display: block; margin: 0 auto; text-align: center; color: black; text-decoration: none; }
#navigation ul li a:hover { background: blue; color: white; }
#navigation ul li ul { display: none; }
#navigation ul li:hover ul {display: block; position: absolute; }
#navigation ul li ul li {float:left; position:relative; }
#navigation ul li:hover ul li a { background: #12aeef; color: white; position:relative; margin: 0px auto; border-bottom: 1px solid white; border-right: 1px solid white; width: 119px; }
#navigation ul li:hover ul li a:hover { background: blue;}
.bordertop { border-top: 1px solid white; }
.borderleft { border-left: 2px solid #e9e9e9;}
Try this
http://jsfiddle.net/Vf3AJ/
Example from: http://www.cssnewbie.com/example/css-dropdown-menu/horizontal.html
EDITED
Misread horizontal for vertical. tested in IE10, FF, and Chrome
As a side note: horizontal menus have serious issues depending on the width of the viewers screen.
CSS
nav {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
}
nav li {
list-style: none;
float: left;
}
nav li a {
display: block;
padding: 3px 8px;
text-transform: uppercase;
text-decoration: none;
color: #999;
font-weight: bold;
}
nav li a:hover {
background: blue;
color: white;
}
nav li ul {
display: none;
}
nav li:hover ul, nav li.hover ul {
position: absolute;
display: inline;
left: 0;
width: 100%;
margin: 0;
padding: 0;
}
nav li:hover li, nav li.hover li {
float: left;
}
nav li:hover li a, navbar li.hover li a {
color: #000;
}
nav li li a:hover {
color: white;
}
HTML
<div id="navigationContainer">
<nav id="navigation">
<ul>
<li class="borderleft">Home
</li>
<li>Register
</li>
<li>Search cars
</li>
<li>Display all cars
</li>
<li>Member Actions
<ul>
<!-- Open drop down menu -->
<li class="bordertop">Login
</li>
<!-- A bordertop class is given to this listed element in order to style a top border for in in the external CSS file. -->
<li class="floatLeft">Member Area
</li>
<li>Reservation
</li>
</ul>
</li>
<li>Contact us
</li>
<li>Admin Related
<ul>
<li class="bordertop">Insert new car
</li>
<li>Delete a car
</li>
</ul>
</li>
</ul>
</nav>
</div>