Hi im trying to create a navigation bar which when you hover the li another list come out from the side to show other options. My problem I can get to align with the first li but I'm not sure how to do it with the rest of the list. At the moment the drop down list stays in the same position.
Im sure I haven't explained it well enough here is my code.
<body class="menu">
<header>
<nav class="menu-side">
<ul>
<li class="icon-home"><span>Home</span></li>
<li class="arrow"> <a class="star" href="#">England</a>
<ul>
<li><a class="ee" href="Premiership.html">Premiership</a>
</li>
<li>Championship
</li>
<li>League 1
</li>
<li>League 2
</li>
</ul>
</li>
<li class="arrow"> France
<ul >
<li id="r"><a class="ee" href="Unavailble.html">Ligue 1</a>
</li>
</ul>
</li>
<li class="arrow"> Germany
<ul>
<li><a class="ee" href="Unavailble.html">Bundesliga</a>
</li>
</ul>
</li>
<li class="arrow"> Italy
<ul>
<li><a class="ee" href="Unavailble.html">Serie A</a>
</li>
</ul>
</li>
<li class="arrow"> Spain
<ul>
<li><a class="ee" href="Unavailble.html">La Liga</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
https://jsfiddle.net/2zov6q2v/
Change margin of your lists:
nav ul ul {
height: auto;
display: none;
position:absolute;
background-color: #399077;
margin-left: 89.5%;
//top: 9%; delete this line
margin-top: -38px; //add this line
z-index:150;
}
jsfiddle
.menu {
position: relative;
left: 0;
}
.menu-open {
left: 0;
}
.menu-open .menu-side {
left: 0;
}
.menu-side,
menu {
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
transition: left 0.2s ease;
}
.menu-side {
background-color: #333;
color: #fff;
position: fixed;
top: 0;
left: 0;
width: 210px;
height: 100%;
padding: 2px;
}
body {
display: block;
margin: 8px;
background: #f0f0f0;
}
nav ul {
background-color: #43a286;
/* overflow: hidden; <----------------- here */
color: white;
padding: 0;
text-align: center;
margin: 0;
width: 100%;
height: 100%;
-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
}
nav ul li {
display: block;
padding: 20px;
width: 80%;
text-align: center;
position: relative; /* <------------------ and here */
}
nav ul li:hover {
background-color: #399077;
}
nav ul .arrow:hover {
border-right: 10px solid white;
border-right-width: thick;
width: 79%;
}
nav ul ul {
height: auto;
display: none;
position: absolute;
background-color: #399077;
left: 89.5%;
top: 9%;
z-index: 150;
}
nav ul ul li {
display: block;
width: 75%;
text-align: center;
}
nav ul li:hover ul {
display: block;
width: 165px;
}
/*nav .ee:after {
content: '';
width: 0;
height: 0;
border-top: 8px solid black;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
position: absolute;
z-index: 1;
top: 0%;
left: 50%;
margin-left: -6px
} */
nav ul li a,
visited {
color: white;
font-family: 'CFJackStory-Regular', Helvetica, Arial, sans-serif;
display: block;
text-decoration: none;
}
nav ul ul li a:hover {
color: white;
font-size: 20px;
}
<body class="menu">
<header>
<nav class="menu-side">
<ul>
<li class="icon-home"><span>Home</span>
</li>
<li class="arrow"> <a class="star" href="#">England</a>
<ul>
<li><a class="ee" href="Premiership.html">Premiership</a>
</li>
<li>Championship
</li>
<li>League 1
</li>
<li>League 2
</li>
</ul>
</li>
<li class="arrow"> France
<ul>
<li id="r"><a class="ee" href="Unavailble.html">Ligue 1</a>
</li>
</ul>
</li>
<li class="arrow"> Germany
<ul>
<li><a class="ee" href="Unavailble.html">Bundesliga</a>
</li>
</ul>
</li>
<li class="arrow"> Italy
<ul>
<li><a class="ee" href="Unavailble.html">Serie A</a>
</li>
</ul>
</li>
<li class="arrow"> Spain
<ul>
<li><a class="ee" href="Unavailble.html">La Liga</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
Change this style
.menu{
position: relative;
left: 0;
}
.menu-open{
left: 0;
}
.menu-open .menu-side{
left: 0;
}
.menu-side, menu {
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
transition: left 0.2s ease;
}
.menu-side{
background-color: #333;
color: #fff;
position: fixed;
top: 0;
left: 0;
width: 210px;
height: 100%;
padding: 2px;
}
body{
display: block;
margin: 8px;
background: #f0f0f0;
}
nav ul{
background-color: #43a286;
color:white;
padding: 0;
text-align: center;
margin: 0;
width: 100%;
height: 100%;
-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
}
nav ul li{
display: block;
padding: 20px;
width: 80%;
text-align: center;
position: relative;
}
nav ul li:hover {
background-color: #399077;
}
nav ul .arrow:hover{
border-right: 10px solid white;
border-right-width: thick;
width: 79%;
}
nav ul ul {
height: auto;
display: none;
background-color: #399077;
left: 212px;
position: absolute;
top: 0;
z-index:150;
}
nav ul ul li{
display: block;
width:75%;
text-align: center;
}
nav ul li:hover ul{
display: block;
width: 165px;
}
/*nav .ee:after {
content: '';
width: 0;
height: 0;
border-top: 8px solid black;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
position: absolute;
z-index: 1;
top: 0%;
left: 50%;
margin-left: -6px
} */
nav ul li a, visited{
color:white;
font-family: 'CFJackStory-Regular', Helvetica, Arial, sans-serif;
display: block;
text-decoration: none;
}
nav ul ul li a:hover{
color:white;
font-size: 20px;
}
<body class="menu">
<header>
<nav class="menu-side">
<ul>
<li class="icon-home"><span>Home</span></li>
<li class="arrow"> <a class="star" href="#">England</a>
<ul>
<li><a class="ee" href="Premiership.html">Premiership</a>
</li>
<li>Championship
</li>
<li>League 1
</li>
<li>League 2
</li>
</ul>
</li>
<li class="arrow"> France
<ul >
<li id="r"><a class="ee" href="Unavailble.html">Ligue 1</a>
</li>
</ul>
</li>
<li class="arrow"> Germany
<ul>
<li><a class="ee" href="Unavailble.html">Bundesliga</a>
</li>
</ul>
</li>
<li class="arrow"> Italy
<ul>
<li><a class="ee" href="Unavailble.html">Serie A</a>
</li>
</ul>
</li>
<li class="arrow"> Spain
<ul>
<li><a class="ee" href="Unavailble.html">La Liga</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
See this updated JSFiddle. Set li's to position: relative; and ul ul's to position: absolute. From there you can set ul ul's left to 100%. This pushes them all the way to the right of the parent. You can use left: calc(100% + 5px) to account for li's white right border when hovered. No need for messy margins.
Related
i'm writing on my website and i've some problems with the following code (full code on codepen):
<section class="sidebar">
<ul class="sidebar-menu clearfix">
<li class="sidebar-menu-item">HOME</li>
<li class="sidebar-menu-item">PORTFOLIO</li>
<li class="sidebar-menu-item">BLOG</li>
<li class="sidebar-menu-item">ABOUT ME</li>
<li class="sidebar-menu-item">CONTACT</li>
</ul>
</section>
https://codepen.io/anon/pen/pdErVq
As you can see all the :after elements are aligned in the first row.
How can i expand the elements in the proper <li> tags?
Give position:relative to .sidebar-menu > li class.
.sidebar {
position: fixed;
background-color: #333;
opacity: 0.75;
width: 300px;
height: 100%;
left: -0px;
top: 0;
}
.sidebar-menu {
position: relative;
top: 100px;
padding-left: 20px;
}
.sidebar-menu > li {
color: #fff;
margin-right: 10px;
list-style: none;
font-size: 25px;
font-style: italic;
padding: 10px 5px;
cursor: pointer;
-webkit-transition: all 0.5s;
transition: all 0.5s;
position:relative;
}
.sidebar > ul > li:after {
content: "";
display: block;
position: absolute;
top: 10px;
right: 0;
background-color: rgba(250,250,250,0.5);
width: 0;
height: 37px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.sidebar-menu > li:hover:after {
width: 280px;
}
<section class="sidebar">
<ul class="sidebar-menu clearfix">
<li class="sidebar-menu-item">HOME</li>
<li class="sidebar-menu-item">PORTFOLIO</li>
<li class="sidebar-menu-item">BLOG</li>
<li class="sidebar-menu-item">ABOUT ME</li>
<li class="sidebar-menu-item">CONTACT</li>
</ul>
</section>
Your li's need position: relative.
You can try this Demo
li{position:relative}
li a{position:absolute;}
I am added a tag in li
Hi I've looked up ways to place an arrow under my navigation but I can't get to work on my navigation bar. Any help would be much appreciated.
<nav>
<div class="hello"></div>
<ul>
<li class="icon-home"><span>Home</span></li>
<li class="arrow"> <a class="star" href="#">England</a>
<ul>
<li>Premiership
</li>
<li>Championship
</li>
<li>League 1
</li>
<li>League 2
</li>
</ul>
</li>
<li class="arrow"> France
<ul >
<li id="r">Ligue 1
</li>
</ul>
</li>
<li class="arrow"> Germany
<ul>
<li>Bundesliga
</li>
</ul>
</li>
<li class="arrow"> Italy
<ul>
<li>Serie A
</li>
</ul>
</li>
<li class="arrow"> Spain
<ul>
<li>La Liga
</li>
</ul>
</li>
</ul>
<div class="handle"> Menu </div>
</nav>
I thought that is css would work but it hasn't
li a:after {
content: '';
display: none;
width: 0;
height: 0;
border-top: 6px solid #333;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -6px
}
my code https://jsfiddle.net/jzqv6kr0/
In your case, the arrow is there it's just that the overflow:hidden on the ul means you can't see it.
I've adapted your code a little (see the snippet below) but it requires some tweaks to get it exactly as you might like. I've colored the arrow red for simplicity.
nav ul {
/* overflow:hidden; REMOVE */
}
nav ul li.arrow:after {
content: '';
width: 0;
height: 0;
border-top: 6px solid red;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -6px
}
nav ul {
background-color: #43a286;
color: white;
padding: 0;
text-align: center;
margin: 0;
-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
}
nav ul li {
display: inline-block;
padding: 20px;
width: 12.3%;
text-align: center;
position: relative;
}
nav ul li:hover {
background-color: #399077;
}
nav ul li.arrow:after {
content: '';
width: 0;
height: 0;
border-top: 6px solid red;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -6px
}
nav ul ul {
display: none;
position: absolute;
background-color: #399077;
margin-left: -3%;
z-index: 150;
}
nav ul ul li {
display: block;
width: 75%;
text-align: center;
}
nav ul li:hover ul {
margin-top: 2%;
display: block;
border-bottom-left-radius: 5%;
border-bottom-right-radius: 5%;
width: 165px;
}
nav ul li a,
visited {
color: white;
font-family: 'CFJackStory-Regular', Helvetica, Arial, sans-serif;
display: block;
text-decoration: none;
}
nav ul ul li a:hover {
color: white;
font-size: 20px;
}
<nav>
<div class="hello"></div>
<ul>
<li class="icon-home"><span>Home</span>
</li>
<li class="arrow"> <a class="star" href="#">England</a>
<ul>
<li>Premiership
</li>
<li>Championship
</li>
<li>League 1
</li>
<li>League 2
</li>
</ul>
</li>
<li class="arrow"> France
<ul>
<li id="r">Ligue 1
</li>
</ul>
</li>
<li class="arrow"> Germany
<ul>
<li>Bundesliga
</li>
</ul>
</li>
<li class="arrow"> Italy
<ul>
<li>Serie A
</li>
</ul>
</li>
</ul>
</nav>
How can I change my main navigation bar so that when I go to the "About", "From Internet", "By Me" dropdown lists and then hover over a second layer option both the active top link and active second link remain the same color:
Like here this example here, when you go to hyper link 4 in the last sub-option both active options are green at the same time! How can I do that in mine?
body {
background: #DCDCD8;
}
h2 {
text-align: center;
color: #CCC;
}
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 0;
background: #F5F5F0;
position: relative;
z-index: 100;
display: inline-block;
vertical-align: top;
left: 5px;
top: 0px;
}
.navigation,
.navigation a.main {
border-radius: 4px;
}
.navigation:hover,
.navigation:hover a.main {
border-radius: 4px 4px 0 0;
}
.navigation a.main {
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
transition: 0.2s ease-in-out;
position: relative;
z-index: 100;
display: inline-block;
}
.navigation li {
width: 250px;
height: 40px;
background: #F7F7F7;
font: normal 14px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
transform-origin: 50% 0%;
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
}
.navigation li:nth-child(even) {
background: #F5F5F5;
}
.navigation li:nth-child(odd) {
background: #EFEFEF;
}
.navigation li.n1 {
transition: 0.2s linear 0.8s;
}
.navigation li.n2 {
transition: 0.2s linear 0.6s;
}
.navigation li.n3 {
transition: 0.2s linear 0.4s;
}
.navigation li.n4 {
transition: 0.2s linear 0.2s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
transition: 0.2s linear 0s;
}
.navigation:hover li {
transform: perspective(350px) rotateX(0deg);
transition: 0.2s linear 0s;
}
.navigation:hover .n2 {
transition-delay: 0.2s;
}
.navigation:hover .n3 {
transition-delay: 0.4s;
}
.navigation:hover .n4 {
transition-delay: 0.6s;
}
.navigation:hover .n5 {
transition-delay: 0.8s;
}
#option:hover,
#blue:hover {
color: white;
background-color: #19A3FF;
}
#option:active {
color: white;
background-color: #1c5f8d;
}
#blue:active {
color: white;
background-color: #1c5f8d;
}
#option {
color: black;
}
#blue {
color: black;
}
.navigation ul {
display: none;
position: relative;
top: -40px;
left: 250px;
list-style-type: none;
margin: 0;
padding: 0;
}
.navigation li:hover ul {
display: block;
}
#nav {
min-width: 1020px;
}
<div style="background:#F5F5F0;">
<div>
<div style="float:left; margin-top:0; left:20px;">
<img class="buzz" src="community-activism.png" width="80" height="80" />
</div>
<h1 style="color:black; opacity:40;" class="shrink"><strong> Social Activism</strong></h1>
</div>
<br />
<div id="nav">
<div id="nav_wrapper" style="margin:0 auto; display:inline-block;">
</div>
<div>
<ul class="navigation">
<a class="main" href="#url" style="color:black;" id="blue">Home</a>
</ul>
<ul class="navigation">
<a class="main" href="#url" style="color:black;" id="blue">About ▼</a>
<li class="n1" id="selection">
Poems ►
<ul>
<li class="n6">
Poem From Internet
</li>
<li class="n7">
Poem By Me
</li>
</ul>
</li>
<li class="n2" id="selection">
Informational Media
</li>
<li class="n3" id="selection">
Visual/Video
</li>
<li class="n4" id="selection">
Photo Essay
</li>
<li class="n5" id="selection">
Me
</li>
</ul>
<ul class="navigation">
<a class="main" href="#url" style="color:black;" id="blue">From Internet ▼ </a>
<li class="n1" id="selection">
Poem
</li>
<li class="n2" id="selection">
Informational Media
</li>
<li class="n3" id="selection">
Visual/Video
</li>
<li class="n4" id="selection">
Photo Essay
</li>
</ul>
<ul class="navigation">
<a class="main" href="#url" style="color:black;" id="blue">By Me ▼</a>
<li class="n1" id="selection">
Poem
</li>
<li class="n2" id="selection">
Informational Media
</li>
<li class="n3" id="selection">
Visual/Video
</li>
<li class="n4" id="selection">
Photo Essay
</li>
</ul>
</div>
</div>
</div>
Your nested list needs to be changed slightly. The only valid element directly inside an unordered list <ul> is the list item element <li> and not <a>
This example is basic and made purely to demonstrate a method to colour the backgrounds.
The Background CSS
The background is applied to the list items child <a> element.
Give a background color to the direct child of the hovered list item (this will apply to all top level list items):
li:hover > a {
background: pink;
}
Give a background to the list items link that is being hovered:
li a:hover {
background: purple;
}
That will give you this (purple item is hovered):
Complete Example
* {
margin: 0;
padding: 0;
}
body {
font-family: arial, sans-serif;
}
a {
text-decoration: none;
color: #000;
font-weight: bold;
display: block;
padding: 5px 10px;
}
ul {
list-style: none;
}
ul li {
display: inline-block;
vertical-align: top;
}
ul li .layer li,
ul li:hover .layer .layer li {
display: none;
}
ul li:hover .layer li,
ul li .layer li:hover .layer li {
display: block;
}
li:hover > a {
background: pink;
}
li a:hover {
background: purple;
}
<ul>
<li>Home</li>
<li>Hover Me
<ul class="layer">
<li>Option</li>
<li>Option</li>
<li>Option</li>
<li>Hover Me
<ul class="layer">
<li>Option</li>
<li>Option</li>
<li>Option</li>
</ul>
</li>
</ul>
</li>
</ul>
I'm new to html/css and i've been working on this drop down menu: http://cssdeck.com/labs/he8ykb8n
First problem: I'm trying to make the drop-down menu hover over a background image/slideshow. For some reason i can't do that.
This is what I'm trying to achieve: http://bildeopplaster.no/3qi so the dropdown menu is hovering over the background image.
Second problem: Also if you can see on the demo above you only have "Men's wear" button. I tried to copy the code and just change the button name so all the buttons can be shown like on the nn the picture, but the code didn't align the new button next to the "men's wear" button. Is there any way i can fix so that i can get all the buttons next to each other with same hovering effect?
HTML code for the navbar:
<nav class="navigation">
<ul>
<li class="menubar">MEN'S WEAR
<ul>
<li class="dropdown">TOPWEAR
<ul>
<li>Jackets & Coats</li>
<li>Shirts</li>
<li>Overshirts</li>
<li>T-Shirts</li>
<li>Basic T-Shirts</li>
<li>Knitwear</li>
<li>Sweats</li>
</ul>
</li>
<li class="dropdown">BOTTOMWEAR
<ul>
<li>Jeans</li>
<li>Colour Jeans</li>
<li>Pants</li>
<li>Shorts</li>
</ul>
</li>
<li class="dropdown">FOOTWEAR
<ul>
<li>Boots</li>
<li>Sandals</li>
<li>Shoes</li>
<li>Snickers</li>
</ul>
</li>
<li class="dropdown">ACCESSORIES
<ul>
<li>Belts</li>
<li>Caps</li>
<li>Hats</li>
<li>Scarves</li>
<li>Gloves</li>
<li>Sunglasses</li>
<li>Watches</li>
<li>Jewelry</li>
</ul>
</li>
<li class="dropdown">SALE
<ul>
<li>Jackets & Coats</li>
<li>Shirts</li>
<li>Overshirts</li>
<li>T-Shirts</li>
<li>Basic T-Shirts</li>
<li>Knitwear</li>
<li>Sweats</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li class="menubar">MEN'S WEAR
<ul>
<li class="dropdown">TOPWEAR
<ul>
<li>Jackets & Coats</li>
<li>Shirts</li>
<li>Overshirts</li>
<li>T-Shirts</li>
<li>Basic T-Shirts</li>
<li>Knitwear</li>
<li>Sweats</li>
</ul>
</li>
<li class="dropdown">BOTTOMWEAR
<ul>
<li>Jeans</li>
<li>Colour Jeans</li>
<li>Pants</li>
<li>Shorts</li>
</ul>
</li>
<li class="dropdown">FOOTWEAR
<ul>
<li>Boots</li>
<li>Sandals</li>
<li>Shoes</li>
<li>Snickers</li>
</ul>
</li>
<li class="dropdown">ACCESSORIES
<ul>
<li>Belts</li>
<li>Caps</li>
<li>Hats</li>
<li>Scarves</li>
<li>Gloves</li>
<li>Sunglasses</li>
<li>Watches</li>
<li>Jewelry</li>
</ul>
</li>
<li class="dropdown">SALE
<ul>
<li>Jackets & Coats</li>
<li>Shirts</li>
<li>Overshirts</li>
<li>T-Shirts</li>
<li>Basic T-Shirts</li>
<li>Knitwear</li>
<li>Sweats</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
CSS code for the navigation bar:
.navigation {
position: relative;
background-color: #ddd;
width: 1024px;
height: 42px;
margin: 0 auto;
-webkit-font-smoothing:antialiased;
}
.navigation a {
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.menubar ul {
opacity: 0;
position: relative;
top: 0px;
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;
}
.menubar {
position: relative;
list-style: none;
display: inline;
}
.menubar a {
text-decoration: none;
position: relative;
top: 12px;
right: 40px;
font-weight: bold;
padding: 12px 15px 11px 15px;
}
.menubar a:nth-child(1) {
color: #000;
list-style: none;
}
.menubar a:hover:nth-child(1) {
color: #fff;
background: #000;
}
.menubar:hover ul {
visibility: visible;
opacity: 1;
}
.menubar li{
background: transparent;
}
.dropdown:nth-child(1) {
float: left;
background: #000;
position: relative;
list-style: none;
top: 22px;
right: 80px;
padding-bottom: 96px;
padding-left: 40px;
padding-top: 1px;
margin-right: -20px;
}
.dropdown:nth-child(2) {
float: left;
background: #000;
position: relative;
list-style: none;
top: 22px;
right: 60px;
padding-bottom: 200px;
padding-left: 40px;
padding-top: 1px;
margin-right: -20px;
}
.dropdown:nth-child(3) {
float: left;
background: #000;
position: relative;
list-style: none;
top: 22px;
right: 40px;
padding-bottom: 200px;
padding-left: 40px;
padding-top: 1px;
margin-right: -20px;
}
.dropdown:nth-child(4) {
float: left;
background: #000;
position: relative;
list-style: none;
top: 22px;
right: 20px;
padding-bottom: 63px;
padding-left: 40px;
padding-top: 1px;
margin-right: -20px;
}
.dropdown:nth-child(5) {
float: left;
background: #000;
position: relative;
list-style: none;
top: 22px;
right: 20px;
left: 0px;
padding-bottom: 100px;
padding-left: 42px;
padding-right: 20px;
padding-top: 1px;
}
.dropdown a {
right: 10px;
position: relative;
top: 10px;
left: -40px;
font-weight: bold;
color: #888;
}
.dropdown a:hover {
text-decoration: underline;
color: #fff;
}
.dropdown a:nth-child(1) {
color: #cbcbcb;
}
.dropdown ul {
list-style: none;
display: inline;
position: relative;
padding: 15px;
}
.dropdown ul li {
position: relative;
padding: 8px;
top: 5px;
right: 5px;
font-size: 13.5px;
}
.dropdown ul li a {
font-weight: normal;
}
try this
.menubar:hover ul {
opacity: 0.5;
}
On a side note, always use display:none to hide and display:block to show elements. Visibility can create problems.
I have a navigation menu that I'm trying to get to work, but the submenus keep switching to another submenu whenever I hover over it. How can I get it so that the right menu stays up when I hover over it?
jsfiddle: http://jsfiddle.net/SHQwm/
.hoverBar {
position: relative;
border: 1px solid #d6d6d6;
background: #fff;
padding: 15px 20px;
height: 100px;
}
ul {
margin: 0;
padding: 0;
width: 1152px;
}
.mainmenu > li {
list-style: none;
float:left;
text-align: center;
}
ul.mainmenu > li a {
font-family: 'Open Sans', sans-serif;
padding: 0 10px;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
}
ul li ul {
opacity: 0;
transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-webkit-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
list-style-type: none;
text-align: left;
float: left;
width: 100%;
position: absolute;
z-index: 60;
left: 0;
padding-top: 30px;
}
ul li:hover ul {
opacity: 1;
}
ul li ul li {
float: left;
text-align: left;
border-top: #4c4c4c 1px solid;
border-bottom: #303030 1px solid;
border-radius: 2px;
margin-bottom: 0;
padding: 10px 0;
white-space: nowrap;
width: auto;
}
ul li ul li:hover {
background-color: #008000;
}
.floatr {
position: absolute;
top: 10px;
z-index: 50;
width: 100px;
height: 30px;
background : #ebebeb;
opacity: 0.25;
-ms-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
border-top: solid 1px #00aced;
border-bottom: solid 1px #00aced;
}
.mainmenu > li:hover > a {
opacity: 1;
}
ul li ul li a {
display: block;
padding: 0px;
line-height: 14px;
font-size: 12px;
color: #000;
font-family: 'Open Sans', sans-serif;
text-transform: none !important;
text-align: left;
}
ul li:hover ul li {
display:block;
}
.mainmenu {
height: 100px;
}
#jobBank {
left: 450;
width: 210px;
}
And the HTML:
<nav class="head_nav">
<div class="hoverBar" >
<ul class="mainmenu">
<li class="active">About
<ul style="background-color: red;">
<li>Mission</li>
<li>Board Members</li>
<li>Staff</li>
<li>Members</li>
<li>Task Forces</li>
</ul>
</li>
<li>Events
<ul style="background-color: green;">
<li>Description</li>
<li>Registration with Outlook ICS</li>
<li>Online Payment</li>
<li>Email auto-reminders</li>
<li>Multiple registrants allowed</li>
</ul>
</li>
<li>Galleries
<ul style="background-color: blue;">
<li>EXAMPLE: Executive Board</li>
<li>EXAMPLE: Single Page or Blog Page</li>
<li>EXAMPLE: Photo Gallery</li>
</ul>
</li>
<li>Educational Resources</li>
<li>Economic Development
<ul style="background-color: yellow;">
<li>Major Corporations/Global Businesses</li>
<li>Maps</li>
<li>Available Properties</li>
<li>Communities Represented</li>
<li>Demographics</li>
<li>Workforce</li>
<li>Taxes</li>
<li>Transportation</li>
<li>Utilities</li>
<li>Incentives & Financing</li>
<li>Report and Publications</li>
</ul>
</li>
</li>
<li>Media Room
<ul>
<li class="first">Press Releases</li>
<li>Media Kit Information</li>
<li>Blog</li>
<li>Link to Logo & Standards</li>
<li>Link to Photo Gallery</li>
<li>Twitter, Facebook, LinkedIn, Flickr</li>
<li>Speakers Bureau List/info</li>
<li>Fact Sheet</li>
<li class="last">Media Relations Contact</li>
</ul>
</li>
<li>Job Bank
<ul id="jobBank">
<li class="first">Member Add/Edit/Delete</li>
<li class="last">Time Expire</li>
</ul>
</li>
</ul>
<div class="floatr"></div>
</div>
</nav>
Remove opacity: 0 from ul li ul. Replace it with display: none;. Remove opacity: 1 from ul li:hover ul. Replace it with display: block;. Currently, all of the subnavigations are there, you just can't see them. Setting them to display: none; by default will only display the correct one when the parent navigation element is hovered and will remove the issue you're having. http://jsfiddle.net/SHQwm/5/