After a long break from HTML/CSS, I recently created a menu with dropdown links using a method I have used once before, and was surprised to find that this application of them is not working.
I used this
ul li:hover ul{ display:block;}
to "turn on" my menus when hovering, but they simply never appear. I have tried adding div tags around various blocks of code to no avail. What tricks am I missing?
jsfiddle here: https://jsfiddle.net/qccs4mLL/
Your html isn't align with your css selector.
ul.menu li:hover > ul {
display: block;
background: green;
}
There isn't any ul element that is direct child of li element. You can change your html so ul is direct child of li element.
body {
margin: 0px;
}
a {
text-decoration: none;
width: 8em;
/*width of each link*/
}
/*format list*/
ul {
text-align: center;
margin: 0;
padding: 0;
list-style: none;
}
ul.menu {
height: 2.5em;
width: 100%;
padding: 0;
margin: 0;
border: 0;
background-color: #454545;
}
ul.menu li {
float: left;
position: relative;
}
ul.menu li a {
cursor: pointer;
display: block;
color: white;
line-height: 2.5em;
padding: 0 10px;
}
ul.menu ul {
background: #555;
display: none;
position: absolute;
left: 0;
top: 100%;
}
ul.menu li:hover {
background: red;
}
ul.menu li:hover > ul {
display: block;
background: green;
}
<body>
<!--Heading-->
<!--Should change when scrolled down/on mobile-->
<h1 class="heading">Title</h1>
<!--Create Menus-->
<nav>
<ul class="menu">
<li>link1
<ul>
<li>sublink1
</li>
</ul>
</li>
<!--menu options with sub options have dropdown on computer, may unfold with tap on mobile or just be a click since they all go to one page maybe? maybe go with unfolding.-->
<li>link2
<ul>
<li>sublink1
</li>
<li>sublink2
</li>
<li>sublink3
</li>
<li>sublink4
</li>
</ul>
</li>
<li>link3
</li>
<li>link4
</li>
</ul>
</nav>
</body>
Related
In a section of website I'm working on I have a NAV element that contains three sections: About, Portfolio, Contact. I'm trying to make it so that when you hover over the Portfolio section, a drop down appears allowing you to choose between two other sections, "Writing Samples" and "Photoshop." I am trying to accomplish this using only CSS.
This is my HTML section:
<nav>
<ul>
<li>
<a href="index.html" >About</a>
</li>
<li class="subNav">
<a class="selected" >Portfolio</a>
<ul>
<li>Writing Samples</li>
<li>Photoshop</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
And CSS:
nav {
position: absolute;
bottom: 0;
right: 0;
padding: 10px 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
nav ul li.subNav ul {
display: none;
}
nav ul li.subNav:hover ul {
display: block;
}
I have reached the point that when I hover over the Portfolio list item, you see the resulting list items "Writing Samples" and "Photoshop", except that it displays these two items as a part of the original unordered list, and moves the "Portfolio" list item above the rest of the items. I would like "Writing Samples" and "Photoshop" to appear vertically under "Portfolio", but I can't quite figure this out with CSS.
This is the basics of it:
nav {
position: absolute;
padding: 10px 0;
}
nav ul {
list-style: none;
;
padding: 0;
}
nav > ul > li {
display: inline-block;
position: relative;
border: 1px solid lightgreen;
/* for demo */
}
nav a {
font-weight: 800;
padding: 5px 10px;
display: block;
}
nav > ul > li.subNav ul {
display: none;
position: absolute;
top: 100%;
left: 0;
white-space: nowrap;
background: pink;
}
nav ul li.subNav:hover ul {
display: block;
}
<nav>
<ul>
<li>
About
</li>
<li class="subNav">
<a class="selected">Portfolio</a>
<ul>
<li>Writing Samples
</li>
<li>Photoshop
</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
The parent li is given position:relative to provide positioning context.
The submenu is positioned absolutely, at the bottom of the parent li and aligned left.
Note that I have used the direct child selector > to target only the elements I want to.
Then, since the submenu is too wide to be contained within the parent's width, I added white-space:nowrap so that the text will flow as required.
You have the right idea; the comment tags in the HTML below are used to remove space between the "li" elements.
Instead of using display:none, I use visibility: hidden for S.E.O purposes.
Even though you use position: absolute, you should also use z-index so that menu elements are able to be clicked if they are overlapping other content.
.mm,
.sm {
list-style: none;
}
.mm {
position: relative;
margin: 0px;
padding: 0px;
background-color: #000;
border-bottom: 4px solid red;
}
.sm {
position: absolute;
z-index: 1;
visibility: hidden;
background-color: #000;
border-width: 0px 4px 4px 4px;
border-style: solid;
border-color: red;
}
.mm > li {
display: inline-block;
}
.mm > li > a {
display: inline-block;
padding: 8px;
}
.sm a {
display: block;
padding: 8px;
}
.mm > li > a:hover + .sm,
.sm:hover {
visibility: visible;
}
.mm a {
text-decoration: none;
color: #FFF;
}
.mm a:hover {
text-decoration: underline;
color: yellow;
}
<nav>
<ul class="mm">
<li>AAA</li><!--
--><li>BBB
<ul class="sm">
<li>SUB</li><!--
--><li>SUB</li><!--
--><li>SUB</li>
</ul>
</li><!--
--><li>CCC
<ul class="sm">
<li>SUB</li><!--
--><li>SUB</li><!--
--><li>SUB</li>
</ul>
</li>
</ul>
</nav>
<h1>CSS NAVIGATION</h1>
I made a drop down nav menu which also partially hovers over the aside. But when I hover over the drop down menu part that is over the aside, the nav bar collapses and I end up selecting the aside. Also parts of the aside are over the nav sub menu.
This picture shows the overlap. The orange one is being hovered, when moving the mouse to the left half, into the grey aside area but still over the nav sub menu, the 'Stats' sub menu collapses and the 'Data sheet' link gets selected.
I've tried all kinds of things with z-index and adjusting positions and so on but I don't know what I'm doing wrong.
JSFiddle shows the problem.
HTML:
<nav>
<ul>
<li>Home</li>
<li>Stats
<ul>
<li>Graph</li>
<li>DataSheet</li>
<li>Print</li>
</ul>
</li>
<li>Projects
<ul>
<li>View</li>
<li>Add</li>
<li>Edit</li>
</ul>
</li>
<li>Employees
<ul>
<li>View</li>
<li>Add</li>
<li>Edit</li>
</ul>
</li>
<li>Settings</li>
<li>About</li>
</ul>
</nav>
<aside>
<ul>
<li><a>Graph</a></li>
<li><a>Data sheet</a></li>
<li><a>Print graph</a></li>
</ul>
</aside>
CSS:
nav {
background: black;
width: auto;
height: 50px;
font-weight: bold;
}
nav ul {
list-style: none;
}
nav ul li {
height: 50px;
width: 125px;
float: left;
line-height: 50px;
background-color: #000;
text-align: center;
position: relative;
}
nav ul li a {
text-decoration: none;
color: #fff;
display: block;
}
nav ul li a:hover {
background-color: #ff6a00;
}
nav ul ul {
position: absolute;
display: none;
}
nav ul li:hover > ul {
display: block;
}
aside {
float: left;
width: 200px;
height: 700px;
background: grey;
}
aside input {
background-color: red;
}
aside ul {
list-style: none;
/*no bulets*/
height: 100%;
}
aside ul li {
height: 50px;
width: 100%;
float: left;
border-bottom: 1px solid black;
line-height: 50px;
text-align: center;
position: relative;
}
aside ul li a {
text-decoration: none;
width: 100%;
color: #fff;
display: block;
}
aside ul li a:hover {
background-color: #ff6a00;
display: block;
}
Add z-index to your nav ul element:
nav ul {
list-style: none; /*no bulets*/
z-index: 100;
}
Updated Fiddle
For more information about the z-index style and what it does, click here.
I'm using the CSS lines below for a menu on a webpage.
The problem is that I don't know how to make that code apply only to the menu, and not to other ul -unordered lists- on the page!
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #AAF7BB;
font-size: 110%;
}
ul li:hover {
background: #ffffff;
color: #000000;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
opacity: 0;
visibility: hidden;
}
ul li ul li {
background: #ffffff;
display: block;
color: #00ff00;
}
ul li ul li:hover { background: #ffffff; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
Please help.
Try marking your ul as a class and refer to that instead of just ul.
<ul class="menu">
and change all instances of ul in the css to .menu.
Refering to just "ul" will apply the change to all ul elements.
As mentioned you can do this using classes on your html. I would try and Google this a little more. There are tons of example for menus out there.
In the top three is this:
http://www.noupe.com/essentials/freebies-tools-templates/100-great-css-menu-tutorials.html
Something simple:
<ul class="menu">
<li class="menu-option">
Home
</li>
<li class="menu-option active">
About
</li>
<li class="menu-option">
Contact
</li>
<ul class="sub-menu">
<a>Something to click</a>
<li class="menu-option">
Contact
</li>
<li class="menu-option">
Contact
</li>
</ul>
</ul>
Your css would need to be updated similar to below
ul.menu:{
/*Your style for the menu*/
}
ul.menu li.menu-option:{
/*Your style for the menu's options*/
}
ul.menu ul.sub-menu:{
/*Your style for the menu's sub-menu's*/
}
Use the class or id attributes alongside your HTML elements. For example:
HTML
<ul class="class1">
...
</ul>
<ul class="class1">
...
</ul>
<ul id="class2">
...
</ul>
CSS
.class1{
implement css styling here
}
#class2{
implement css styling here
}
Here, the top 2 ul elements will be styled by the .class1 CSS styling, the final ul with the attribute #class2 will be styled by the corresponding CSS.
Note that . denotes classes in CSS and # denotes IDs
IDs are unique, classes are not unique. More information
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;
}
I'm new to CSS and I'm trying to experiment with this code - if you want to see what it looks like go to this link: https://www.servage.net/blog/wp-content/uploads/2009/03/css-menu.html
Here's the code:
<html>
<head>
<title>CSS based drop-down menu</title>
<style type="text/css">
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>About
<ul>
<li>The Team</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
<li>Products
<ul>
<li>Cozy Couch</li>
<li>Great Table</li>
<li>Small Chair</li>
<li>Shiny Shelf</li>
<li>Invisible Nothing</li>
</ul>
</li>
<li>Contact
<ul>
<li>Online</li>
<li>Right Here</li>
<li>Somewhere Else</li>
</ul>
</li>
</ul>
</body>
</html>
I have 2 questions about this:
How do I make this navigation bar on the right side of the page ?
Some of the tabs have drop down lists, when I add this margin-top: 50px to change the position of the navigation bar the dropdown lists move down like this
To move the #menu to the right and 50px down, add these properties
#menu {
position: absolute;
top: 50px;
right: 0px;
}
JSFiddle
If you want to use float and margin-top instead, you must restrict the margin to the #menu
#menu {
float: right;
margin-top: 50px;
}
JSFiddle
you seem to be targeting both the parent ul and the childs uls
try that:
ul {
margin-top:50px;
}
ul#menu {
float:right;
margin-top:0;
}
By adding the #menu after ul you target that specific UL and therefore override its basic ul properties
Add float property to your list:
#menu {
float: right;
}
If you are using WordPress or a static website then you have to place this code to move your navigation bar to the right side.
position: static;
top: 50px;
right: 0px;
color: black;
display: inline-block;
margin-right: 45em;
}
You can vary margin-right according to your website design.
If you still not able to move navigation on the right side then change the position: Like static, absolute, relative and inherit.