I want to make a drop down menu for my wordpress blog.
But there is a problem.
I want when the user puts their mouse over the <ul></ul>, the sub-category to appear.
I want to solve the problem with CSS only.
Notice: I've changed the direction of the page because I am using an Arabic language.
#menu-body {
border:dotted 1px #FFFFFF;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
background: #2C2C2C;
height:35px;
width:inherit;
color:#fff;
padding-right:15px;
padding-top:0px;
padding-bottom:0px;
font-family:Tahoma , Arial;
font-size:13px;
}
#menu-body ul {
float:right;
list-style:none;
margin:0px 0px 0px 0px;
padding:10px;
cursor:pointer; position:relative;
}
#menu-body ul:hover {
background-color:#FFFFFF;
color:#2C2C2C;
}
#menu-body ul a {
text-decoration:none;
color:#fff;
outline:0;
}
.dropdown_1column { margin:4px auto;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:right;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
/* Gradient background */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;display:block;
border-radius: 0px 5px 5px 5px;}
.dropdown_1column {width: 140px;}
#menu-body ul:hover a {
color:#000;}
<div id="menu-body"><ul>Home</ul>
<ul>Category 1</ul>
<ul>Category 2</ul>
<ul>Category 3
<li>Sub-Cat 1</li>
<li>Sub-Cat 2</li>
<li>Sub-Cat 3</li></ul>
<ul>Category 4</ul></div>
Try with this css & html :
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar * {
transition: 0.3s;
}
.navbar a {
float: right;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="navbar">
Home
Category 1
<div class="dropdown">
<button class="dropbtn">Category 2
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Category 3
Category 4
</div>
</body>
</html>
You can have more exemple on https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp
Related
I am working on the following project:
/* Second Bar */
.header-two-bars .header-second-bar {
background-color: #ffffff;
box-shadow: 1px 3px 3px 0 rgba(0, 0, 0, 0.05);
padding: 20px 40px;
}
.header-two-bars .header-second-bar nav {
font:14px Arial, Helvetica, sans-serif;
}
.header-two-bars .header-second-bar nav a{
display: inline-block;
color: #4e5359;
text-decoration: none;
padding-left: 12px;
padding-right: 12px;
}
.header-two-bars .header-second-bar nav a:hover{
border-radius: 2px;
background-color: #2B5773;
padding-top:8px;
padding-bottom: 8px;
color: white;
opacity: 0.7;
}
.header-two-bars .header-second-bar nav a.selected{
border-radius: 2px;
background-color: #2B5773;
padding: 8px 12px;
color: white;
}
.clear {
clear: both;
}
/*Dropdown menu*/
.dropbtn {
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
margin-top: 0px;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
width: inherit;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
padding-top: initial;
padding-bottom: initial; }
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
}
<div class="header-second-bar">
<div class="header-limiter">
<nav>
<span class="dropdown">
Home
<div class="dropdown-content">
Men
Women
</div>
</span>
Blog
Promo
</nav>
<div class="clear"></div>
</div>
</div>
Everything was working fine, but when I implemented the dowpdown menu, I start having a bug when I tried to hover the dropdown list Men and Women. I think it is due to the padding-top applied to .header-two-bars .header-second-bar nav a:hover
I also don't want to remove it because the others button Blog, Promo need it.
How can I solve the problem without removing the padding-top applied at .header-two-bars .header-second-bar nav a:hover?
.dropdown-content a:hover {
background-color: #f1f1f1;
}
Removing these lines from .dropdown-content a:hover makes it work
padding-top: initial;
padding-bottom: initial;
I think you can add the below css for dropdown elements .dropdown:hover .dropdown-content a { padding: 12px 16px;}
Please see the updated fiddle, hope this will help
/* Second Bar */
.header-two-bars .header-second-bar {
background-color: #ffffff;
box-shadow: 1px 3px 3px 0 rgba(0, 0, 0, 0.05);
padding: 20px 40px;
}
.header-two-bars .header-second-bar nav {
font:14px Arial, Helvetica, sans-serif;
}
.header-two-bars .header-second-bar nav a{
display: inline-block;
color: #4e5359;
text-decoration: none;
padding-left: 12px;
padding-right: 12px;
}
.header-two-bars .header-second-bar nav a:hover{
border-radius: 2px;
background-color: #2B5773;
padding-top:8px;
padding-bottom: 8px;
color: white;
opacity: 0.7;
}
.header-two-bars .header-second-bar nav a.selected{
border-radius: 2px;
background-color: #2B5773;
padding: 8px 12px;
color: white;
}
.clear {
clear: both;
}
/*Dropdown menu*/
.dropbtn {
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
margin-top: 0px;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
width: inherit;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
padding-top: initial;
padding-bottom: initial; }
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropdown-content a { padding: 12px 16px;}
.dropdown:hover .dropbtn {
}
<div class="header-second-bar">
<div class="header-limiter">
<nav>
<span class="dropdown">
Home
<div class="dropdown-content">
Men
Women
</div>
</span>
Blog
Promo
</nav>
<div class="clear"></div>
</div>
</div>
Working on a navigation menu but the question I have is how to make the menu buttom light green when I am on the site i pressed so I can see that I am inside Dagvakt for example ?
The menu only light green when the mouse is over it also should light when the person is in that site. Jsfiddle: http://jsfiddle.net/EkLPG/
Html:
<ul id="nav">
<li><img src="images/home.png" /> Forside
</li>
<li><span><img src="images/temperatur.png" /> Måling</span>
</li>
<li><span><img src="images/sol.png" /> Dagvakt</span>
</li>
<li><img src="images/kveld.png" /> Kveldsvakt
</li>
<li><img src="images/vaske.png" /> Kontroll CM
</li>
<li><img src="images/søk.png" /> Søk
</li>
<li><img src="images/top2.png" /> Statistikk
</li>
<li><img src="images/top3.png" /> Rapport
</li>
</ul>
Css
ul#nav {
width: 1050px;
float: right;
font-family: Trebuchet MS, sans-serif;
font-size: 0;
padding: 5px 5px 5px 0;
background: -moz-linear-gradient(#f5f5f5, #c4c4c4); /* FF 3.6+ */
background: -ms-linear-gradient(#f5f5f5, #c4c4c4); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #c4c4c4)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(#f5f5f5, #c4c4c4); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(#f5f5f5, #c4c4c4); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4')"; /* IE8+ */
background: linear-gradient(#F2F2F2, f5f5f5); /* the standard - Farge */
}
ul#nav, ul#nav ul {
list-style: none;
margin: 10px 0px 0px 0px;
}
ul#nav, ul#nav .subs {
background-color: #444;
border: 0px solid #454545; /* Border */
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
}
ul#nav .subs {
background-color: #fff;
border: 2px solid #222;
display: none;
float: left;
left: 0;
padding: 0 6px 6px;
position: absolute;
top: 100%;
width: 300px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
ul#nav li:hover>* {
display: block;
}
ul#nav li:hover {
position: relative;
}
ul#nav ul .subs {
left: 100%;
position: absolute;
top: 0;
}
ul#nav ul {
padding: 0 5px 5px;
}
ul#nav .col {
float: left;
width: 50%;
}
ul#nav li {
display: block;
float: left;
font-size: 0;
white-space: nowrap;
}
ul#nav>li, ul#nav li {
margin: 0 0 0 5px;
}
ul#nav ul>li {
margin: 5px 0 0;
}
ul#nav a:active, ul#nav a:focus {
outline-style: none;
}
ul#nav a {
border-style: none;
border-width: 0;
color: #181818;
cursor: pointer;
display: block;
font-size: 13px;
font-weight: bold;
padding: 8px 10px;
text-align: left;
text-decoration: none;
text-shadow: #fff 0 1px 1px;
vertical-align: middle;
}
ul#nav ul li {
float: none;
margin: 6px 0 0;
}
ul#nav ul a {
background-color: #fff;
border-color: #efefef;
border-style: solid;
border-width: 0 0 1px;
color: #000;
font-size: 11px;
padding: 4px;
text-align: left;
text-decoration: none;
text-shadow: #fff 0 0 0;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
ul#nav li:hover>a {
border-style: none;
color: #fff;
font-size: 13px;
font-weight: bold;
text-decoration: none;
text-shadow: #181818 0 1px 1px;
}
ul#nav img {
border: none;
margin-right: 8px;
vertical-align: middle;
}
ul#nav span {
background-position: right center;
background-repeat: no-repeat;
display: block;
overflow: visible;
padding-right: 0;
}
ul#nav ul li:hover>a {
border-color: #444;
border-style: solid;
color: #444;
font-size: 11px;
text-decoration: none;
text-shadow: #fff 0 0 0;
}
ul#nav > li >a {
background-color: transpa;
height: 25px;
line-height: 25px;
border-radius: 11px;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
}
ul#nav > li:hover > a {
background-color: #009900;
line-height: 25px;
}
HTML
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="active">profile</li>
<li>Contact</li>
</ul>
</div>
CSS
ul
{
list-style-type:none;
width:500px;
}
li
{
float:left;
display:inline-block;
text-align:center;
width:100px;
background-color:#003366;
padding:10px;
}
a
{
color:white;
text-decoration:none;
}
li.active {
background-color:red;
text-transform:uppercase;
}
li.active a{
color:white;
text-transform:uppercase;
}
Jquery:
$('li').on('click', function(){
$('li').removeClass('active');
$(this).toggleClass('active');
})
Fiddle
Demo
Your's Working Fiddle
I have this HTML code
<div id="navbar">
<ul>
<li>Page1</li>
<li>page2</li>
<li id="NavItem">
page3
<div id="PopOver">
<div class="ow-button">
xnewPage1
xnewPage2
xnewPage3
</div>
</div>
</li>
<li>page4</li>
</ul>
</div>
CSS code
#navbar { position: relative; margin: 3px; }
#navbar ul {
padding: 0;
margin: auto;
background: #f0f0f0 url(../images/1px.png) repeat-x 0 -441px;
padding: 4px 0 4px 0;
}
#navbar li { display: inline; margin-right: 80px; }
#navbar li a {
font-family: EqualSansDemo;
font-size: 1.6em;
color: #555555;
text-shadow: 1px 1px 0px #fff; }
#navbar li a:hover { color: #0071e4; }
#PopOver {
position:absolute;
border:2px solid #07B1F1;
width:170px;
height:auto;
padding:15px 5px 10px 5px;
display:none;
top:30px;
left:229px;
background-color:#FFFFFF;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}
#NavItem:hover #PopOver {display:block}
.ow-button a {
display: block;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 160px;
height: 28px;
font-family: Arial, "Nimbus Sans L", "FreeSans";
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
line-height: 28px;
text-shadow: 1px 1px 1px #6A6A6A;
text-decoration:none;
margin: 0px 5px 10px 5px;
background: #28A9FF;
}
.ow-button a:hover {
background: #48B6FF;
}
The problem:
"#navbar li a" will hide:
font-family: Arial, "Nimbus Sans L", "FreeSans";
font-size: 14px;
color: #FFFFFF;
text-shadow: 1px 1px 1px #6A6A6A;
Which "ow-button a" have..and will enable its own.
And I don't want that... How do I enable the full "ow-button a" CSS code?
The quick and dirty solution is to add !important to your ow-button a which will override #navbar li a.
The better solution is to use better scoped CSS. Use selectors like > to specify exactly the element you want to. In your case, it should look like this:
#navbar > ul > li > a
I made a jsFiddle for you: http://jsfiddle.net/6NrWF/.
Please hover your mouse over the MORE button in the menu here: http://jsfiddle.net/XHard/1/ You will see that there is a list containing the words New clean list. I want to style that list but because it is inside the menu, it already has a styling to it.
I want to create a new clean style for it but cannot find a way to do it. I tried playing around with #mega moreleftbar a but the original menu list styling is still there.
Is there a way to make a new clean styling for a list inside that menu?
Here is part of my HTML:
<div id="second-menu" class="clearfix">
<ul id="secondary-menu" class="nav sf-js-enabled">
<li class="manimation">Animation</li>
</ul>
<ul id="mega">
<li class="dif mmore" style="background:none;">More...
<div>
<moretopbar>
<ul>
<li class="mgames">Games</li>
<li class="mliterature">Literature</li>
<li class="marts">Arts</li>
<li class="mcontact" style="background:none;">Contact</li>
</ul>
</moretopbar>
<morecontainer>
<moreleftbar>
<ul>
<li>New clean list 1</li>
<li>New clean list 2</li>
<li>New clean list 3</li>
<li>New clean list 4</li>
</ul>
</moreleftbar>
</morecontainer>
</div>
</li>
</ul>
</div> <!-- end #second-menu -->
Here is part of my CSS:
ul#top-menu li { padding-right: 2px; background: url(images/menu-bg.png) repeat-y top right; }
ul#top-menu a { font-size: 11px; color: #ffffff; text-decoration: none; text-transform: uppercase; font-weight: bold; text-shadow: 1px 1px 1px rgba(0,0,0,0.7); padding: 16px 12px 10px; }
ul#top-menu a:hover { color: #ebbe5e;}
ul#top-menu > li.current_page_item > a { color: #ebbe5e !important; }
ul#top-menu li ul, #mobile_menu { width: 170px !important; padding: 0; background: #161616 url(images/header-bg.png); top: 45px !important; -moz-box-shadow:3px 3px 7px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border-top-left-radius: 0px;-moz-border-radius-topleft: 0px; border-top-right-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; z-index: 9999px; display: none; }
ul#top-menu ul li, #mobile_menu li a { margin: 0 !important; padding: 10px 7px 10px 25px !important; background: url(images/top-menu-separator.png) repeat-x; }
ul#top-menu ul li.first-item { background: none; }
ul#top-menu ul li a, #mobile_menu a { padding: 0 !important; width: 138px; }
ul#top-menu li:hover ul ul, ul#top-menu li.sfHover ul ul { top: -1px !important; left: 171px !important; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
ul#top-menu li.menu-gradient { background: url("images/top-shadow.png") repeat-x; position: absolute; top: 0; left: 0; width: 202px; height: 7px !important; }
ul#secondary-menu li { background: url(images/secondary-menu-bg.png) repeat-y top right; }
ul#secondary-menu a { font-size: 16px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px; }
ul#secondary-menu a:hover { color: #ffffff; text-shadow: 1px 1px 0 #404747; }
#second-menu ul.nav li:hover a {color: #ffffff; text-shadow: 1px 1px 0 #404747; }
ul#secondary-menu > li.current_page_item > a { color: #919e9e !important; }
ul#secondary-menu li ul, #category_mobile_menu { width: 360px !important; padding: 7px 0 10px; background: #fff url(images/content-bg.png); top: 55px !important; -moz-box-shadow:3px 3px 7px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border-top-left-radius: 0px;-moz-border-radius-topleft: 0px; border-top-right-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; z-index: 9999px; display: none; }
ul#secondary-menu ul li, #category_mobile_menu li a { margin: 0 !important; padding: 8px 0 8px 30px !important; width: 150px; float: left; }
ul#secondary-menu ul li a, #category_mobile_menu a { padding: 0 !important; }
ul#secondary-menu li:hover ul ul, ul#secondary-menu li.sfHover ul ul { top: -8px !important; left: 180px !important; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
ul#secondary-menu ul li.even-item { background: none; }
.manimation:hover{
background:#43cf61 !important;
}
.mmore:hover{
background:#4b5571 !important;
}
.mliterature:hover{
background:#2c8f83 !important;
}
.mgames:hover{
background:#e34328 !important;
}
.marts:hover{
background:#cc226a !important;
}
.mcontact:hover{
background:#9395aa !important;
}
/* ---------- Mega Drop Down --------- */
ul#mega li { padding-right: 0px; background: url(images/secondary-menu-bg.png) repeat-y top right; }
#mega {
list-style:none;
font-weight:bold;
height:2em;
}
#mega li {
padding: 23px 0px;
background:#999;
border:0px solid #000;
float:left;
text-align:center;
position:relative;
}
#mega li:hover {
background:#eee;
border-bottom:0; /* border-bottom:0; and padding-bottom:1px; keeps <li> and <div> connected */
z-index:1; /* shadow above adjacent li */
}
#mega a { font-size: 16px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px;}
ul#mega a:hover { color: #FFFFFF; text-shadow: 1px 1px 0 #404747; }
/* ----------- Hide/Show Div ---------- */
#mega div {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #FFFFFF;
border-color: -moz-use-text-color #48423F #48423F;
border-right: 1px solid #48423F;
border-style: none solid solid;
border-width: 0 1px 1px;
font-weight: normal;
left: -999em;
margin-top: 1px;
position: absolute;
text-align: left;
width: 496px;
}
/* --------- Within Div Styles --------- */
#mega li:hover div {
left: -1px;
top: auto;
}
#mega li.dif:hover div {
left: -407px;
top: 72px;
}
#mega li.mmore:hover > a {
color: #FFFFFF; text-shadow: 1px 1px 0 #404747; /* Ensures hover on MORE remains */
}
#mega div h2 {
background: none repeat scroll 0 0 #999999;
clear: both;
float: left;
font-size: 1em;
margin: 10px 0 5px;
padding: 0 10px;
position: relative;
width: 300px;
}
#mega div moretopbar {
clear: both;
float: left;
position: relative;
margin-left:1px;
margin-right:1px;
width: 495px;
height: 74px;
background-image: url(images/morebgwide.png);
background-size:495px 74px;
background-repeat:no-repeat;
}
#mega div p {
float: left;
padding-left: 10px;
position: relative;
width: 106px;
}
#mega div p a {
clear: left;
float: left;
line-height: 1.4;
text-decoration: underline;
width: 100%;
}
#mega div a:hover, #mega div a:focus, #mega div a:active {
text-decoration: none;
}
#mega div morecontainer {
width: 495px;
}
#mega div moreleftbar {
width: 70%;
}
#mega moreleftbar a { /* I want to style the list here - clean slate*/
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
color: #cc6600;
}
Although, I would advice overlooking the fiddle for a visual presentation of the issue: http://jsfiddle.net/XHard/1/
There must be a way to make a new clean list in that drop down menu. Can you figure out how? If you will answer, please be detailed as my coding knowledge is limited - ideally with an updated fiddle.
Ok so just had a look at firebugs output on the styling of the <ul> tag you have. And the CSS rules are specific to the <ul> tags within #mega.
So I added this CSS that targets the UL you want to style and reset a few rules:
ul#mega moreleftbar ul,
ul#mega moreleftbar ul li,
ul#mega moreleftbar ul li a,
ul#mega moreleftbar ul li a:hover
{
padding:0;
border:0;
margin:0;
color:#000000;
font-size:inherit;
font-weight:normal;
background:none;
}
JSfiddle example
Notice your original rule for styling the <li>
ul#mega li
This will be overwritten by the targetted rules I've applied above.
By being more specific with the rules, they overwrite less specific styles (unless a style has an !important tagged to it).
.manimation:hover{
background:#43cf61 !important;
}
The above rule for example will stop you being able to apply any further background-color changes to any elements that are covered by the rule. !important is not a good thing to use unless it is absolutely necessary.
I cannot find a way to make the hover style to remain when the user use the drop down. Once the user navigate down the list, the hover style disappears. To explain this issue easier, go to this fiddle: http://jsfiddle.net/maFb3/
Hover the cursor over the MORE button, pay notice to how the text color changes. Now, navigate the drop down, as soon as you leave the more box, the style goes back to normal. The question is, how do I make the hover style remain when the user navigates through that drop down? I want the white text color to remain.
This is the hover style I use:
ul#mega a:hover { color: #FFFFFF; text-shadow: 1px 1px 0 #404747; }
This is part of the HTML code:
<div class="clearfix" id="second-menu">
<ul class="nav sf-js-enabled" id="secondary-menu">
<li class="mfilm"><a style="border-bottom:9px solid #ea2e49" href="">Test menu 1</a></li>
<li class="mfilm"><a style="border-bottom:9px solid #ea2e49" href="">Test menu 1</a></li>
<li class="mtv"><a style="border-bottom:9px solid #2589cf" href="">Test menu 2</a></li>
</ul>
<ul id="mega">
<li style="background:none;" class="dif mmore"><a style="font-style:italic;border-bottom:9px solid #4b5571" href="#">More...</a>
<div>
<ticman>
<ul>
<li class="mgames"><a style="border-bottom:9px solid #e34328" href="">Games</a></li>
<li class="mliterature"><a style="border-bottom:9px solid #2c8f83" href="">Literature</a></li>
<li class="marts"><a style="border-bottom:9px solid #cc226a" href="">Arts</a></li>
<li style="background:none;" class="mcontact"><a style="border-bottom:9px solid #9395aa" href="">Contact</a></li>
</ul>
</ticman>
<h2>Classes</h2>
<p>TimesSchedualMap</p>
<p>NamesStudyDirections</p>
<p>HealthDanceBiology</p>
<h2>Teachers</h2>
<p>BillyMadeleineLaurenSteve</p>
<p>PaddingtonStefanMichaelMadeline</p>
<p>ShannonMaryRaffaelloLorence R</p>
<h2>Location</h2>
<p>CarlsbadOceansideEl Cajon</p>
<p>VistaLa CostaEncinitas</p>
<p>San DiegoLos AnglesCardiff</p>
</div>
</li>
</ul>
</div>
Here is part of the CSS:
/* ---------- Mega Drop Down --------- */
ul#mega li { padding-right: 0px; background: url(images/secondary-menu-bg.png) repeat-y top right; }
#mega {
list-style:none;
font-weight:bold;
height:2em;
}
#mega li {
padding: 23px 0px;
background:#999;
border:0px solid #000;
float:left;
text-align:center;
position:relative;
}
#mega li:hover {
background:#eee;
border-bottom:0; /* border-bottom:0; and padding-bottom:1px; keeps <li> and <div> connected */
z-index:1; /* shadow above adjacent li */
}
#mega a { font-size: 16px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px;}
ul#mega a:hover { color: #FFFFFF; text-shadow: 1px 1px 0 #404747; }
/* ----------- Hide/Show Div ---------- */
#mega div {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #FFFFFF;
border-color: -moz-use-text-color #48423F #48423F;
border-right: 1px solid #48423F;
border-style: none solid solid;
border-width: 0 1px 1px;
font-weight: normal;
left: -999em;
margin-top: 1px;
position: absolute;
text-align: left;
width: 496px;
}
/* --------- Within Div Styles --------- */
#mega li:hover div {
left: -1px;
top: auto;
}
#mega li.dif:hover div {
left: -407px;
top: 72px;
}
#mega div h2 {
background: none repeat scroll 0 0 #999999;
clear: both;
float: left;
font-size: 1em;
margin: 10px 0 5px;
padding: 0 10px;
position: relative;
width: 300px;
}
#mega div ticman {
clear: both;
float: left;
position: relative;
margin-left:1px;
margin-right:1px;
width: 495px;
height: 74px;
background-image: url(images/morebgwide.png);
background-size:495px 74px;
background-repeat:no-repeat;
}
#mega div p {
float: left;
padding-left: 10px;
position: relative;
width: 106px;
}
#mega div p a {
clear: left;
float: left;
line-height: 1.4;
text-decoration: underline;
width: 100%;
}
#mega div a:hover, #mega div a:focus, #mega div a:active {
text-decoration: none;
}
ul#secondary-menu li { background: url(images/secondary-menu-bg.png) repeat-y top right; }
ul#secondary-menu a { font-size: 16px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px; }
ul#secondary-menu a:hover { color: #ffffff; text-shadow: 1px 1px 0 #404747; }
#second-menu ul.nav li:hover a {color: #ffffff; text-shadow: 1px 1px 0 #404747; }
ul#secondary-menu > li.current_page_item > a { color: #919e9e !important; }
ul#secondary-menu li ul, #category_mobile_menu { width: 360px !important; padding: 7px 0 10px; background: #fff url(images/content-bg.png); top: 55px !important; -moz-box-shadow:3px 3px 7px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border-top-left-radius: 0px;-moz-border-radius-topleft: 0px; border-top-right-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; z-index: 9999px; display: none; }
ul#secondary-menu ul li, #category_mobile_menu li a { margin: 0 !important; padding: 8px 0 8px 30px !important; width: 150px; float: left; }
ul#secondary-menu ul li a, #category_mobile_menu a { padding: 0 !important; }
ul#secondary-menu li:hover ul ul, ul#secondary-menu li.sfHover ul ul { top: -8px !important; left: 180px !important; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
ul#secondary-menu ul li.even-item { background: none; }
.mfilm:hover{
background:#ea2e49 !important;
}
.mtv:hover{
background:#2589cf !important;
}
.mwebvideos:hover{
background:#5c58ac !important;
}
.manimation:hover{
background:#43cf61 !important;
}
.mmore:hover{
background:#4b5571 !important;
}
.mliterature:hover{
background:#2c8f83 !important;
}
.mgames:hover{
background:#e34328 !important;
}
.marts:hover{
background:#cc226a !important;
}
.mcontact:hover{
background:#9395aa !important;
}
Although I would suggest visiting the fiddle for a visual look, I tried to strip most of my sites code from it so it will appear messy: http://jsfiddle.net/maFb3/
Add this to your CSS:
#mega li.mmore:hover > a
{
color:#fff;
text-shadow:none;/* it added a text-shadow in FF*/
}
DEMO