it seems that Chrome and transition have got a problem with position absolute. I'm testing with Chrome 36.0. It works fine with the latest Firefox and the latest IE.
The problem is that I can't view the submenu when I pass the mouse pointer over Categorias item menu.
The code:
<!DOCTYPE html>
<html>
<head lang='es'>
<meta charset='UTF-8'>
<title>Menú Desplegable</title>
<link rel='stylesheet' href='css/styles.css' />
<link rel='stylesheet' href='css/fonts.css' />
</head>
<body>
<header>
<nav>
<ul>
<li><a href='#'><span class='primero'><i class='icon icon-house'></i></span>Inicio</a></li>
<li><a href='#'><span class='segundo'><i class='icon icon-tag'></i></span>Categorías</a>
<ul>
<li><a href='#'>Item#1</a></li>
<li><a href='#'>Item#2</a></li>
<li><a href='#'>Item#3</a></li>
<li><a href='#'>Item#4</a></li>
<li><a href='#'>Item#5</a></li>
</ul>
</li>
<li><a href='#'><span class='tercero'><i class='icon icon-suitcase'></i></span>Servicios</a></li>
<li><a href='#'><span class='cuarto'><i class='icon icon-newspaper'></i></span>Acerca De</a></li>
<li><a href='#'><span class='quinto'><i class='icon icon-mail'></i></span>Contacto</a></li>
</ul>
</nav>
</header>
</body>
</html>
And the CSS code:
* {
padding: 0;
margin: 0 auto;
}
header {
width: 100%;
}
a {
text-decoration: none;
}
nav {
margin: 20px auto;
width: 90%;
max-width: 1000px;
}
nav ul {
list-style: none;
}
nav > ul {
display: table;
overflow: hidden;
width: 100%;
background: black;
position: relative;
}
nav > ul li {
display: table-cell;
}
/*Sub-menu*/
nav > ul > li:hover > ul {
display: block;
height: 100%;
}
nav > ul > li > ul {
display: block;
position: absolute;
background: black;
left: 0;
right: 0;
overflow: hidden;
height: 0;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
nav > ul li a {
color: white;
display: block;
line-height: 20px;
padding: 20px;
position: relative;
text-align: center;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
nav > ul > li > ul > li a:hover {
background: #5da5a2;
}
nav > ul > li > a span {
background: #174459;
display: block;
height: 100%;
width: 100%;
left: 0;
position: absolute;
top: -55px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
nav > ul > li > a span .icon {
display: block;
line-height: 60px;
}
nav > ul > li > a:hover > span {
top: 0;
}
/*Colores*/
nav ul li a .primero {
background: #0e5061;
}
nav ul li a .segundo {
background: #5da5a2;
}
nav ul li a .tercero {
background: #f25724;
}
nav ul li a .cuarto {
background: #174459;
}
nav ul li a .quinto {
background: #37a4d9;
}
It seems the problem is in this section:
nav > ul > li > ul {
display: block;
position: absolute;
If I change position to relative, then it appears the submenu when I pass the mouse pointer.
I've been reading about that around internet and it seems a bug solved since 16 or 18 Chrome version, but it doesn't seem at all for this code.
Thanks
This is fix for your css of menu, so now gonna work:
* {
padding: 0;
margin: 0 auto;
}
header {
margin-top:10px;
width: 100%;
overflow: hidden;
height: 150px;
position: relative;
}
a {
text-decoration: none;
}
nav {
top:-20px;
margin: 20px auto;
width: 90%;
max-width: 1000px;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
nav ul {
list-style: none;
}
nav > ul {
display: table;
width: 100%;
background: black;
position: relative;
}
nav > ul li {
display: table-cell;
}
/*Sub-menu*/
nav > ul > li:hover > ul {
display: block;
height: 100%;
}
nav > ul > li > ul {
display: block;
position: absolute;
background: black;
left: 0;
right: 0;
overflow: hidden;
height: 0;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
nav > ul li a {
color: white;
display: block;
line-height: 20px;
padding: 20px;
position: relative;
text-align: center;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
nav > ul > li > ul > li a:hover {
background: #5da5a2;
}
nav > ul > li > a span {
background: #174459;
display: block;
height: 100%;
width: 100%;
left: 0;
position: absolute;
top: -55px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
nav > ul > li > a span .icon {
display: block;
line-height: 60px;
}
nav > ul > li > a:hover > span {
top: 0;
}
/*Colores*/
nav ul li a .primero {
background: #0e5061;
}
nav ul li a .segundo {
background: #5da5a2;
}
nav ul li a .tercero {
background: #f25724;
}
nav ul li a .cuarto {
background: #174459;
}
nav ul li a .quinto {
background: #37a4d9;
}
Related
I've been working on this for ages and am trying everything under the sun to try to figure out how to make this navbar horizontal I've previously done it because I copied and pasted this from an old website I've done but it doesn't seem to be working. what am I doing wrong? Ive done floating to the left display inline all that stuff. is it possible that I have something that could be overriding it?
PS. I'm working in Dreamweaver and using some of the bootstrap codings if that helps.
<nav class="navbar" role="navigation">
<ul class="nav navbar-nav">
<li>home</li>
<li>menu</li>
<li>about</li>
<li>webshop</li>
</ul>
</nav>
/Nav Formatting/
.navbar-nav {
width: 20%;
text-align: center;
}
.navbar-nav > li {
float: right;
display: inline-block;
}
.navbar-nav .nav > lu {
float: right;
display: inline;
}
/Nav Formatting: Hover animation/
.navbar-nav li {
position: relative;
float: left;
margin: 0 20px;
}
.navbar-nav li:before {
content: '';
display: inline;
position: absolute;
bottom: 0;
left: 0;
width: 2px;
height: 0;
background-color: #ABE1DB;
-webkit-transition: height 0.4s ease 0.4s;
transition: height 0.4s ease 0.4s;
}
.navbar-nav li:after {
content: '';
display: inline;
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 0;
background-color: #ABE1DB;
-webkit-transition: height 0.4s ease 0.4s;
transition: height 0.4s ease 0.4s;
}
.navbar-nav li:hover:before, li:hover:after {
height: 100%;
}
.navbar-nav li:hover a {
background-color: transparent;
-webkit-transition: background-color 0.4s ease 0.4s;
transition: background-color 0.4s ease 0.4s;
}
.navbar-nav li:hover a:before, li:hover a:after {
width: 100%;
}
.navbar-nav a {
display: inline;
padding: 0 40px;
height: 100%;
font-weight:normal;
font-size: 18px;
line-height: 60px;
color: #ABE1DB;
text-decoration: none;
-webkit-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
.navbar-nav a:before {
content: '';
display: inline;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 2px;
background-color: #ABE1DB;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
.navbar-nav a:after {
content: '';
display: inline;
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 2px;
background-color: #ABE1DB;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
You have set
.navbar-nav{
width: 20%;
}
How can it expand? Try
.navbar-nav {
width: 100%;
}
/*Nav Formatting*/
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav>li {
float: right;
display: inline-block;
}
.navbar-nav .nav>lu {
float: right;
display: inline;
}
/*Nav Formatting: Hover animation*/
.navbar-nav li {
position: relative;
float: left;
margin: 0 20px;
}
.navbar-nav li:before {
content: '';
display: inline;
position: absolute;
bottom: 0;
left: 0;
width: 2px;
height: 0;
background-color: #ABE1DB;
-webkit-transition: height 0.4s ease 0.4s;
transition: height 0.4s ease 0.4s;
}
.navbar-nav li:after {
content: '';
display: inline;
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 0;
background-color: #ABE1DB;
-webkit-transition: height 0.4s ease 0.4s;
transition: height 0.4s ease 0.4s;
}
.navbar-nav li:hover:before,
li:hover:after {
height: 100%;
}
.navbar-nav li:hover a {
background-color: transparent;
-webkit-transition: background-color 0.4s ease 0.4s;
transition: background-color 0.4s ease 0.4s;
}
.navbar-nav li:hover a:before,
li:hover a:after {
width: 100%;
}
.navbar-nav a {
display: inline;
padding: 0 40px;
height: 100%;
font-weight: normal;
font-size: 18px;
line-height: 60px;
color: #ABE1DB;
text-decoration: none;
-webkit-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
.navbar-nav a:before {
content: '';
display: inline;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 2px;
background-color: #ABE1DB;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
.navbar-nav a:after {
content: '';
display: inline;
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 2px;
background-color: #ABE1DB;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
<!--- Navbar --->
<nav class="navbar" role="navigation">
<ul class="nav navbar-nav">
<li>home</li>
<li>menu</li>
<li>about</li>
<li>webshop</li>
</ul>
</nav>
The outer container .navbar-nav was styled with 20% width. This forced the inner elements to wrap because there was not enough space. A width of 100% is not need here because <nav> is an block element.
If you only have 4 four inner elements, you can give them a width of 25% combined with floating left to stack them next to each other.
Add a clearfix class or overflow:hidden (quick and dirty!) to the outer container to make sure it visally wraps the inner elements.
Please see my updated code snippet for reference:
/*Nav Formatting*/
.navbar-nav {
}
.navbar-nav li {
width: 25%;
float: left;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.navbar-nav .nav > ul {
float: right;
display: inline;
margin: 0;
}
/*Nav Formatting: Hover animation*/
.navbar-nav li {
position: relative;
}
.navbar-nav li:before {
content: '';
display: inline;
position: absolute;
bottom: 0;
left: 0;
width: 2px;
height: 0;
background-color: #ABE1DB;
-webkit-transition: height 0.4s ease 0.4s;
transition: height 0.4s ease 0.4s;
}
.navbar-nav li:after {
content: '';
display: inline;
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 0;
background-color: #ABE1DB;
-webkit-transition: height 0.4s ease 0.4s;
transition: height 0.4s ease 0.4s;
}
.navbar-nav li:hover:before,
li:hover:after {
height: 100%;
}
.navbar-nav li:hover a {
background-color: transparent;
-webkit-transition: background-color 0.4s ease 0.4s;
transition: background-color 0.4s ease 0.4s;
}
.navbar-nav li:hover a:before,
li:hover a:after {
width: 100%;
}
.navbar-nav a {
display: inline;
padding: 0 40px;
height: 100%;
font-weight: normal;
font-size: 18px;
line-height: 60px;
color: #ABE1DB;
text-decoration: none;
-webkit-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
.navbar-nav a:before {
content: '';
display: inline;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 2px;
background-color: #ABE1DB;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
.navbar-nav a:after {
content: '';
display: inline;
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 2px;
background-color: #ABE1DB;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
<!--- Navbar --->
<nav class="navbar" role="navigation">
<ul class="nav navbar-nav">
<li>home</li>
<li>menu</li>
<li>about</li>
<li>webshop</li>
</ul>
</nav>
Your ul is to small. That's why it will press it together. Try
ul.nav.navbar-nav {
width:100%;
}
/*Nav Formatting*/
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav >li {
float: right;
}
.navbar-nav .nav > ul {
float: right;
}
/*Nav Formatting: Hover animation*/
.navbar-nav li {
position: relative;
margin: 0 20px;
}
.navbar-nav li:before {
content: '';
display: inline;
position: absolute;
bottom: 0;
left: 0;
width: 2px;
height: 0;
background-color: #ABE1DB;
-webkit-transition: height 0.4s ease 0.4s;
transition: height 0.4s ease 0.4s;
}
.navbar-nav li:after {
content: '';
display: inline;
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 0;
background-color: #ABE1DB;
-webkit-transition: height 0.4s ease 0.4s;
transition: height 0.4s ease 0.4s;
}
.navbar-nav li:hover:before,
li:hover:after {
height: 100%;
}
.navbar-nav li:hover a {
background-color: transparent;
-webkit-transition: background-color 0.4s ease 0.4s;
transition: background-color 0.4s ease 0.4s;
}
.navbar-nav li:hover a:before,
li:hover a:after {
width: 100%;
}
.navbar-nav a {
display: inline;
padding: 0 40px;
height: 100%;
font-weight: normal;
font-size: 18px;
line-height: 60px;
color: #ABE1DB;
text-decoration: none;
-webkit-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
.navbar-nav a:before {
content: '';
display: inline;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 2px;
background-color: #ABE1DB;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
.navbar-nav a:after {
content: '';
display: inline;
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 2px;
background-color: #ABE1DB;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
<!--- Navbar --->
<nav class="navbar" role="navigation">
<ul class="nav navbar-nav">
<li>home</li>
<li>menu</li>
<li>about</li>
<li>webshop</li>
</ul>
</nav>
I have a question regarding the text color of my drop down menu. The drop down text color is based off of the main link text color. When I select that link it changes to the current tab color, but also changes the drop down text color. I was wondering how to make the drop down menu color independent from the main tab text color.
Here is the HTML:
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul id="nav" class="nav">
<li>Home</li>
<li class="current">Blog
</li>
<li><span>Resources</span>
<ul>
<li>Alcohol</li>
<li>Drugs</li>
<li>Mental Health</li>
<li>Suicide</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul> <!-- end #nav -->
</nav> <!-- end #nav-wrap -->
And here is the CSS:
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* nav-wrap */
#nav-wrap {
position: relative;
font: 15px raleway-heavy, sans-serif;
text-transform: uppercase;
letter-spacing: 1.5px;
float: right;
margin-top: 32px;
margin-right: 20px;
z-index: 99999;
}
/* hide toggle button */
#nav-wrap > a.mobile-btn {
display: none;
border-radius: 3px;
}
ul#nav {
min-height: 48px;
width: auto;
/* left align the menu */
text-align: left;
}
ul#nav li {
position: relative;
list-style: none;
height: 48px;
display: inline-block;
}
/* Links */
ul#nav li a {
/* 8px padding top + 8px padding bottom + 32px line-height = 48px */
display: inline-block;
padding: 8px 11px;
line-height: 32px;
text-decoration: none;
text-align: left;
color: #ffffff;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
ul#nav li a:active { background-color: transparent !important; }
ul#nav li:hover > a,
ul#nav li.current a { color: #00b2ee; }
/* adds down arrow */
ul#nav span:after {
width: 0;
height: 0px;
border: 4px solid transparent;
border-bottom: none;
border-top-color: #00b2ee;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: 5px;
}
/* Sub Menu
----------------------------------------------------- */
ul#nav ul {
position: absolute;
top: 100%;
left: 0;
background: #c7c7c7;
min-width: 100%;
border-radius: 5px 5px 7px 7px;
/* for transition effects */
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
/* Third level sub menu
ul#nav ul ul {
position: absolute;
top: 0;
left: 100%;
border-radius: 0 3px 3px 3px;
}
*/
ul#nav ul li {
padding: 0;
display: block;
text-align: left;
/* for transition effects */
height: 0;
overflow: hidden;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
/*On Hover */
ul#nav li:hover > ul {
opacity: 1; filter: alpha(opacity=100);
}
ul#nav li:hover > ul li {
height: 42px;
overflow: visible;
border-bottom: 1px solid #26272C;
color: #ffffff;
}
ul#nav li:hover > ul li:last-child { border: none; }
/* Sub Menu Anchor links */
ul#nav ul li a {
padding: 6px 15px;
margin: 0;
white-space: nowrap;
font-size: 13px;
}
Any help would be awesome!
add the following at the end of your css script
ul#nav ul li a:hover{
color:red;
}
Example:
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* nav-wrap */
#nav-wrap {
position: relative;
font: 15px raleway-heavy, sans-serif;
text-transform: uppercase;
letter-spacing: 1.5px;
float: right;
margin-top: 32px;
margin-right: 20px;
z-index: 99999;
}
/* hide toggle button */
#nav-wrap > a.mobile-btn {
display: none;
border-radius: 3px;
}
ul#nav {
min-height: 48px;
width: auto;
/* left align the menu */
text-align: left;
}
ul#nav li {
position: relative;
list-style: none;
height: 48px;
display: inline-block;
}
/* Links */
ul#nav li a {
/* 8px padding top + 8px padding bottom + 32px line-height = 48px */
display: inline-block;
padding: 8px 11px;
line-height: 32px;
text-decoration: none;
text-align: left;
color: #ffffff;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
ul#nav li a:active { background-color: transparent !important; }
ul#nav li:hover > a,
ul#nav li.current a { color: #00b2ee; }
/* adds down arrow */
ul#nav span:after {
width: 0;
height: 0px;
border: 4px solid transparent;
border-bottom: none;
border-top-color: #00b2ee;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: 5px;
}
/* Sub Menu
----------------------------------------------------- */
ul#nav ul {
position: absolute;
top: 100%;
left: 0;
background: #c7c7c7;
min-width: 100%;
border-radius: 5px 5px 7px 7px;
/* for transition effects */
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
/* Third level sub menu
ul#nav ul ul {
position: absolute;
top: 0;
left: 100%;
border-radius: 0 3px 3px 3px;
}
*/
ul#nav ul li {
padding: 0;
display: block;
text-align: left;
/* for transition effects */
height: 0;
overflow: hidden;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
/*On Hover */
ul#nav li:hover > ul {
opacity: 1; filter: alpha(opacity=100);
}
ul#nav li:hover > ul li {
height: 42px;
overflow: visible;
border-bottom: 1px solid #26272C;
color: #ffffff;
}
ul#nav li:hover > ul li:last-child { border: none; }
/* Sub Menu Anchor links */
ul#nav ul li a {
padding: 6px 15px;
margin: 0;
white-space: nowrap;
font-size: 13px;
}
ul#nav ul li a:hover{
color:red;
}
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul id="nav" class="nav">
<li>Home</li>
<li class="current">Blog
</li>
<li><span>Resources</span>
<ul>
<li>Alcohol</li>
<li>Drugs</li>
<li>Mental Health</li>
<li>Suicide</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul> <!-- end #nav -->
</nav> <!-- end #nav-wrap -->
I created the fiddle using your code. While hovering over the drop down menu links, the text color changes to the blue as being used on the current menu tab. In case you don't want to use blue on text hover in the drop down menu and want to go with the white text links, just remove "ul#nav li:hover > a," from your code and it'll do the work.
Now your new CSS code should look like :-
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* nav-wrap */
#nav-wrap {
position: relative;
font: 15px raleway-heavy, sans-serif;
text-transform: uppercase;
letter-spacing: 1.5px;
float: right;
margin-top: 32px;
margin-right: 20px;
z-index: 99999;
}
/* hide toggle button */
#nav-wrap > a.mobile-btn {
display: none;
border-radius: 3px;
}
ul#nav {
min-height: 48px;
width: auto;
/* left align the menu */
text-align: left;
}
ul#nav li {
position: relative;
list-style: none;
height: 48px;
display: inline-block;
}
/* Links */
ul#nav li a {
/* 8px padding top + 8px padding bottom + 32px line-height = 48px */
display: inline-block;
padding: 8px 11px;
line-height: 32px;
text-decoration: none;
text-align: left;
color: #ffffff;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
ul#nav li a:active { background-color: transparent !important; }
ul#nav li.current a { color: #00b2ee; }
/* adds down arrow */
ul#nav span:after {
width: 0;
height: 0px;
border: 4px solid transparent;
border-bottom: none;
border-top-color: #00b2ee;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: 5px;
}
/* Sub Menu
----------------------------------------------------- */
ul#nav ul {
position: absolute;
top: 100%;
left: 0;
background: #c7c7c7;
min-width: 100%;
border-radius: 5px 5px 7px 7px;
/* for transition effects */
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
/* Third level sub menu
ul#nav ul ul {
position: absolute;
top: 0;
left: 100%;
border-radius: 0 3px 3px 3px;
}
*/
ul#nav ul li {
padding: 0;
display: block;
text-align: left;
/* for transition effects */
height: 0;
overflow: hidden;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
/*On Hover */
ul#nav li:hover > ul {
opacity: 1; filter: alpha(opacity=100);
}
ul#nav li:hover > ul li {
height: 42px;
overflow: visible;
border-bottom: 1px solid #26272C;
color: #ffffff;
}
ul#nav li:hover > ul li:last-child { border: none; }
/* Sub Menu Anchor links */
ul#nav ul li a {
padding: 6px 15px;
margin: 0;
white-space: nowrap;
font-size: 13px;
}
In case you want to use some different color while hovering over the drop down text links, you need to use this code separately in the css :-
ul#nav li:hover > a {color:your color name or color code}
I have a css drop down menu with 2 sub menus. A horizontal bar which has one item that drops down vertically. When you hover over the sub menu, another sub menu pops out to the right...The first item is directly to the right of the hovered item...The problem, is when there are a bunch of items, you have to scroll the page down to see them...I want to vertically center it or show it at the very top of the submenu...
Below is the CSS
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0px auto;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
z-index: 99;
text-align: center;
-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: #F21201;
text-align: center;
}
#menu-line {
position: absolute;
top: 0;
left: 0;
height: 3px;
background: #FFE973;
-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 {
display: inline-block;
}
#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: 12px;
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: #FFFFFF;
}
#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;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
border: solid 1px Black;
}
#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: #FFE973;
text-decoration: none;
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 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;
}
I've changed cssmenu ul ul ul top: to a negative number, but when you select one of the top submenus, it goes up too far and has the opposite problem.
https://jsfiddle.net/zvqz9xdm/
I've changed #cssmenu ul ul ul top to a negative number, but when
you select one of the top submenus, it goes up too far and has the
opposite problem.
I think you were close. The problem is you were applying the adjustment to all sub submenus, as opposed to only the ones that were overflowing.
So, right now, all "MENU" items from "Appetizers" to "Sweet & Sour" display their submenus mostly within range. No problems there.
The problem begins with "Chow Mein", where a series of items begin to overflow the parent menu.
In your code, you have all sub submenus positioned to the top of the container:
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
For each submenu starting at "Chow Mein" and ending at "Platters, you will need to adjust the top property to shift them into the desired range.
I didn't use a single class with a top or bottom adjustment applied to all overflowing menus because "platters" is way too long and the shorter menus still need to align with their parent menu item, or the hovering will break.
Replace the <ul> for each of the following menu items with the adjusted code.
<ul class="align1"> <!-- Chow Mein -->
<ul class="align2"> <!-- Curry -->
<ul class="align3"> <!-- Chop Suey -->
<ul class="align4"> <!-- Beef -->
<ul class="align5"> <!-- Poultry -->
<ul class="align6"> <!-- Platters -->
Then add these rules to your CSS:
#cssmenu ul ul ul.align1 { top: -100px; }
#cssmenu ul ul ul.align2 { top: -40px; }
#cssmenu ul ul ul.align3 { top: -125px; }
#cssmenu ul ul ul.align4 { top: -30px; }
#cssmenu ul ul ul.align5 { top: -30px; }
#cssmenu ul ul ul.align6 { top: -350px; }
DEMO: https://jsfiddle.net/zvqz9xdm/4/
I've created a drop down menu with pure CSS and I've gotten it to a place that I like EXCEPT I want it to be "drop-up" not drop-down since the menu bar is going at the bottom of the layout. I can't figure out what to add or change to make it "drop-up," help please!!
The CSS I used:
#cssmenuf {
position: relative;
height: 50px;
background: #2b2f3a;
width: auto;
}
#cssmenuf ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 1;
}
#cssmenuf > ul {
position: relative;
display: block;
background: #2b2f3a;
height: 32px;
width: 100%;
z-index: 500;
bottom:100%;
}
#cssmenuf > ul > li {
display: block;
position: relative;
float: left;
margin: 0;
padding: 0;
}
#cssmenuf ul li a {
display: block;
font-family: Helvetica, sans-serif;
text-decoration: none;
}
#cssmenuf > ul > li > a {
font-size: 12px;
font-weight: bold;
padding: 15px 20px;
color: #7a8189;
text-transform: uppercase;
-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;
}
#cssmenuf > ul > li.has-subf > a {
padding-right: 25px;
}
#cssmenuf > ul > li:hover > a {
color: #ffffff;
}
#cssmenuf li.has-subf::after {
display: block;
content: '';
position: absolute;
width: 0;
height: 0;
}
#cssmenuf > ul > li.has-subf::after {
right: 10px;
top: 20px;
border: 5px solid transparent;
border-top-color: #7a8189;
}
#cssmenuf > ul > li:hover::after {
border-top-color: #ffffff;
}
#cssmenuf 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: 1000;
}
#cssmenuf ul ul ul {
top: 37px;
padding-left: 5px;
}
#cssmenuf ul ul li {
position: relative;
}
#cssmenuf > ul > li:hover > ul {
left: auto;
top: 44px;
opacity: 1;
}
#cssmenuf ul ul li:hover > ul {
left: 170px;
top: 0;
opacity: 1;
}
#cssmenuf ul ul li a {
width: 130px;
border-bottom: 1px solid #eee;
padding: 10px 20px;
font-size: 12px;
color: #9ea2a5;
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;
}
#cssmenuf ul ul li:hover > a {
background: #f6f6f6;
color: #8c9195;
}
#cssmenuf ul ul li:last-child > a,
#cssmenu ul ul li.last > a {
border-bottom: 0;
}
#cssmenuf ul ul li.has-subf::after {
border: 4px solid transparent;
border-left-color: #9ea2a5;
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;
}
#cssmenuf ul ul li.has-subf: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);
}
HTML
<div id='cssmenuf'>
<ul>
<li class='active'><a href='index.html'>
<span>About Us</span></a>
</li>
<li class='active'><a href='#'>
<span>FAQ</span></a>
</li>
<li class='active'><a href='#'>
<span>Contact Us</span></a>
</li>
<li class='active'><a href='#'>
<span>Testimonial</span></a>
</li>
<li class='has-subf'><a href='#'><span>Share On</span></a>
<ul>
<li class='has-subf'><a href='#'>
<span>Facebook</span></a></li>
<li class='has-subf'><a href='#'>
<span>Google+</span></a></li>
<li class='has-subf'><a href='#'>
<span>linkedIn</span></a></li>
<li class='has-subf'><a href='#'>
<span>Twitter</span></a></li>
</ul></li>
</ul>
</div>
In "#cssmenuf ul ul" and "#cssmenuf > ul > li:hover > ul" you use "top" instead of "bottom" to position your element. Change "top: 70px;" to "bottom: 70px;" and "top: 44px;" to "bottom: 44px;" and it should work.
In my code, I have a drop-down menu. However, the grey box extends to the end of the screen. How can I limit the grey box?
Code from here: http://cssdeck.com/labs/7rsznauv
HTML:
<nav>
<ul class="cf">
<li><a class="dropdown" href="#">Menu Item 2</a>
<ul>
<li>Sub-menu Item 1</li>
<li>Sub-menu Item 2</li>
<li>Sub-menu Item 3</li>
</ul>
</li>
</ul>
</nav>
CSS:
nav ul {
-webkit-font-smoothing:antialiased;
text-shadow:0 1px 0 #FFF;
background: #ddd;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
nav li {
float: left;
margin: 0;
padding: 0;
position: relative;
min-width: 25%;
}
nav a {
background: #ddd;
color: #444;
display: block;
font: bold 16px/50px sans-serif;
padding: 0 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav .dropdown:after {
content: ' ▶';
}
nav .dropdown:hover:after{
content:'\25bc'
}
nav li:hover a {
background: #ccc;
}
nav li ul {
float: left;
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav li:hover ul {
opacity: 1;
top: 50px;
visibility: visible;
}
nav li ul li {
float: none;
width: 100%;
}
nav li ul a:hover {
background: #bbb;
}
/* Clearfix */
.cf:after, .cf:before {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
nav ul {
-webkit-font-smoothing:antialiased;
text-shadow:0 1px 0 #FFF;
background: #ddd;
list-style: none;
margin: 0;
padding: 0;
width: 90%; // I made it 90% you can make it even narrower
}
Just reduce the width by reducing the percentage or like width: 180px;
just change the width in hnav ul{....}, actually is 100%, change it to 50% or whatever you want