I have been trying to make a dropdown menu with some simple css and i cant understand why the dropdown wont work i have tried everything i could think of below i have posted the css and the html.
The html code is this
<ul><li>Home</li>
<li>Crockery</li>
<li>
Cutlery
<ul>
<li>Kings</li>
<li>Bead</li>
<li>Tableware</li>
</ul>
</li>
<li>Glassware</li>
<li>Contact</li>
</ul>
The css is this
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
background: #E3CAA1;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
}
Remove this lines:
opacity: 0;
visibility: hidden;
From ul li ul{} selector.
https://jsfiddle.net/uc1pq9no/3/
You have to update ✄ your code with visibility, z-index and opacity as this sample:
ul li:hover ul {
display: block;
visibility: visible;
z-index: 12;
opacity: 1;
}
This code make the submenu visible on hover the first level menù item, with the pseudo-class-selectors
→ Test here a working demo.
Related
I am trying to create a simple CSS dropdown menu, the function is correct but I am having issues when I place it inside a holding DIV. The menu expands inside the DIV and adds scrolling bars.
I have tried hiding the overflow and positioning the elements but it has no effect:
JSFIDDLE
body
{
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
}
.dropdown
{
text-align: left;
display: inline;
margin: 0;
padding: 0px 4px 0px 0px;
list-style: none;
}
.dropdown li
{
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
/*padding: 15px 20px;*/
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.dropdown li:hover
{
background: #555;
color: #fff;
}
.dropdown li ul
{
padding: 0;
position: absolute;
top: 18px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.dropdown li ul li
{
display: block;
color: #000;
padding-bottom: 5px;
}
.dropdown li ul li:hover
{
background: #666;
}
.dropdown li:hover ul
{
display: block;
opacity: 1;
visibility: visible;
}
<div style="box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.08), 1px 1px 4px rgba(255, 255, 255, 0.08) inset;border: 1px solid #DDD; overflow: auto; background-color: #FFF; text-align: center; border-radius: 10px; width:100%; height:50px;">
<ul class="dropdown">
<li>Section1
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
</ul>
</div>
try like this: JSFIDDLE
.dropdown {
text-align: left;
display: inline-block;
margin: 0;
padding: 0px 4px 0px 0px;
list-style: none;
position:absolute;
top:0;
}
HTML:
<div style="box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.08), 1px 1px 4px rgba(255, 255, 255, 0.08) inset;border: 1px solid #DDD;
background-color: #FFF;
text-align: center;
border-radius: 10px;
width:100%;
height:50px; position:relative;">
Add position relative to div and remove overflow property. then add position:absolute to dropdown. Hope this helps !!
Code With Snippet below
body
{
font-family:'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
}
.dropdown
{
text-align: left;
display: inline-block;
margin: 0;
padding: 0px 4px 0px 0px;
list-style: none;
position:absolute;
top:0;
}
.dropdown li
{
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
/*padding: 15px 20px;*/
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.dropdown li:hover
{
background: #555;
color: #fff;
}
.dropdown li ul
{
padding: 0;
position: absolute;
top: 18px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.dropdown li ul li
{
display: block;
color: #000;
padding-bottom: 5px;
}
.dropdown li ul li:hover
{
background: #666;
}
.dropdown li:hover ul
{
display: block;
opacity: 1;
visibility: visible;
}
<div style="box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.08), 1px 1px 4px rgba(255, 255, 255, 0.08) inset;border: 1px solid #DDD;background-color: #FFF;text-align: center;border-radius: 10px;width:100%;height:50px; position:relative;">
<ul class="dropdown">
<li>Section1
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
</ul>
</div>
Give the .dropdown a position absolute; as well.
Fiddle
please try this one:
please Add .dropdown css like this:position absolute;
JSFIDDLE
body
{
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
}
.dropdown
{
position: absolute;
text-align: left;
display: inline;
margin: 0;
padding: 0px 4px 0px 0px;
list-style: none;
}
.dropdown li
{
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
/*padding: 15px 20px;*/
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.dropdown li:hover
{
background: #555;
color: #fff;
}
.dropdown li ul
{
padding: 0;
position: absolute;
top: 18px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.dropdown li ul li
{
display: block;
color: #000;
padding-bottom: 5px;
}
.dropdown li ul li:hover
{
background: #666;
}
.dropdown li:hover ul
{
display: block;
opacity: 1;
visibility: visible;
}
<div style="box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.08), 1px 1px 4px rgba(255, 255, 255, 0.08) inset;border: 1px solid #DDD;overflow: auto;background-color: #FFF;text-align: center;border-radius: 10px;width:100%;height:50px;">
<ul class="dropdown">
<li>Section1
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
</ul>
</div>
I have this navigation, It's working fine. But when I'm apply tags in the li, the text hover, text color effect is just getting messy. I want to apply anchor styling in the css so the text styling remain same after after apply ahrefs.
HTML
<ul class="rexademenu"><li class="rexademenu">Home</li>
<li>About</li>
<li>
Portfolio
<ul class="rexadesubmenu">
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
CSS
.rexademenu {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.rexademenu li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.rexademenu > li:hover {
background: #555;
color: #fff;
}
.rexadesubmenu {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.rexadesubmenu > li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
.rexadesubmenu > li:hover { background: #666; }
.rexademenu > li:hover .rexadesubmenu {
display: block;
opacity: 1;
visibility: visible;
http://jsfiddle.net/oyp6qkyz/2/
Update your css like this:
Css
.rexademenu li a{
color:#666666;
text-decoration:none;
}
.rexademenu li a:hover, .rexademenu li:hover a{
color:#ffffff;
}
Updated Fiddle
(answer derived from comments)
If you don't want underlining and blue color on the menu, you could add this to the css:
.rexademenu li a, .rexademenu li a:hover {
text-decoration: none;
color: #AAA;
}
.rexademenu li a:hover {
text-decoration: none;
color: white;
}
You override the code in your global css-file with this.
I have this css code for a menu:
/** CUSTOMER MENU **/
#CustomerMenu {
margin-bottom:10px;
}
#CustomerMenu ul {
padding: 0;
margin:0 auto 0 auto;
list-style-type: none;
text-align: center;
display:inline;
}
#CustomerMenu ul li {
display: inline;
}
#CustomerMenu ul li a {
text-decoration: none;
padding: 10px;
color: #FFFFFF;
background-color: #666666;
}
#CustomerMenu ul li a:hover {
color: #fff;
background-color: #f36f25;
}
/** CUSTOMER MENU **/
but its not showing the sub items - fiddle below:
http://jsfiddle.net/dvborqgm/
Here's a quick fix: http://jsfiddle.net/0781wtqu/
Basically, add a class to the submenus ("submenu" in my example) and hide it through a CSS rule, then add another CSS rule to show the hidden class when hovering
#CustomerMenu ul li:hover > ul.submenu {
display: block;
}
You have to use :hover and style for :hover on outer li
The submenu must be having position absolute and li as relative.
Following link provides help to create menu using css
http://www.wikihow.com/Create-a-Dropdown-Menu-in-HTML-and-CSS
Sample menu for your reference
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
background: #E3CAA1;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<ul><li>Home</li>
<li>About</li>
<li>
Portfolio
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
Please see below,
The border should only appear on hovered <a> tags, however it appears on all <a> tags within the nested
HTML
<ul><li>Home</li>
<li><a href='#'>About</a></li>
<li>
<a href='#'>Portfolio</a>
<ul>
<li><a href='#'>Web Design</a></li>
<li><a>Web Development</a></li>
<li><a>Illustrations</a></li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
CSS
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
background: #E3CAA1;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li:hover a {
border: 1px solid red;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Change hover link to the below.
ul li li:hover a {
border: 1px solid red;
}
Try this:
ul li:hover > a {
border: 1px solid red;
}
">" means that we make the relationship only with the immediate child, and not the nested ones.
If you want to have borders only around the hovered , then replace the code
ul li:hover a {
border: 1px solid red;
}
with
ul li a:hover {
border: 1px solid red;
}
I have a problem with this simple made list. Only the text is clickable, I'm tying to make the whole block of the text to be clickable but I have failed. I've tried almost everything I could find but seems nothing is working for my code.
My HTML5
<ul>
<li>Αρχική</li>
<li>Συμπληρώματα
<ul>
<li>Πρωτεΐνες</li>
<li>Αμινοξέα</li>
<li>Κρεατίνες</li>
<li>Νιτρικά</li>
<li>Λιποδιαλυτικά</li>
<li>Μπάρες Πρωτεΐνης</li>
<li>Ροφήματα</li>
<li>Ειδικά</li>
</ul>
</li>
<li>Μάρκες
<ul>
<li>Maximuscle</li>
<li>IronMaxx</li>
<li>Leofit</li>
</ul>
</li>
<li>Υπηρεσίες
<ul>
<li>Λιπομέτρηση</li>
<li>Διατροφή</li>
<li>Πρόγραμμα Προπόνησης</li>
</ul>
</li>
<li>Κατάστημα</li>
</ul>
And my CSS3
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
position: relative;
top: 50px;
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #2B2B2B;
color:#CCC;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Excuse my ignorance but I am new to the whole thing.
Instead of targetting the ul li elements as clickable, you need to target the 'a' (Anchor) as it is this that is clicked.
For example, if you add padding to the 'a' then you will notice the cursor change before you hover over the text.
If you are looking at doing a navigation menu whet you want all your links to of the same width you need to make the 'a' a block level element so that it takes up all the wish of its patent li.
follow a simple tutorial such as: http://www.cssterm.com/css-menus/vertical-css-menu/simple-vertical-menu
I see you are also trying to do nested menus (menu in a menu item). You can find many tutorials that can help with nested menus also.