So I am creating a menu for a site but I can't get these two hover effects to work at the same time. I want that when I hover over the names the letters go brighter + the white block under the names should fade in (not for the active one) but I only get the first effect to work...
Here is the Jsfiddle to see. I appreciate all help :)
HTML:
<body>
<div id="cssmenu">
<ul>
<li class='active'><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Company</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</body>
CSS:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
html {
background: url(img/bodybg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#cssmenu {
background: rgba(51,51,51,0.5);
height: 0.3%;
text-align: center;
}
#cssmenu ul {
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;
}
#cssmenu ul:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#cssmenu ul li {
display: inline-block;
padding: 0;
margin: 0;
}
#cssmenu ul li a {
color: #C8C8C8;
text-decoration: none;
display: block;
padding: 15px 25px;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
position: relative;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s;
}
/*Hover Effekt */
#cssmenu ul li a:hover {
color: #FFFFFF;
}
#cssmenu ul li a:hover:before {
width: 100%;
}
#cssmenu ul li a:before:hover {
opacity: 100%;
}
/* Kleiner Block nach jeder Spalte */
#cssmenu ul li a:after {
content: "";
display: block;
position: absolute;
right: -3px;
top: 19px;
height: 6px;
width: 6px;
background: #E6E6E6;
opacity: .5;
}
/*"Effekt2"*/
#cssmenu ul li a:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background: #FFFFFF;
opacity: 100%;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
/*Aktive Seite Schrift weiß und "Effekt2" aktive*/
#cssmenu ul li.active a {
color: #FFFFFF;
}
#cssmenu ul li.active a:before {
width: 100%;
}
Demo: jsfiddle.net/xwrfmtua
If you add hover to the #cssmenu ul li a:before class do you start to get what you want?
Something like this:
cssmenu ul li a:hover:before
Related
I'm trying to make a navigation bar for a hobby website to display my photography and other interest's of mine, I'm having slight issues with the position of a drop-down bar I have.
I wanted to know how I would be able to position the drop down menu so when I hover over the music item it would show directly under it. I tried position: relevant, it did work but it shifted all the items to the left of it down to align with the drop down menu.
http://jsfiddle.net/daCrosby/Ly8wuws1/
body{
background-color: #333;
}
nav ul {
list-style: none;
margin: 10px;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
nav li {
display: inline-block;
margin: 0 5px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
nav a {
color: black;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
nav a:hover {
color: #12242d;
}
nav span {
display: block;
color: rgba(255,255,255,0.6);
}
.Inav ul {
list-style: none;
margin-top: 20%;
padding: 0;
text-align: left;
top: 0;
left: 0;
position: fixed;
right: 0;
text-align: center;
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
.Inav nav ul li {
display: inline-block;
margin: 0 5px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.Inav nav a {
color: black;
position: block
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
text-decoration: none;
}
.Inav nav a:hover {
color: #12242d;
}
.Inav nav span {
color: rgba(255,255,255,0.6);
}
.Inav ul li:hover ul{
display: block;
margin: 0px;
padding: 0px;
}
.Inav ul li ul{
display: none;
position: absolute;
}
.Inav ul li ul li{
display: block;
}
.Inav ul ul a{
color: white;
}
<div class="Inav">
<nav>
<ul>
<li><span>Home</span></li>
<li><span>FAQ</span></li>
<li><span>Honesty</span></li>
<li><span>Rand2</span></li>
<li><span>Rand3</span></li>
<li><span>Music</span>
<ul>
<li>Kanye</li>
<li>Drake</li>
</ul>
</li>
</ul>
</nav>
</div>
You need to add position: relevant to the parent list items, then add positioning top and left on the sub menu.
nav li {
position: relative;
}
.Inav ul li ul{
position: absolute;
top: 100%; /* modify as necessary */
left: 0px; /* modify as necessary */
}
http://jsfiddle.net/daCrosby/Ly8wuws1/1/
I'm creating a website, and currently I am having issues with my navigation bar. The issue I am having is with the active link. The background won't fit to the size of the initial button like I want it to. The background is just highlighting the text basically.
<div class="nav">
<ul>
<li>Home</li>
<li><a class="active" href="cage-habitat.html">Cage & Habitat</a>
<ul>
<li>Litter Training</li>
</ul>
</li>
<li>Food & Treats</li>
<li>Dust Bath & Care</li>
<li>Safe Toys</li>
<li>Chinquiry</li>
</ul>
</div>
.nav {
background-color: #526655;
}
.nav a {
color: #fff;
text-decoration: none;
}
.nav ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
.nav ul li {
color: #fff;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #526655;
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;
}
.nav ul li:hover {
background: #94b399;
color: #fff;
}
/* drop down styles */
.nav ul li ul {
padding: 0;
position: absolute;
top: 42px;
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;
}
.nav ul li ul li {
background: #94b399;
display: block;
color: #fff;
}
.nav ul li ul li:hover {
background: #94b399;
}
.nav ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
/* end dropdown styles */
.active {
background: #94b399;
}
Any help would be appreciated. https://jsfiddle.net/cweav3r/7j25e8jh/
<ul><li><a href="litter-train-chinchilla.html">Litter
Training</a></li></ul> is taking extra space .
DEMO : http://jsfiddle.net/b89kds70/10/
<div class="nav">
<ul>
<li>Home</li>
<li><a class="active" href="cage-habitat.html">Cage & Habitat</a>
</li>
<li>Food & Treats</li>
<li>Dust Bath & Care</li>
<li>Safe Toys</li>
<li>Chinquiry</li>
</ul>
</div>
.nav {
background-color: #526655;
}
.nav a {
color: #fff;
text-decoration: none;
}
.nav ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
position:relative;
}
.nav ul li {
color: #fff;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #526655;
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;
}
.nav ul li:hover {
background: #94b399;
color: #fff;
}
/* drop down styles */
.nav ul li ul {
padding: 0;
position: relative;
top: 42px;
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;
}
.nav ul li ul li {
background: #94b399;
display: inline;
color: #fff;
}
.nav ul li ul li:hover {
background: #94b399;
}
.nav ul li:hover ul {
position:absolute;
display: block;
opacity: 1;
visibility: visible;
}
/* end dropdown styles */
I'm trying to align a menu on the center. The only problem is that it's a responsive menu and it shrunks ugly when in mobile resolution.
I tried with text-align=center in the div, I tried putting it inside a table and about everything I could find online, so I'm guessing it's something I'm doing wrong at this point.
Here is the actual menu:
<div id='cssmenu'>
<ul>
<li class="active"></img> ACASĂ</li>
<li class='has-sub'></img> PRODUSE
<ul>
<li class='has-sub'><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
<li class='has-sub'><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
</ul>
</li>
<li></img> CONTACT</li>
</ul>
</div>
Nothing hew there, but here's the 2 mile long menu css.
I'm sure I didn't have to post all the following css story, but perhaps it's something I'm overlooking.
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
width: auto;
font-family: 'Open Sans', sans-serif;
line-height: 1;
background: #ffffff;
}
#menu-line {
position: absolute;
top: 0;
left: 0;
height: 3px;
/*background: #009ae1;*/
background: #008000;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu > ul > li > a {
padding: 20px;
font-size: 20px;
text-decoration: none;
text-transform: uppercase;
color: #000000;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
/*color: #009ae1;*/
color: #008000;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 25px;
}
#cssmenu > ul > li.has-sub > a::after {
position: absolute;
top: 21px;
right: 10px;
width: 4px;
height: 4px;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
content: "";
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: border-color 0.2s ease;
-moz-transition: border-color 0.2s ease;
-ms-transition: border-color 0.2s ease;
-o-transition: border-color 0.2s ease;
transition: border-color 0.2s ease;
}
#cssmenu > ul > li.has-sub:hover > a::after {
/*border-color: #009ae1;*/
border-color: #008000;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
right: 0;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: height .2s ease;
-moz-transition: height .2s ease;
-ms-transition: height .2s ease;
-o-transition: height .2s ease;
transition: height .2s ease;
}
#cssmenu ul li:hover > ul > li {
height: 32px;
}
#cssmenu ul ul li a {
padding: 10px 20px;
width: 160px;
font-size: 12px;
background: #333333;
text-decoration: none;
color: #dddddd;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #ffffff;
}
#cssmenu ul ul li.has-sub > a::after {
position: absolute;
top: 13px;
right: 10px;
width: 4px;
height: 4px;
border-bottom: 1px solid #dddddd;
border-right: 1px solid #dddddd;
content: "";
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: border-color 0.2s ease;
-moz-transition: border-color 0.2s ease;
-ms-transition: border-color 0.2s ease;
-o-transition: border-color 0.2s ease;
transition: border-color 0.2s ease;
}
#cssmenu.align-right ul ul li.has-sub > a::after {
right: auto;
left: 10px;
border-bottom: 0;
border-right: 0;
border-top: 1px solid #dddddd;
border-left: 1px solid #dddddd;
}
#cssmenu ul ul li.has-sub:hover > a::after {
border-color: #ffffff;
}
#media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: 100%;
}
#cssmenu ul {
width: 100%;
display: none;
}
#cssmenu.align-center > ul,
#cssmenu.align-right ul ul {
text-align: left;
}
#cssmenu ul li,
#cssmenu ul ul li,
#cssmenu ul li:hover > ul > li {
width: 100%;
height: auto;
border-top: 1px solid rgba(120, 120, 120, 0.15);
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
}
#cssmenu > ul > li,
#cssmenu.align-center > ul > li,
#cssmenu.align-right > ul > li {
float: none;
display: block;
}
#cssmenu ul ul li a {
padding: 20px 20px 20px 30px;
font-size: 12px;
color: #000000;
background: none;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #000000;
}
#cssmenu ul ul ul li a {
padding-left: 40px;
}
#cssmenu ul ul,
#cssmenu ul ul ul {
position: relative;
left: 0;
right: auto;
width: 100%;
margin: 0;
}
#cssmenu > ul > li.has-sub > a::after,
#cssmenu ul ul li.has-sub > a::after {
display: none;
}
#menu-line {
display: none;
}
#cssmenu #menu-button {
display: block;
padding: 20px;
color: #000000;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
}
#cssmenu #menu-button::after {
content: '';
position: absolute;
top: 20px;
right: 20px;
display: block;
width: 15px;
height: 2px;
background: #000000;
}
#cssmenu #menu-button::before {
content: '';
position: absolute;
top: 25px;
right: 20px;
display: block;
width: 15px;
height: 3px;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
}
#cssmenu .submenu-button {
position: absolute;
z-index: 10;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.15);
height: 52px;
width: 52px;
cursor: pointer;
}
#cssmenu .submenu-button::after {
content: '';
position: absolute;
top: 21px;
left: 26px;
display: block;
width: 1px;
height: 11px;
background: #000000;
z-index: 99;
}
#cssmenu .submenu-button::before {
content: '';
position: absolute;
left: 21px;
top: 26px;
display: block;
width: 11px;
height: 1px;
background: #000000;
z-index: 99;
}
#cssmenu .submenu-button.submenu-opened:after {
display: none;
}
}
Here's the fiddle. I hid your drop-down and images since they aren't needed for the example. Here are the two important rules:
ul {
display: block;
text-align: center;
}
li {
display: inline-block;
}
This will now add all items from the center and create space out. Make sure to note that inline-block elements have a hidden margin (space) so if you want them right next to each other, you'll need to create a negative margin on the li.
Wrap these new rules in a min-width media query if you don't want it to mess up your mobile styling.
my problem is that when I hover over the area where the hidden list is, it shows the hidden list. I only want it to show the hidden list when hovered over the 'Language' link on the dropdown menu. Why is it doing this, it's probably something blindingly obvious that I can't spot.
Cheers :)
EDIT: I've already tried using a fixed height for the #lang_bar. I also need the transitions to still work. I've already tried using the display:none and display:block; but that didn't work so I used visibility instead.
Any ideas?
HTML:
<div id="lang_bar">
<ul>
<li><strong>Language</strong>
<ul>
<li><strong>Maori</strong></li>
<li><strong>Tongan</strong></li>
<li><strong>Chinese</strong></li>
<li><strong>Japanese</strong></li>
<li><strong>Korean</strong></li>
</ul>
</ul>
</div>
#lang_bar {
font-family: 'Open Sans', sans-serif;
color: white;
padding-left: 152px;
text-transform: uppercase;
z-index: 40;
position: absolute;
padding-top: 2px;
top: 0;
}
#lang_bar ul ul li a {
padding-top: 3px;
padding-left:5px;
}
#lang_bar ul li ul li a:before {
content: '';
display:block;
right: 0px;
height: 2px;
bottom:117px;
width: 100px;
position: absolute;
background: rgba(255, 255, 255, 0.2);
}
#lang_bar ul li ul li a:after {
content: '';
display:block;
right: 1px;
height: 2px;
width: 100px;
position: absolute;
background: rgba(255, 255, 255, 0.6);
}
#lang_bar li, #lang_bar li ul {
text-decoration: none;
list-style-type: none;
}
#lang_bar ul {
list-style: none;
padding-left: 0px;
}
#lang_bar ul li {
float: left;
width: 100px;
text-align: left;
line-height: 21px;
}
#lang_bar ul li a {
display: block;
color: #FFF;
background: transparent;
text-decoration: none;
text-align: center;
}
#lang_bar ul li ul {
visibility: hidden;
font-size:12px;
opacity: 0;
}
#lang_bar ul li:hover ul {
opacity: 1;
visibility: visible; /* display the dropdown */
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#lang_bar ul li ul a:hover{
transition-duration: 0.6s;
background-color: rgba(255, 0, 0, 0.23);
}
I changed your css a little bit and here is the result
I used display:none and display: block in place of visibility, and everything is working as it should be.
http://jsfiddle.net/sy3qowxs/5/enter link description here
And here is your final CSS:
#lang_bar {
font-family: 'Open Sans', sans-serif;
color: #123111;
padding-left: 152px;
text-transform: uppercase;
z-index: 40;
position: absolute;
padding-top: 2px;
top: 0;
}
#lang_bar a:link{color:#333333;}
#lang_bar ul ul li a {
padding-top: 3px;
padding-left:5px;
}
#lang_bar ul li ul li a:before {
content: '';
display:block;
right: 0px;
height: 2px;
bottom:117px;
width: 100px;
position: absolute;
background: rgba(255, 255, 255, 0.2);
}
#lang_bar ul li ul li a:after {
content: '';
display:block;
right: 1px;
height: 2px;
width: 100px;
position: absolute;
background: rgba(255, 255, 255, 0.6);
}
#lang_bar li, #lang_bar li ul {
text-decoration: none;
list-style-type: none;
}
#lang_bar ul {
list-style: none;
padding-left: 0px;
}
#lang_bar ul li {
float: left;
width: 100px;
text-align: left;
line-height: 21px;
}
#lang_bar ul li a {
display: block;
color: #FFF;
background: transparent;
text-decoration: none;
text-align: center;
}
#lang_bar ul li ul {
display: none;
font-size:12px;
opacity: 0;
}
#lang_bar ul li:hover ul {
opacity: 1;
display: block; /* display the dropdown */
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#lang_bar ul li ul a:hover{
transition-duration: 0.6s;
background-color: rgba(255, 0, 0, 0.23);
}
As an alternative to the display: none solution, for accessibility reasons you can use position:absolute and then move the hidden element off screen:
ul li ul {
position:absolute;
top:-1000px;
}
ul li:hover ul {
top:auto;
}
It should work with visibility, since it hides the element (like display: none) but doesn't remove it from the DOM
Here is a working example: Dropdown Menu
HTML
<ul class="menu">
<li class="menu-item"> Dropdown Menu
<ul class="submenu">
<li class="submenu-item">Link</li>
<li class="submenu-item">Link</li>
<li class="submenu-item">Link</li>
<li class="submenu-item">Link</li>
<li class="submenu-item">Link</li>
</ul>
</li>
</ul>
CSS
.menu-item {
position: relative;
}
.menu-item:hover .submenu {
visibility: visible;
opacity: 1;
}
.submenu {
position: absolute;
visibility: hidden;
transition: all .2s ease;
opacity: 0;
top: 100%;
}
.submenu-item {
padding: .4em;
}
What about just using the adjacent sibling combinator:
Change: #lang_bar ul li:hover ul
To: #lang_bar ul li a:hover + ul
To add to the previous answer, the reason this works when you use the display property instead of visibility is because display removes the element from the document flow, and other elements reflow in its place. Visibility, on the other hand, hides the element, but leaves the empty space as if it were still there. So when you used visibility: hidden, your list item looked like it just contained the text "Language" and the link, but the hidden ul was still there, and still hoverable. That's why when you hovered over where the list item should have been, it reappeared; technically, you were hovering over that first list item, because the sub menu was a child of it.
In general, I use display:block/display:none to toggle hiding and showing of items, rather than visibility. Typically the use case is that you want the element completely hidden from the page, and elements around it to reflow, and the display property will do that for you.
I'm new to coding and am having some trouble getting a drop-down menu to work.
The menu drops down correctly when my cursor hovers over its corresponding tab, but once I move the cursor down to the actual drop-down sub-categories, they disappear.
Here's the CSS for the tabs:
#cssmenu {
position: relative;
height: 44px;
background: #1d309e;
width: auto;
z-index: 100;
}
#cssmenu ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 1;
}
#cssmenu > ul {
position: relative;
display: block;
background: #1d309e;
height: 32px;
width: 100%;
z-index: 99;
text-transform:lowercase;
}
#cssmenu > ul > li {
display: block;
position: relative;
float: left;
margin: 0;
padding: 0;
font-family: tahoma, "Trebuchet MS", verdana, helvetica, arial, sans-serif;
text-transform:lowercase
z-index: 100
}
#cssmenu > ul > #menu-button {
display: none;
}
#cssmenu ul li a {
display: block;
font-family: tahoma, "Trebuchet MS", verdana, helvetica, arial, sans-serif;
text-decoration: none;
text-transform:lowercase
}
#cssmenu > ul > li > a {
font-size: 15px;
padding: 0px 80px;
color: #ffffff;
-webkit-transition: color 0.25s ease-out;
-moz-transition: color 0.25s ease-out;
-ms-transition: color 0.25s ease-out;
-o-transition: color 0.25s ease-out;
transition: color 0.25s ease-out;
text-transform:lowercase
}
#cssmenu > ul > li.has-sub > a {
padding-right: 32px;
}
#cssmenu > ul > li:hover > a {
color: #fff203;
}
#cssmenu li.has-sub::after {
display: block;
content: '';
position: absolute;
width: 0;
height: 0;
z-index: 100
}
#cssmenu > ul > li.has-sub::after {
right: 10px;
top: 20px;
border: 5px solid transparent;
border-top-color: #ffffff;
}
#cssmenu > ul > li:hover::after {
border-top-color: #fff203;
}
#indicatorContainer {
position: absolute;
height: 12px;
width: 100%;
bottom: 0px;
overflow: hidden;
z-index: 100;
}
#pIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #2b2f3a;
z-index: 100;
-webkit-transition: left .25s ease;
-moz-transition: left .25s ease;
-ms-transition: left .25s ease;
-o-transition: left .25s ease;
transition: left .25s ease;
}
#cIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #2b2f3a;
top: -12px;
right: 100%;
z-index: 100;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
top: 70px;
opacity: 0;
-webkit-transition: opacity .3s ease, top .25s ease;
-moz-transition: opacity .3s ease, top .25s ease;
-ms-transition: opacity .3s ease, top .25s ease;
-o-transition: opacity .3s ease, top .25s ease;
transition: opacity .3s ease, top .25s ease;
z-index: 100;
}
#cssmenu ul ul ul {
top: 37px;
padding-left: 5px;
}
#cssmenu ul ul li {
position: relative;
z-index: 100
}
#cssmenu > ul > li:hover > ul {
left: auto;
top: 44px;
opacity: 1;
}
#cssmenu ul ul li:hover > ul {
left: 170px;
top: 0;
opacity: 1;
}
#cssmenu ul ul li a {
width: 130px;
border-bottom: 1px solid #eee;
padding: 10px 20px;
font-size: 12px;
color: #1d309e;
background: #fff;
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
#cssmenu ul ul li:hover > a {
background: #f6f6f6;
color: #ffee00;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last > a {
border-bottom: 0;
}
.submenuArrow {
border: 6px solid transparent;
width: 0;
height: 0;
border-bottom-color: #fff;
position: absolute;
top: -12px;
}
#cssmenu ul ul li.has-sub::after {
border: 4px solid transparent;
border-left-color: #1d309e;
right: 10px;
top: 12px;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
#cssmenu ul ul li.has-sub:hover::after {
border-left-color: #fff;
right: -5px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: auto;
}
#cssmenu ul {
width: auto;
}
#cssmenu .submenuArrow,
#cssmenu #indicatorContainer {
display: none;
}
#cssmenu > ul {
height: auto;
display: block;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu li,
#cssmenu > ul > li {
display: none;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu ul > li:hover > ul,
#cssmenu ul ul > li:hover > ul {
position: relative;
left: auto;
top: auto;
opacity: 1;
padding-left: 0;
z-index: 100
}
#cssmenu ul .has-sub::after {
display: none;
}
#cssmenu ul li a {
padding: 12px 20px;
}
#cssmenu ul ul li a {
border: 0;
background: none;
width: auto;
padding: 8px 35px;
}
#cssmenu ul ul li:hover > a {
background: none;
color: #ffee00;
}
#cssmenu ul ul ul a {
padding: 8px 50px;
}
#cssmenu ul ul ul ul a {
padding: 8px 65px;
}
#cssmenu ul ul ul ul ul a {
padding: 8px 80px;
}
#cssmenu ul ul ul ul ul ul a {
padding: 8px 95px;
}
#cssmenu > ul > #menu-button {
display: block;
cursor: pointer;
}
#cssmenu #menu-button > a {
padding: 14px 20px;
}
#cssmenu ul.open li,
#cssmenu > ul.open > li {
display: block;
}
#cssmenu > ul.open > li#menu-button > a {
color: #fff;
border-bottom: 1px solid rgba(150, 150, 150, 0.1);
}
#cssmenu #menu-button::after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
right: 20px;
top: 15px;
z-index: 100
}
#cssmenu #menu-button::before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
right: 20px;
top: 25px;
z-index: 100
}
#cssmenu ul.open #menu-button::after,
#cssmenu ul.open #menu-button::before {
border-color: #fff;
}
}
And here is the HTML page I'm trying to put it on:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
<link rel='stylesheet' type='text/css' href='styles.css' />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'>
</script>
<script type='text/javascript' src='menu_jquery.js'></script>
</head>
<body>
<h1>Sugar Mule</h1>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='about.html'><span>About</span></a>
<ul>
<li><a href='why.html'><span>Why Sugar Mule?</span></a></li>
<li><a href='staff.html'><span>Staff</span></a></li>
<li class='last'><a href='contact.html'><span>Contact</span></a></li>
</ul>
</li>
<li><a href='issues.html'><span>Issues</span></a></li>
<li><a href='books.html'><span>Books</span></a></li>
<li><a href='submit.html'><span>Submit</span></a></li>
<li class='last'><a href='links.html'><span>Links</span></a></li>
</ul>
</div>
<center><img src="logo.png" alt="Logo" width="700" height="450"></center>
</body>
</html>
Thanks in advance for the help!
Because the dropdown #cssmenu > ul > li:hover > ul has a top offset of 44px.
Then you must make sure all the top level links #cssmenu > ul > li > a are atleast 44px
Heres the ammended CSS
#cssmenu > ul > li > a {
...
min-height:44px;
...
}
Fiddle: http://jsfiddle.net/Varinder/bg763/