I have been searching the internet. This question Hovering <a> in CSS without href on Stack Overflow, doesn't address my issue in a way I can understand.
I am trying to make a "primary" menu, with no links.
From each item in the menu, I'd like to create a drop down menu when hovering or clicking upon the item.
I would like to do this with CSS only.
I am having confusion. I have tried various permutations with z-index, positioning and visibility. However, I am finding it hard to achieve the result I need. I have also tried having links in the outside list items.
This is my code:
HTML:
<ul>
<li>Name 1
<ul>
<li>anteater</li>
<li>bee</li>
<li>cat</li>
<li>dog</li>
</ul>
</li>
<li>Name 2
<ul>
<li>egg</li>
<li>fern</li>
<li>goose</li>
<li>house</li>
</ul>
</li>
</ul>
CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
padding: 30px 15px 20px 15px;
border-right: dotted #FFFFFF 1px;
color: #FFFFFF;
font-size: 11px;
position: relative;
z-index: 3;
}
li.end {
float: right;
}
a {
display: block;
text-decoration: none;
}
a:link {
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;
}
a:hover {
color: #0099FF;
}
a:active {
color: #FFFFFF;
overflow: visible;
}
ul li:active ul, ul ul {
visibility:visible;
}
ul li:active ul, ul ul li {
visibility:visible;
}
ul li:hover ul, ul ul {
visibility: visible;
}
ul li:hover ul, ul ul li {
visibility:visible;
}
ul ul {
list-style-type: none;
margin: 0;
position: absolute;
visibility: hidden;
z-index:-1;
}
ul ul li {
float: left;
padding: 5px 10px;
border-right: dotted #0000FF 1px;
background-color: #000000;
color: #FFFFFF;
font-size: 11px;
position: relative;
visibility:hidden;
}
ul ul li a {
display: block;
text-decoration: none;
}
ul ul li a:link {
color: #0000FF;
}
ul ul li a:visited {
color: #0000FF;
}
ul ul li a:hover {
color: #FFFFFF;
visibility:visible;
}
ul ul li a:active {
color: #FFFFFF;
overflow: visible;
visibility:visible;
}
See this example http://jsfiddle.net/La2L8/
I think you have excessive CSS code
Related
In the below snippet I have a CSS menu using nested lists. A problem I have with it is that when you hover over the second list item, it reveals the nested list but in the process, increases the parent list's height pushing everything else down.
I'm aware I can use a position of absolute however that leads to a problem of the nested list not sitting below it's parent element and making it incredibly annoying to style for each nested list I may want.
Is there a simple way I can solve my problem while maintaining the nested loop sitting below it's parent (and by extension, making it possible to access with the :hover)
* {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
background: #000;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: inline-block;
padding: 20px;
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
background-color: #3ab795;
text-decoration: underline;
}
nav ul li > ul {
display: none;
position: relative;
left: 50px;
border: 1px solid #fff;
}
nav ul li > ul li {
display: block;
color: #fff;
}
nav ul li:hover > ul {
display: block;
}
<nav>
<ul>
<li>Item-1</li>
<li>Item-2
<ul>
<li>Item-2A</li>
<li>Item-2B</li>
<li>Item-2C</li>
<li>Item-2D</li>
</ul>
</li>
<li>Item-3</li>
<li>Item-4</li>
</ul>
</nav>
I hope your issue is fixed in below fiddle. Try it.
* {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
background: #000;
text-align: center;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul li a {
display: inline-block;
padding: 20px;
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
background-color: #3ab795;
text-decoration: underline;
}
nav ul li > ul {
display: none;
position: absolute;
left: 50px;
top:100%;
border: 1px solid #fff;
}
nav ul li > ul li {
display: block;
color: #fff;
}
nav ul li:hover > ul {
display: block;
}
<nav>
<ul>
<li>Item-1</li>
<li>Item-2
<ul>
<li>Item-2A</li>
<li>Item-2B</li>
<li>Item-2C</li>
<li>Item-2D</li>
</ul>
</li>
<li>Item-3</li>
<li>Item-4</li>
</ul>
</nav>
For this you will need to understand the concept of position...Use position:absolute for the drop-menu and position:relative for its parent li...no need to write css for every drop-menu
* {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
background: #000;
text-align: center;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul li a {
display: inline-block;
padding: 20px;
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
background-color: #3ab795;
text-decoration: underline;
}
nav ul li>ul {
display: none;
position: absolute;
top: 100%;
left: 0px;
border: 1px solid #fff;
min-width: 150px;
}
nav ul li>ul li {
display: block;
color: #fff;
}
nav ul li:hover>ul {
display: block;
}
<nav>
<ul>
<li>Item-1</li>
<li>Item-2
<ul>
<li>Item-2A</li>
<li>Item-2B</li>
<li>Item-2C</li>
<li>Item-2D</li>
</ul>
</li>
<li>Item-3
<ul>
<li>Item-3A</li>
<li>Item-3B</li>
<li>Item-3C</li>
<li>Item-3D</li>
</ul>
</li>
<li>Item-4</li>
</ul>
</nav>
There is nothing to worry about using absolute position for submenu. just make the parent relative. According to your code
nav ul li {
display: inline-block;
position: relative; // Added
}
and than modify nested ul like this
nav ul li > ul {
display: none;
position: absolute; // Added
left: 0; // Changed
border: 1px solid #fff;
width: 160px; // Change as per your requirement
}
My sub menu is disappearing on hover. When I hover over the menu item it appears but when i try to go to the sub menu item.. it goes away. Any idea why?
I have tried doing this:
.nav ul li:hover ul {
display: block !important;
}
But i still have the same issue. Any help will be appreciated!
HTML:
<div class="nav">
<ul>
<li>
Testing
<ul>
<li>Testing 1</li>
</ul>
</li>
</ul>
</div>
CSS:
.nav ul {
letter-spacing: 2px;
margin-top: 10px;
}
.nav ul li {
display: inline-block;
border-right: 1px solid #7d7a7a;
}
.nav ul ul li {
border-right: none;
}
.nav ul li:last-child {
border-right: none;
}
.nav ul li a {
display: inline-block;
color: #000;
text-decoration: none;
padding: 0 10px;
height: 80%;
}
.nav ul li a i {
color: #000;
}
.nav ul ul li:hover ul {
display: block;
}
.nav ul li:hover ul {
display: block !important;
}
.nav ul li ul {
position: absolute;
display: none;
background-color: #333;
height: auto;
top: 34px;
padding: 13px 10px;
}
.nav ul li ul li:hover {
background-color: #47a3da;
}
JSFiddle demo
It's happening because there is a gap between the dropdown and the button.
You need to get rid of any margin and top for the dropdown to be right under the button.
Demo
.nav > ul {
letter-spacing: 2px;
margin-top: 10px;
}
.nav ul li ul {
position: absolute;
display: none;
background-color: #333;
height: auto;
padding: 13px 10px;
}
Since you parent li and its dropdown menu-item has extra space between them, dropdown ul losses the event of .nav ul li ul li:hover. To make it work,
simply adjust the vertical distance b/w parent and its dropdown child menu-item
.nav ul li ul {
position: absolute;
display: none;
background-color: #333;
height: auto;
top: 18px; /* Works fine on 18px*/
padding: 13px 10px;
}
JSFiddle
I've been following a web tutorial to create a cascading menu for a system I am developing, it is ok but I have the following problem on my 3rd level menu layer:
When my cursor is above a list item of 2nd layer:
When I move the cursor to the last layer, the link of the active list item changes it color, becoming invisible:
The structure is somewhat like that:
...
<nav>
<ul>
<li><a> Cadastro <a/>
<ul>
<li>
<a>Produtos<a/>
<ul>
<li>
<a>Adicionais<a/>
</li>
<li>
<a>Produtos<a/>
</li>
<li>
<a>"Tamanhos"<a/>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
and this is the css I'm using actually:
nav ul ul {
display: none;
background: #FFD200;
padding: 0;
width: auto;
position: absolute;
top: 100%;
z-index: 1;
}
nav ul ul li {
float: none;
position: relative;
z-index: 2;
}
nav ul ul li a {
padding: 10px 45px;
font-size: 17x;
color: #3F1312;
}
nav ul ul li a:hover {
background: #3F1312;
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #FFD200;
list-style: none;
width: 100%;
position: relative;
display: inline-table;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #3F1312;
}
nav ul li:hover a {
color: #FFD200;
font-size: 17px;
}
nav ul li:hover ul li a {
color: #3F1312;
}
nav ul li:hover ul li a:hover {
color: #FFD200;
}
nav ul li a {
display: block;
padding: 10px 45px;
color: #3F1312;
font-size: 17px;
text-decoration: none;
font-weight: bold;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
I need to know what css rule I have to apply to make it work. Any help is welcome.
You need to set :hover property to the li element and not to "a" element.
see the difference below
nav ul ul li a:hover {
background: #3F1312;
}
/* Replace below code instead of Above one*/
nav ul ul li:hover a {
background: #3F1312;
}
nav ul li:hover ul li a:hover {
color: #FFD200;
}
/* Replace below code instead of Above one*/
nav ul li:hover ul li:hover a {
color: #FFD200;
}
Edit
Checkout following rules, You will need to add these rules into your css to avoid third level menu problem
nav ul li:hover ul li:hover ul li a{
color: #3F1312;
background: #FFD200;
}
nav ul li:hover ul li:hover ul li:hover a{
color: #FFD200;
background: #3F1312;
}
This menu bar works as it should, until hyperlinks are involved, as the browser inserts its own text formatting.
I tried using the pseudo selectors (a:link a:visited) to counteract this, but that prevents the styling I have already created from showing, (as I want the text to change from grey to white upon hover). I also tried #menubar ul li a:link{} but didn't work. How do I prevent the links from changing colour when they are in lists?
Fiddle here: http://jsfiddle.net/CWB9C/1/
HTML:
<div id="menubar">
<ul>
<li> Home
</li>
<li>Facebook
<ul>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
</ul>
</li>
<li>Google.com
<ul>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
</ul>
</li>
<li>Search</li>
</ul>
</div>
CSS:
body {
text-align: center;
}
#menubar ul{
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
#menubar ul li{
font: 18px;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
color:#666;
text-decoration:none;
}
#menubar ul li{
font: 18px;
font-family: latolight;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
}
#menubar ul li:hover {
background: #A03C3A;
color: #D6D6D6;
}
#menubar ul li ul{
padding: 0;
position: absolute;
top: 43px;
left: 0;
width: 150px;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
color:#666;
text-decoration:none;
}
#menubar ul li ul {
padding: 0;
position: absolute;
top: 43px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
}
#menubar ul li ul li {
background:#A03C3A;
display: block;
color: #FFF;
}
#menubar ul li ul li {
background:#A03C3A;
display: block;
color: #FFF;
text-shadow: 0 -1px 0 #000;
z-index:10;
color:#666;
text-decoration:none;
}
#menubar ul li ul li:hover {
background:#4F529F; z-index:10;
}
#menubar ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
z-index:10;
}
Style the a's not li's, or just set to all the a's
a { color:inherit; text-decoration:none; }
Just create a style that will apply to both li and li > a:
#menubar ul li, #menubar ul li a {
color:#666;
font: 18px;
font-family: latolight;
text-decoration: none;
/* Add whatever additional style you want */
}
jsFiddle
From what I'm reading, I think this is what you want
#menubar a {
color: #whatevershadeofgrayhere;
text-decoration: none;
}
#menubar a:hover {
color: #whatevershadeofwhitehere;
}
#menubar ul li:hover a{
color:#fff;
}
You can use the inherit value for color.
#menubar ul li a {
color: inherit;
}
Then it will inherit from the closest parent with a color style. You can then do something like this for the colors.
#menubar ul li ul li {
color: black;
}
fiddle
(nice menu by the way)
Recently a few months ago I had to add sublevel functionality into a drop down menu on one of our sites. The tactic I took before worked well for the one column in the navigation, but I was asked to add a sublevel to the column before it which didn't work because I was using relative positioning (see the example below):
<style type="text/css">
#div#mycontent { overflow: visible; }
#nav ul { font-family: Arial, Verdana; font-size: 10px; margin: 0; padding: 0; list-style: none; font-weight: bold; }
#nav ul li { display: block; float: left; margin: 0;}
#nav li ul { display: none; }
#nav ul li a { display: block; text-decoration: none; color: #3c1c4e; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #f0e8d8; margin-left: 1px; white-space: nowrap; }
#nav ul li a:hover { background: #f0e8d8; }
#nav li:hover ul { display: block; position: absolute; }
#nav li:hover li { float: none; font-size: 11px; }
#nav li:hover a { background: #f0e8d8; }
#nav li:hover li a:hover { background: #fff7e7; }
/* This is for sublevels in the drop down */
#nav li:hover ul li ul {display: none}
#nav li ul li:hover ul { display: block; }
#nav li ul li ul li { position: relative; left: 188px; bottom:25px ;padding-left:1px }
So I modified the sublevels in the drop down menu to use relative positioning used an overlap approach (due to the way to previous coder originally designed the drop down). The new code looks like the one below:
#nav li ul li ul li { position: absolute; left: 125px; bottom: 0px; border-style: solid; border-width: 1px; border-color:purple; z-index: 1; }
However as the title indicates the LI under the unordered list are now stacking on top of one another. Instead of displaying vertically one after the other. I believe it requires me to clear the float, but it looks like it was done up above. So I'm unsure if I need to redefine the float then clear it in order to make sure the links in the sub list will display vertically.
Edit:
A good thought to add the HTML to show how I'm trying to execute this:
<html>
<head>
<style type="text/css">
#div#mycontent { overflow: visible; }
#nav ul { font-family: Arial, Verdana; font-size: 10px; margin: 0; padding: 0; list-style: none; font-weight: bold; }
#nav ul li { display: block; float: left; margin: 0;}
#nav li ul { display: none; }
#nav ul li a { display: block; text-decoration: none; color: #3c1c4e; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #f0e8d8; margin-left: 1px; white-space: nowrap; }
#nav ul li a:hover { background: #f0e8d8; }
#nav li:hover ul { display: block; position: absolute; z-index: 0;}
#nav li:hover li { float: none; font-size: 11px; }
#nav li:hover a { background: #f0e8d8; }
#nav li:hover li a:hover { background: #fff7e7; }
/* This is for sublevels in the drop down */
#nav li:hover ul li ul {display: none}
#nav li ul li:hover ul { display: block; }
#nav li ul li ul li { position: absolute; left: 125px; bottom: 0px; border-style: solid; border-width: 1px; border-color:purple; z-index: 1; }
</style>
</head>
<body>
<div id="nav">
<ul id="menu">
<li>Column 1
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li> Column 2
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Column 3<li>
</ul>
</div>
</body>
</html>
Try these CSS rules for your sublevels in the drop down:
/* This is for sublevels in the drop down */
#nav li:hover ul li ul {
display: none
}
#nav li ul li:hover ul {
display: block;
position:absolute;
top:0;
left:100%;
}
#nav li ul li ul li {
position:relative;
display: block;
float: left;
border: 1px solid purple;
z-index: 1;
}