Ok, so here we go again...
The elements in my sub-menu keep moving when I hover over them. I can't seem to find anything on this issue. I've asked this question before for my nav bar but the answer I received- (Have the same padding for the a tags and put a border around them- but have it transparent) does not work with the sub-menu. I've tried to play with the padding as well with no luck.
Another thing...(I apologize for all questions, I just hate asking on here.. Some can be condescending) I had assign a class to each element (or list item) of the nav bar because when I attempted to put a border around them, each of the sub-menu elements also inherited the border as well. Is the a "cleaner" way to do it? I tried the :not() tag but I can't seem to get that to work either.
Lastly, I ask questions on this site as a last option. I am a newbie programmer/web designer who is looking to network and would like to connect with people who are more experienced before I get banned from asking a question that someone else sees as futile. If this last request is against the terms of service please let me know - I will delete it.
HTML
/* Style The Dropdown Button */
.dropbtn {
background-color: transparent;
font-family: 'Homemade Apple',cursive;
color: pink;
padding: 4px;
font-size: 16px;
cursor: pointer;
border: 3px solid pink;
border-radius: 16px;}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #DDDDEE;
border: 3px solid pink;
border-top: hidden !important;
border-radius: 16px;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 2;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #B76E79;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {color: #B76E79}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown
content is shown */
.dropdown:hover .dropbtn {
color: #B76E79;
background-color: #DDDDEE;
}
</style>
</head>
<body>
<h1>Debi's Babies</h1>
<h2>A Mother's collection of Snow Babies</h2>
<ul class = "nav">
<li class= "one">Home</li>
<li class= "two">Original Figurines</li>
<li class= "three">Villages</li>
<div class = "dropdown">
<a href= "guest_collect.html"<button class="dropbtn">The Guest
Collection</button></a>
<div class = "dropdown-content">
<li class="c">Dr. Seuss</li>
<li class="d">Rudolph and Friends</li>
<li class="e">Santa</li>
<li class="f">Wizard of Oz</li>
</div>
</div>
</li>
<li class= "four">Oranments</li>
<li class= "five">Snow Bunnies</li>
</ul>
</body>
</html>
CSS
/*navbar*/
.nav {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
display: block;
position: relative;}
.nav li{
display: inline-block;
}
.nav a {
display: inline-block;
color: pink;
font-family: 'Homemade Apple', cursive;
padding: 6px;}
.nav li a:hover {
color: #B76E79;
padding: 8px;
z-index: 1;
}
.one,.two,.three,.four,.five {
border: 3px solid pink;
border-radius: 16px;}
.one:hover,.two:hover,.three:hover,.four:hover,.five:hover {
background: #DDDDEE;
}
As far as I can tell, the 'positioning' change you're talking about is coming from the additional padding on hover. This is specifically coming from the declaration:
.nav li a:hover {
padding: 8px;
}
Removing this solves the problem. However, in addition to this, your <a> tag is missing the >, and you have one </li> too many.
Both of those have also been corrected in the following example:
/* Style The Dropdown Button */
.dropbtn {
background-color: transparent;
font-family: 'Homemade Apple', cursive;
color: pink;
padding: 4px;
font-size: 16px;
cursor: pointer;
border: 3px solid pink;
border-radius: 16px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #DDDDEE;
border: 3px solid pink;
border-top: hidden !important;
border-radius: 16px;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 2;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #B76E79;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
color: #B76E79
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown
content is shown */
.dropdown:hover .dropbtn {
color: #B76E79;
background-color: #DDDDEE;
}
/*navbar*/
.nav {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
display: block;
position: relative;
}
.nav li {
display: inline-block;
}
.nav a {
display: inline-block;
color: pink;
font-family: 'Homemade Apple', cursive;
padding: 6px;
}
.nav li a:hover {
color: #B76E79;
/*padding: 8px;*/
z-index: 1;
}
.one,
.two,
.three,
.four,
.five {
border: 3px solid pink;
border-radius: 16px;
}
.one:hover,
.two:hover,
.three:hover,
.four:hover,
.five:hover {
background: #DDDDEE;
}
<h1>Debi's Babies</h1>
<h2>A Mother's collection of Snow Babies</h2>
<ul class="nav">
<li class="one">Home</li>
<li class="two">Original Figurines</li>
<li class="three">Villages</li>
<div class="dropdown">
<a href="guest_collect.html"><button class="dropbtn">The Guest
Collection</button></a>
<div class="dropdown-content">
<li class="c">Dr. Seuss</li>
<li class="d">Rudolph and Friends</li>
<li class="e">Santa</li>
<li class="f">Wizard of Oz</li>
</div>
</div>
<li class="four">Oranments</li>
<li class="five">Snow Bunnies</li>
</ul>
As for your second question, you don't have to assign a class to each list item element. You can target the li directly. Depending on exactly which <li> elements you're trying to target, you can increase the specificity.
The problem for you is that .nav li won't work, as that will target any <li> element that is a child of .nav. In order to only target the direct children (excluding grandchildren), you need to make use the child combinator (>), with .nav > li.
Finally, I'm afraid that StackOverflow is a question-answer website, not a place to connect with other developers. If you're looking to connect to other programmers, there's no better place than StackOverflow Chat.
Hope this helps! :)
It is not correct use of div in ul, ul accepts li as children only.
See this: More
so, use li instead of div like this:
<li class = "dropdown">
<a href= "guest_collect.html">The Guest
Collection</a>
<ul class = "dropdown-content">
<li class="c">Dr. Seuss</li>
<li class="d">Rudolph and Friends</li>
<li class="e">Santa</li>
<li class="f">Wizard of Oz</li>
</ul>
</li>
And insert this css code:
li {
position: relative;
}
li:hover ul {
display: block;
padding: 0;
z-index: 999;
}
li ul {
position: absolute;
display: none;
list-style: none;
background-color: #DDDDEE;
border-radius: 5px;
top: 42px;
}
.nav li ul li {
width: 100%;
}
And other css codes:see code snippet
.nav {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
display: block;
position: relative;
margin: 0 auto;
width: 100%;
}
.nav li{
display: inline-block;
}
.nav a {
display: block;
color: pink;
font-family: 'Homemade Apple', cursive;
padding: 6px;}
.nav li a:hover {
color: #B76E79;
padding: 8px;
z-index: 1;
}
.one,.two,.three,.four,.five,.dropdown {
border: 3px solid pink;
border-radius: 16px;}
.one:hover,.two:hover,.three:hover,.four:hover,.five:hover,.dropdown:hover {
background: #DDDDEE;
}
li {
position: relative;
}
li:hover ul {
display: block;
padding: 0;
z-index: 999;
}
li ul {
position: absolute;
display: none;
list-style: none;
background-color: #DDDDEE;
border-radius: 5px;
top: 42px;
}
.nav li ul li {
width: 100%;
}
<h1>Debi's Babies</h1>
<h2>A Mother's collection of Snow Babies</h2>
<ul class = "nav">
<li class= "one">Home</li>
<li class= "two">Original Figurines</li>
<li class= "three">Villages</li>
<li class = "dropdown">
<a href= "guest_collect.html">The Guest
Collection</a>
<ul class = "dropdown-content">
<li class="c">Dr. Seuss</li>
<li class="d">Rudolph and Friends</li>
<li class="e">Santa</li>
<li class="f">Wizard of Oz</li>
</ul>
</li>
</div>
</li>
<li class= "four">Oranments</li>
<li class= "five">Snow Bunnies</li>
</ul>
Related
Please don't be rude, im new on here and dont know much about this site, if you do answer my issue, it would help if you leave a "explanation" of what you changed, added, etc. and what it would do
I want to have a menu that has a dropdown, but inside the dropdown will be another dropdown menu [Image of what I'm talking about, (red being the area of the dropdown menu that's inside the other dropdown menu)]
codes given below first is style.css, second is index.html
body
{
font-family: sans-serif;
background: #FFB6C1;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: #FFC0CB;
}
label.logo
{
color: white;
font-weight: bold;
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
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: #ffaebd;
}
li.dropdown
{
display: inline-block;
}
li.dropdown a, .dropbtn
{
color: white;
}
.dropdown-content
{
display: none;
position: absolute;
background: #201e2a;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)
}
.dropdown-content a
{
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown a:hover
{
background: #ffaebd;
}
.dropdown:hover .dropdown-content
{
display: block;
}
/* next */
body
{
font-family: sans-serif;
background: #FFB6C1;
}
/* FFA07A */
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: #FFC0CB;
}
label.logo
{
color: white;
font-weight: bold;
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li
{
float: left;
}
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<label class="logo">Test Page</label>
<li>Home</li>
<li class="dropdown">
Dropdown Menu
<div class="dropdown-content">
Link One
Link Two
Sub Dropdown
<!-- (set to this instead of a dropdown just for showcase/ss reasons) -->
</div>
</li>
</ul>
</body>
</html>
You can do it by putting your exact code of dropdown inside your sub dropdown
<li class="dropdown">
<a id="drpbtn" class="dropbtn">Dropdown Menu</a>
<div aria-label="drpbtn" class="dropdown-content">
Link One
Link Two
Sub dropdown btn
<div aria-label="drpbtn2" class="sub-dropdown-content">
Link One
Link Two
</div>
</div>
</li>
here is an example of how you can do this and I try to keep it as simple as possible to understand how it works :
ul {
margin: 0;
padding: 0;
display: none;
}
.menu {
display: block;
}
li {
padding: 16px;
}
li:hover > ul {
display: block;
}
<ul class="menu">
<li>
Hover me !
<ul>
<li>Menu Item</li>
<li>
Menu Item
<ul>
<li>Menu Item</li>
<li>
Menu Item
</li>
</ul>
</li>
</ul>
</li>
</ul>
codesandbox: https://codesandbox.io/s/vibrant-grass-1byw0b
I am a beginner to web development, and I am trying to make a dropdown menu.
The problem is when I hover on particular element, it consumes more than the expected space.
I want it to appear below the "shop" element. I do not understand where I am going wrong.
.nav {
width: 100%;
float: right;
}
.nav ul {
/* it edits the list, list-style: none; removes the discs from the list items */
float: right;
list-style-type: none;
display: block;
text-align: right;
}
.nav ul li {
display: inline-block;
margin: 20px 40px;
padding: 0 10px 0 10px;
text-align: center;
position: relative;
border: 2px solid gold;
}
.nav ul li a {
/* edits the links- text-decoration: none; removes the underline others are obvious*/
color: #000000;
text-decoration: none;
display: block;
}
.nav ul li ul li {
/* navigation sub-options disappear when not hovered */
display: none;
margin: 0;
padding: 0;
border: 2px solid greenyellow;
}
.nav ul li:hover ul li {
/* navigation options appear when hover on elements */
display: block;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Shop
<ul>
<li>Products</li>
<li>Membership</li>
</ul>
</li>
<li>Blog</li>
<li>News</li>
<li>Activity</li>
<li>Contact Us</li>
</ul>
</div>
Set position: relative on shop-link and position: absolute on dropdown. Then align dropdown with top, left, bottom, transform what would you like.
With transform it would look like this:
.link {
position: relative;
}
.dropdown {
position: absolute;
bottom: 0;
left: 0;
transform: translateY(100%)
}
I think the issue is with the way you organized these elements. Personally, when I make drop down menus, I use <button> for each root of the drop down menu. It makes styling everything much easier.
Then, what I do is I put the main text in an <h2> or <h3>, and style that how I want the main part of the drop down to look. Everything inside of the drop down can be styled using the <button> class' settings. Here's how I modified your code to get what I assumed your looking for.
CSS Styling:
.nav2 a {
color: #000000;
text-decoration: none;
display: block;
}
.nav2 button {
margin: 20px 40px;
padding: 0 10px 0 10px;
border: 0px;
/* change this to the color you want the background of your website to be */
background-color: white;
border: 2px solid gold;
font-size: 0px;
}
.nav2 button:hover {
display: inline-block;
margin: 20px 40px;
padding: 0 10px 0 10px;
text-align: center;
position: relative;
background-color: white;
border: 2px solid greenyellow;
/* change this to the color you want the background of your website to be */
background-color: white;
font-size: 16px;
}
h2 {
color: #000000;
text-decoration: none;
font-size: 16px;
font-weight: normal;
}
And then the HTML body:
<div class="nav2">
<button>
<h2>Home</h2>
</button>
<button>
<h2>Shop</h2>
<br>Products
<br>Membership
</button>
<button>
<h2>Blog</h2>
</button>
<button>
<h2>News</h2>
</button>
<button>
<h2>Activity</h2>
</button>
<button>
<h2>Contact Us</h2>
</button>
</div>
The end result looked like this
I hope my response was helpful!!
Your CSS is a bit messy, but to get it working add the following:
/* sub-nav option list */
.nav > ul > li > ul {
position: absolute;
margin-top: 1px; /* removes border intersection, can't be too large otherwise a gap will remove hover */
left: -55px;
}
position: absolute "removes" the element from the container so it is not contained in your parent's border. This will allow us to use the left, right, bottom, top CSS properties to position the sub-nav.
margin-top is used here to remove the intersection of shop and the sub-nav. However, you should be careful increasing this value greater than 1-2px since it will create empty space and hovering on the elements is required for your sub-nav to show.
Here is the working snippet:
.nav {
width: 100%;
float: right;
}
.nav ul {
/* it edits the list, list-style: none; removes the discs from the list items */
float: right;
list-style-type: none;
display: block;
text-align: right;
}
.nav ul li {
display: inline-block;
margin: 20px 40px;
padding: 0 10px 0 10px;
text-align: center;
position: relative;
border: 2px solid gold;
}
.nav ul li a {
/* edits the links- text-decoration: none; removes the underline others are obvious*/
color: #000000;
text-decoration: none;
display: block;
}
/* sub-nav option list */
.nav > ul > li > ul {
position: absolute;
margin-top: 1px; /* removes border intersection, can't be too large otherwise a gap will remove hover */
left: -55px;
}
.nav ul li ul li {
/* navigation sub-options disappear when not hovered */
display: none;
margin: 0;
padding: 0;
border: 2px solid greenyellow;
}
.nav ul li:hover ul li {
/* navigation options appear when hover on elements */
display: block;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Shop
<ul>
<li>Products</li>
<li>Membership</li>
</ul>
</li>
<li>Blog</li>
<li>News</li>
<li>Activity</li>
<li>Contact Us</li>
</ul>
</div>
Position docs for a better explanation of absolute: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Here You have:
.nav{
position: relative;
display: flex;
justify-content: flex-end;
}
.nav ul{
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}
.nav ul li{
background-color: gold;
border: 1px solid gold;
color: #FFF;
}
.nav ul li:hover{
background-color: #FFF;
color: gold;
}
.nav ul li a{
padding: 1rem 2rem;
color: inherit;
text-decoration: none;
font-family: Verdana;
}
.nav ul li ul {
/* navigation sub-options disappear when not hovered */
display: none;
opacity: 0;
visibility: hidden;
position: absolute;
margin: 0;
padding: 0;
border: 2px solid greenyellow;
}
.nav ul li:hover ul {
/* navigation options appear when hover on elements */
display: flex;
opacity: 1;
visibility: visible;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Shop
<ul>
<li>Products</li>
<li>Membership</li>
</ul>
</li>
<li>Blog</li>
<li>News</li>
<li>Activity</li>
<li>Contact US</li>
</ul>
</div>
I have went through W3Schools to attempt understanding the coding structure of dropdown menus. When opening the page and hovering your cursor to the 'Merch' text it is supposed to display the dropdown menu. For some reason, however, it is not showing. Please amplify for me and show me where I went wrong.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
overflow: hidden;
background-color: dimgray;
list-style-type: none;
}
li {
float: left;
}
li a {
text-decoration: none;
font-family: sans-serif;
display: inline-block;
color: white;
padding: 12px;
}
li a:hover {
background-color: gray;
}
#dropdown {
position: absolute;
display: none;
background-color: darkgray;
min-width: 140px;
}
#dropdown a {
color: white;
text-align: left;
padding: 10px;
display: block;
text-align: left;
}
#dropdown a:hover {
background-color: gray;
}
#dropbtn:hover #dropdown {
display: block;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Merch
<div id="dropdown">
Shirts
Pants
</div>
</li>
<li>About Us</li>
</ul>
</body>
</html>
You need this change in CSS
#dropbtn:hover + #dropdown {
display: block;
}
Dropdown is not a child, it is next element in your current html setup, so, this selector will find it.
Or, better, place id on li element (parent):
<ul>
<li>Home</li>
<li id="dropbtn"><a href="#" >Merch</a>
<div id="dropdown">
Shirts
Pants
</div>
</li>
<li>About Us</li>
</ul>
#dropbtn:hover #dropdown {
display: block;
}
Demo: https://jsfiddle.net/3bfgzf37/
If you use first solution, dropdown dissapears fast, and behave strange...
Explanation: hover on a is not hover on dropdown (a is sibling), hover on li element, is, in the same time, hover on dropdown (parent-child, dropdown is 'inside' li - that produces consistent, desired, behavior).
Second one is better.
ul {
margin: 0;
overflow: hidden;
background-color: dimgray;
list-style-type: none;
}
li {
float: left;
}
li a {
text-decoration: none;
font-family: sans-serif;
display: inline-block;
color: white;
padding: 12px;
}
li a:hover {
background-color: gray;
}
#dropdown{
position: absolute;
display:none;
background-color: darkgray;
min-width: 140px;
}
#dropdown a {
color: white;
text-align: left;
padding: 10px;
display: block;
text-align: left;
}
#dropdown a:hover {
background-color: gray;
}
#dropbtn:hover #dropdown {
display: block;
}
<ul>
<li>Home</li>
<li id="dropbtn"><a href="#" >Merch</a>
<div id="dropdown">
Shirts
Pants
</div>
</li>
<li>About Us</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
Your style tag should be outside the head tag. Plus, the dropdown in this code works now. Just do some slight changes to the colors to your desire. :)
<html>
<head></head>
<style>
ul {
margin: 0;
overflow: hidden;
background-color: dimgray;
list-style-type: none;
}
li {
float: left;
}
li a {
text-decoration: none;
font-family: sans-serif;
display: inline-block;
color: white;
padding: 12px;
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: gray;
}
</style>
<body>
<ul>
<li>Home</li>
<li>
<div class="dropdown">
<button class="dropbtn">Merch</button>
<div class="dropdown-content">
Shirts
Pants
</div>
</div>
</li>
<li>About Us</li>
</ul>
</body>
</html>
I have recently been using tabindex="1" and :focus with divs to make drop down lists in my menu.
But when these drop down lists are clicked they make my links below collapse on themselves, does anyone know why?
Here is the example https://jsfiddle.net/ugjgng5u/4/
When List 1 is clicked all links below shrink and collapse.
<li class=collapse tabindex="1"><a class=red> List 1 </a>
<div class="inside">Content 1....<br>
hi<br>
hi<br>
hi<br>
hi</div></li>
I thought it was to do with clearing the floats after the div? But didn't seem to help.
Thanks!
If I had to guess, it's because the li is inside the menu and you can't detach it. A work around is to make the div absolute.
https://jsfiddle.net/ugjgng5u/7/
HTML
<div id=container>
<div id=top-bar>
<div class=top-links>
<toplinks>
<ul id=menu>
<li><a>A </a></li>
<li class=collapse tabindex="1">
<a class=red> List 1 </a>
<div class="inside">Content 1....
<br> hi
<br> hi
<br> hi
<br> hi
</div>
</li>
<li> <a> C</a></li>
<li><a>B </a></li>
</ul>
</toplinks>
</div>
</div>
</div>
CSS
#container {
background-color: #fff;
max-width: 350px;
z-index: 1;
position: relative;
}
#top-bar {
display: block;
position: relative;
height: auto;
line-height: 1.7;
font-size: 16px;
font: Arial, Helvetica, sans-serif;
}
.top-links li a:hover {
color: #808080;
}
.top-links li ul {
display: none;
}
.top-links li ul li {
display: block;
float: none;
}
.top-links ul li a:hover + .hidden,
.hidden:hover {
display: block;
}
.top-links li > a {
display: block;
font-size: 12px;
font-weight: 600;
height: 44px;
color: #999;
text-decoration: none;
}
li.collapse > a {
cursor: pointer;
display: block;
}
li.collapse:focus {
outline: none;
}
li.collapse > div.inside {
display: none;
}
li.collapse:focus div.inside {
display: block;
}
.inside {
z-index: 10;
position: absolute;
top: 40%;
left: 11%;
background: white;
width: 300px;
padding-left: 20px;
border: 1px solid black;
}
You got some odd choices going on in your JSFiddle.
None-the-less, don't float .indside. Not sure why it's being floated to begin with. When you float and item you take it out of the normal document flow an it no longer takes up space like it did prior to floating. This means the parent element will treat it as if wasn't there.
If you're looking to do a fly-out menu then you should use position: absolute; on the dropdown menu and position: relative; on it's containing element.
Basic fly-out menu below.
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 300px;
background-color: #f1f1f1;
}
li {
position: relative;
line-height: 1.5;
}
li:hover {
background-color: #ccc;
cursor: pointer;
}
li:hover > ul {
display: block;
}
li > ul {
display: none;
position: absolute;
top: 0;
left: 100%;
background-color: #eee;
}
<ul>
<li>One</li>
<li>Two
<ul>
<li>Two A</li>
<li>Two B</li>
</ul>
</li>
<li>Three</li>
</ul>
I set up a menu that uses buttons with links, ul's, and li's inside them. It works fine in Chrome, Android, Safari, and Opera. In Firefox, when the ul's appear the nav jumps down. In IE, the ul's don't display. In both, the links don't appear.
Edit: I chose to do this with buttons because i thought it gave me flexibility a regular ul menu wouldn't - background images, images inside them, attaching javascript events. It also of course creates a layout that is a row of buttons without any extra styling.
http://codepen.io/briligg/pen/emwXaw?editors=110
nav { position: fixed;
top: 0px;
right: 0px;
width: 70%;
float: right;
padding: 2%;
height: 34px;
max-height: 34px;
margin: 5px 0;
}
nav button {
border: 1px solid #666666;
border-radius: 10px;
background-color: #3b4c6d;
color: white;
padding: 0 4px;
height: 32px;
font: 16px;
}
nav button ul {
position: relative;
display: none;
}
nav button:hover ul, nav button:focus ul {
display: block;
z-index: 7;
list-style: none;
background-color: #3b4c6d;
border: 1px solid #666666;
border-radius: 10px;
margin-top: 9px;
padding: 6px 2px;
}
nav button:hover li, nav button:focus li {
padding: 8px 2px;
}
nav a {
text-decoration: none;
color: white;
}
nav a:hover, nav a:focus {
color: #52cbff;
}
Then in the html, the ul's are nested in the buttons, with links, like this:
<button tabindex="4">Being There
<ul tabindex="5">
<li>World Domination</li>
<li>Chickens</li>
<li>Down with Gravity</li>
<li>The Moonstar</li>
</ul>
</button>
In even creating this thing i was already at the limits of my knowledge. I don't know how to go about finding work-arounds, or if that is even possible in this case. Help with even knowing where to go to figure this out would be appreciated, never mind an actual solution to the problem. I've been looking for information and haven't found any.
IE has button {overflow:hidden;} style by default, You can rest that as follows.
nav button {
overflow: visible;
}
Edit: In order to get the links working we'll have to redo the markup, I also adjusted the CSS for the HTML changes. see the following code snippet.
nav {
position: fixed;
top: 0px;
right: 0px;
width: 70%;
float: right;
padding: 2%;
height: 34px;
max-height: 34px;
margin: 5px 0;
white-space: nowrap;
}
nav > ul > li {
display: inline-block;
position: relative;
font-size: 16px;
height: 32px;
line-height: 32px;
border: 1px solid #666666;
border-radius: 10px;
background-color: #3b4c6d;
color: white;
padding: 0 4px;
}
nav > ul > li > ul {
display: none;
list-style: none;
background-color: #3b4c6d;
border: 1px solid #666666;
border-radius: 10px;
padding: 6px;
position: absolute;
z-index: 7;
top: 32px;
left: 0;
}
nav > ul > li:hover > ul {
display: block;
}
nav a {
text-decoration: none;
color: white;
}
nav a:hover {
color: #52cbff;
}
<nav>
<ul>
<li tabindex="1">Purpose</li>
<li tabindex="2">
Moon vs Mars
<ul tabindex="3">
<li>Ambiance</li>
<li>Communication</li>
<li>There and Back</li>
</ul>
</li>
<li tabindex="4">
Being There
<ul tabindex="5">
<li>World Domination</li>
<li>Chickens</li>
<li>Down with Gravity</li>
<li>The Moonstar</li>
</ul>
</li>
</ul>
</nav>
The problem must be caused by this Link inside a button not working in Firefox (and IE).
Full Demo: http://codepen.io/anon/pen/KwOqKv
Instead of putting <a> in <button>, put all <a> inside <li>. Also, as you had, put the secondary links inside another <ul> in the <li>.
<ul class='primary-links'>
<li class='primary'><a href='#'>Primary link</a></li>
<li class='primary'>
<a href='#'>Another primary link</a>
<ul class='secondary-links'>
<li class='secondary'><a href='#'>Secondary Link</a></li>
<li class='secondary'><a href='#'>Another secondary link</a></li>
</ul>
</li>
</ul>
The primary links are display:inline-block in order for them to display horizontally while the secondary links are display:none to initially hide them. The secondary links become visible when the primary links are hovered over. position:absolute removes the secondary links from the document flow preventing the primary links from jumping down when the secondary links become visible.
.primary {
display: inline-block;
}
.secondary-links {
display: none;
position: absolute;
}
.primary:hover > .secondary-links {
display: block;
}
body {
font: 1em/1.5 sans-serif;
}
a:link,
a:visited {
color: #08f;
text-decoration: none;
}
a:hover,
a:active,
a:focus{
color: #f80;
}
ul {
list-style: none;
margin: 0;
padding: .25em;
border-radius: .25em;
background: #fff;
border: thin solid #ccc;
box-shadow: 0 0 .25em #ccc;
}
li {
margin: .5em;
}
nav > ul > li {
display: inline-block;
}
li > ul {
display: none;
position: absolute;
}
li:hover > ul {
display: block;
}
<nav>
<ul>
<li><a href='#'>One</a></li>
<li>
<a href='#'>Two</a>
<ul>
<li><a href='#'>Two One</a></li>
<li><a href='#'>Two Two</a></li>
<li><a href='#'>Two Three</a></li>
</ul>
</li>
<li>
<a href='#'>Three</a>
<ul>
<li><a href='#'>Three One</a></li>
<li><a href='#'>Three Two</a></li>
<li><a href='#'>Three Three</a></li>
<li><a href='#'>Three Four</a></li>
</ul>
</li>
</ul>
</nav>