I am working on a menu that looks like this:
<nav>
<ul>
<li>Home</li>
<li>Expenses
<ul>
<li>View My Expenses</li>
<li>View Expenses</li>
<li> View Deconts
<ul>
<li>Single Deconts</li>
<li>View All Deconts</li>
</ul>
</li>
<li> Add Expenses
<ul>
<li>Soccer/Tennis Expenses</li>
<li>Gym Expenses</li>
<li>Coffee/Tea Expense</li>
</ul>
</li>
</li>
</ul>
It works perfectly on chrome and firefox, it does not work on IE.
The navigation CSS looks something like this:
nav {
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
z-index: 9999;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 10px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a; position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Am I using deprecated functions ? I know the -moz- tag works for Mozilla Firefox and the -webkit- works for Chrome, but it initially worked. I must have updated IE or something. I am using IE 9.
Two things I noticed.
1.) Your code looks fine except for the lack of an ending tag. This could have been a copy paste issue.
2.) IE8 and prior do not work with the nav tag. So have you verified that you are running in IE9 mode? Open developer tools to make sure (F12) in IE. Make sure both document and browser mode are not in compability mode and set to IE9 or whatever your current version is at the moment.
Related
I am trying to understand a tutorial on making a CSS dropdown menu.
(source: line25.com)
In the image above, the left border of the submenu is aligned to the left border of the parent. I want the right border of the submenu to align to the right border of the parent, whilst retaining the submenu's width. i.e. the submenu should be translated to the left a little.
I tried to add position: relative; to the direct parent of the submenu, but the text "Web Design" breaks into 2 lines; that's ugly.
The tutorial is from dropdown menu.
Here is my code:
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
/*position: relative;*/
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%, #5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 25px 40px;
color: #757575;
text-decoration: none;
}
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
<nav>
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design
</li>
</ul>
</li>
<li>Articles
<ul>
<li>Web Design</li>
<li>User Experience</li>
</ul>
</li>
<li>Inspiration</li>
</ul>
</nav>
You would relatively position the parent li element:
nav > ul > li {
position: relative;
}
and then set the position of the direct ul child to right: 0:
nav > ul > li > ul {
right: 0;
}
In doing so, the child ul is absolutely positioned relative to the parent.
..and if you want to prevent the text from wrapping, add white-space: nowrap.
nav > ul > li > ul {
right: 0;
white-space: nowrap;
}
Since I am discovering and struggling with CSS dropdown menus, I hope you won´t mind this simple question. I have a fully functioning CSS dropdown menu, but just after I prevented the horizontal menu from wrapping (in case the browser would be resized), I am having trouble displaying the dropdown items below each other (block). Instead they are now also displayed next to each other (inline-block).
Can anybody tell me which line I have to add? This was the code that I added that changed both my menu from wrapping (good) and my dropdown items from being displayed below each other:
nav ul li {
display: inline-block;
float: none;
}
Full CSS menu code:
/* Set general properties for main menu items */
nav ul {
background: linear-gradient(to bottom, rgba(200,220,154,0) 30%, #c8dc9a 90%);
background: -moz-linear-gradient(top, rgba(200,220,154,0) 30%, #c8dc9a 90%);
background: -webkit-linear-gradient(top, rgba(200,220,154,0) 30%, #c8dc9a 90%);
background: -ms-linear-gradient(top, rgba(200,220,154,0) 30%, #c8dc9a 90%);
background: -o-linear-gradient(top, rgba(200,220,154,0) 30%, #c8dc9a 90%);
padding: 0;
margin: 0;
font-size: 16px;
white-space: nowrap;
list-style: none;
position: relative;
text-align: left;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
display: inline-block;
float: none;
border-bottom: 3px solid #244612;
padding:0 0 0 7px;
}
/* Set hover properties for main menu items */
nav ul li:hover {
background: #e29a0e;
background: linear-gradient(to bottom, rgba(226,154,14,0) 0%, #e29a0e 100%);
background: -moz-linear-gradient(top, rgba(226,154,14,0) 0%, #e29a0e 100%);
background: -webkit-linear-gradient(top, rgba(226,154,14,0) 0%, #e29a0e 100%);
background: -ms-linear-gradient(top, rgba(226,154,14,0) 0%, #e29a0e 100%);
background: -o-linear-gradient(top, rgba(226,154,14,0) 0%, #e29a0e 100%);
}
nav ul li:hover a {
color: #ffffff;
}
nav ul li:hover ul li a{
color: #757575;
}
nav ul li a {
display: block;
padding: 10px 13px;
color: #757575;
text-decoration: none;
}
/* Set properties for hiding/unhiding dropdown items */
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
/* Set general properties for dropdown menu items */
nav ul ul {
background: #F7F7F7;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
margin-left: -7px;
font-size: 14px;
white-space: normal;
float: left;
}
/* Set hover properties for dropdown menu items */
nav ul ul li {
border-top: 1px solid #C9CCCF;
border-bottom: 0px solid #C9CCCF;
position: relative;
padding: 0;
}
nav ul ul li a {
padding: 10px 25px;
}
nav ul li:hover ul li a:hover {
background: #e29a0e;
color: #ffffff;
}
I hope that I understood your question correctly!
Here's a fiddle.
All you need to add is
nav ul li ul li{
display:block;
}
And that should be it!
I for whatever reason cannot get rid of the gap between my header and the nav bar menu. I've tried every adjustment of padding/margins I can think of to either push it up or move the bar, but it just does funky stuff with the menu or pushes other content up. I need some help.
and the code
#header_wrap {
width:100%;
height:144px;
text-align: center;
}
#header {
width:980px;
margin:0 auto;
}
#preloadedImages
{
width: 0px;
height: 0px;
display: none;
background-image:url(Logo/logo14hover.gif);
}
.site_logo {
float:left;
width:302px;
height:144px;
background:url(Logo/logo14.gif) no-repeat;
}
.site_logo:hover {
float:left;
width:302px;
height:144px;
background:url(Logo/logo14hover.gif) no-repeat;
}
.headerpic {
float:left;
width:678px;
height:144px;
background:url(Images/headerpic.gif) no-repeat;
}
#menu_wrap {
position:relative;
z-index:2;
text-align:center;
width:100%;
padding: 0px 0px;
}
#menu {
position:relative;
z-index:2;
width:1000px;
text-align:center;
margin:0 auto;
height:61px;
padding: 0px 0px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #bbb38f; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYjM4ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2YjY0NDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #bbb38f 0%, #6b6441 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbb38f), color-stop(100%,#6b6441)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* IE10+ */
background: linear-gradient(to bottom, #bbb38f 0%,#6b6441 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbb38f', endColorstr='#6b6441',GradientType=0 ); /* IE6-8 */
box-shadow: 0px 0px 9px rgba(0,0,0,0.5);
padding: 0px 0px;
list-style:none;
position: relative;
display:inline-table;
text-decoration:none;
font-family:Copperplate Gothic Light,Georgia, Palatino, Times New Roman, serif;
font-size:17px;
color:#FFFFFF;
font-weight:light;
outline:none;
text-shadow: 1px 1px #000000;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #736e57;
background: linear-gradient(top, #BBB38F 0%, #6B6441 40%);
background: -moz-linear-gradient(top, #BBB38F4 0%, #6B64415 40%);
background: -webkit-linear-gradient(top, #BBB38F 0%,#6B6441 40%);
text-decoration:none;
font-family:Copperplate Gothic Light,Georgia, Palatino, Times New Roman, serif;
font-size:17px;
color:#FFFFFF;
font-weight:light;
outline:none;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
nav ul li:hover a {
color:#FFFFFF;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
nav ul li a {
color:#FFFFFF;
display: block;
padding: 12px 42px;
text-decoration:none;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
nav ul li:hover > ul {
background: #303030;
text-decoration:none;
display: block;
}
nav ul ul {
background: #303030;
font-family: Helvetica, Copperplate Gothic Light, Arial, sans-serif;
font-size:14px;
text-decoration:none;
color:#000;
font-weight:light;
outline:none;
filter:alpha(opacity=95);
opacity: 0.95;
-moz-opacity:0.95;
}
nav ul ul li {
text-decoration:none;
float: none;
position: relative;
}
nav ul ul li a {
text-decoration:none;
padding: 0px 0px;
color:#000;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
nav ul ul li a:hover {
text-decoration:none;
background: #736e57;
text-shadow: 1px 1px #000000;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
nav ul ul {
text-decoration:none;
padding: 0px;
position: absolute;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
padding: 10px 40px 10px 15px;
color:#000;
font-family: Helvetica, Copperplate Gothic Light, Arial, sans-serif;
font-size:15px;
text-align: left;
}
nav ul ul li a:hover {
font-family: Helvetica, Copperplate Gothic Light, Arial, sans-serif;
font-size:15px;
background: #6B6441;
text-align: left;
background: #bbb38f; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYjM4ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2YjY0NDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #bbb38f 0%, #6b6441 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbb38f), color-stop(100%,#6b6441)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* IE10+ */
background: linear-gradient(to bottom, #bbb38f 0%,#6b6441 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbb38f', endColorstr='#6b6441',GradientType=0 ); /* IE6-8 */
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
nav ul ul ul {
position: absolute;
left: 100%; top:0;
}
and the HTML
<div align="center" id="header_wrap">
<div id="header">
<div id="preloadedImages"></div><div class="site_logo"></div>
<div class="headerpic"></div>
</div>
</div>
<!-- START MENU NAV BAR CODE -->
<div id="menu_wrap">
<div id="menu">
<nav>
<ul>
<li>Company
<ul>
<li>Mission</li>
<li>Philosophy</li>
</ul>
</li>
<li>Solutions
<ul>
<li>Q Pipe Estimator
<ul>
<li>Advantage</li>
<li>Differentiator</li>
<li>Features</li>
<li>Screen Shots</li>
</ul>
</ul>
</li>
</li>
<li>Services
<ul>
<li>Technical Support</li>
<li>Training</li>
<li>Customization</li>
<li>FAQ's</li>
</ul>
</li>
<li>Industry
<ul>
<li>Focus</li>
<li>Customers</li>
</ul>
</li>
<li>Contact
<ul>
<li>Contact Information</li>
<li>Request Information</li>
</ul>
</li>
<li>Login
</li>
</ul>
</nav>
</div>
</div>
<!-- END MENU NAV BAR CODE -->
added fiddle link in comments
Simply remove the default margin for your main ul (the direct descendant of nav)
Select it using the following CSS, or giving that specific ul a class or id (this way you target only the ul causing you trouble).
nav > ul {margin: 0}
I stuck it into the top of your fiddle, and updated it here
I realise this has now been answered because I took way too long formatting this, but I'd just like to point out that it has nothing to do with the box-shadow which has no impact on positioning.
The ul default margin is responsible for this space. Try setting margin-top:0 to nav ul. Demo: http://jsfiddle.net/xtsAx/8/
for me the error was because i used dream weaver to edit my code.
this give me a hiccup by adding default headers.
when i removed those headers and just gave<html> <head>...<?php>....?> .... </html> it worked perfect.
always remove html tags and header by dream weaver.
**Update: I had the same error again in Firefox so i applied
*{
margin:0;
padding:0;
}
And hence got rid of it completely now.
**
I am soooo confused! Here is the site I'm developing: Cancer Support site
I seem to have two problems... that I have spent hours and hours trying to figure out the solution.. so I really hope someone can help.
Problem 1: I use an ID=navactive to keep the parent menu item active if it is the current page being diplayed. That works. However, the way I have coded the CSS, it has introduced an error by making the submenu items appear active when they first appear upon mousever of an ID=navactive parent. Instead the submenu items should initially appear as inactive until they are actually moused over. On the site, you can see that the "Home" page is the active page on the parent menu. If you mouse over it, the two children submenus appear.. but they show up active. They should appear as inactive - the same way as the submenus do when you mouse over the "Our Work" parent menu item.
Problem 2: None of my grandchildren submenu items appear at all.. Under both the "Home" and "Our Work" parent menu items I have the following configuration:
Top level menu (parent)
Submenu 1 (child 1)
Submenu 2 (grandchild 1)
Submenu 3 (child 2)
Instead it appears on the page like this where the grandchild 1 becomes the child 2, and no grandchildren are viewable (and the original child 2 [submenu 3] is missing):
Top level menu (parent)
Submenu 1 (child 1)
Submenu 2 (child 2)
Any suggestions would be greatly appreciated!!!
Thanks!
For your convenience.. here is my css code for the nav menu section:
#navcontainer
{
width: 711px;
height: 25px;
text-align: center;
margin: 0px auto; /*Center container on page*/
clear: both;
background-color: #129F9F;
border: 3px solid #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #16ACAC 0%, #0D6F6F 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #16ACAC 0%, #0D6F6F 100%);
/* Opera */
background-image: -o-linear-gradient(top, #16ACAC 0%, #0D6F6F 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #16ACAC), color-stop(1, #0D6F6F));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #16ACAC 0%, #0D6F6F 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #16ACAC 0%, #0D6F6F 100%);
}
.main_menu
{
height: 24px;
line-height: 24px;
font-size: 12px;
position: relative;
}
.main_menu ul
{
padding: 0px 0px 0px 35px; /* padding on left to get nav menu to center.. since it has a float left to make it display properly*/
list-style: none;
}
.main_menu ul li
{
padding: 0;
margin: 0;
border-right: 2px solid #129F9F;
float: left;
}
.main_menu ul li.navcontact /* to stop right border at end of nav line */
{
padding: 0;
margin: 0;
border-right: none;
float: left;
}
.main_menu ul li a
{
color: #FFF;
display: block;
text-decoration: none;
padding: 0 15px;
}
.main_menu ul > li:hover > a, #navactive a:link, #navactive a:visited, #navactive > ul > li > a:hover
{
text-decoration: none;
color: #EAA339;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%);
/* Opera */
background-image: -o-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0D6F6F), color-stop(1, #16ACAC));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #0D6F6F 0%, #16ACAC 100%);
}
.main_menu ul li ul
{
display: none;
width: auto;
position: absolute;
padding: 0px;
margin: 0px;
}
.main_menu ul li:hover ul
{
display: block;
position: absolute;
margin: 0;
padding: 0;
}
.main_menu ul li:hover li
{
float: none;
list-style: none;
margin: 0px;
}
.main_menu ul li:hover li
{
font-size: 12px;
height: 24px;
background: #54C4C4;
/* border-top: 1px solid #129F9F; */
border: 1px solid #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
.main_menu ul li:hover li a
{
font-size: 11px;
color: #fff;
padding: 0px;
display: block;
width: 150px;
}
.main_menu ul li li a:hover
{
font-size: 11px;
height: 24px;
color:#EAA339;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
And here is the HTML code:
<div id="navcontainer">
<div class="main_menu">
<ul>
<li id="navactive">Home
<ul>
<li>submenu 1
<ul>
<li>submenu 2</li>
</ul>
</li>
<li>submenu 3</li>
</ul>
</li>
<li>What is CSFF
<ul>
<li>submenu 4</li>
</ul>
</li>
<li>Make a Donation</li>
<li>Our Work
<ul>
<li>submenu 5
<ul>
<li>submenu 6</li>
</ul>
</li>
<li>submenu 7</li>
</ul>
</li>
<li>Events Outline</li>
<li class="navcontact">Contact Us</li>
</ul>
</div>
</div>
The reason you are getting this problem is due to your CSS and the way you have structured your HTML code. Here is your problem -
.main_menu ul > li:hover > a, #navactive a:link, #navactive a:visited, #navactive > ul > li > a:hover
{
STYLES
}
Simply change the "#navactive a:link" part of your CSS code above to a seperate class that handles the active link. Currently any link within the "navactive" div will inherit the styles given in this class, and this is why the sub menu text is appearing yellow and not white. So like I said change the above CSS code to a separate class, eg - "#navactive .current"
and then change your HTML code to look like this:
<div id="navcontainer">
<div class="main_menu">
<ul>
<li id="navactive"><a class="current" href="index.asp" title="Cancer Support for
Families Foundation is a community funded, community focused cancer charity.">Home</a>
That should do the trick! Obviously I haven't been able to test it, but let me know if you have any problems. Also just a tip - using the Chrome 'Inspect Element' function is really useful when faced with these kind of problems!
Problem 1
in the css:
.main_menu ul > li:hover > a, #navactive a:link, #navactive a:visited, #navactive > ul > li > a:hover
you should put a > in #navactive a:visited, and #navactive a: link so it looks like this:
.main_menu ul > li:hover > a, #navactive > a:link, #navactive > a:visited, #navactive > ul > li > a:hover
the ">" means you direct only the child element
I have a CSS based drop-down menu, which I am implementing into wordpress, however I need help in adding a image on the right side of my links when a user hoovers over a link from the menu. Below is my code and here is a similar effect I've seen done and would like to get the same effect on my menu as well.
Something like this: http://www.clydequaywharf.co.nz/
html
<div class="header">
<div class="nav-holder">
<ul id="nav">
<li><?php wp_list_pages('title_li=&depth=0&sort_column=menu_order'); ?></li>
</ul>
</div>
</div>
css
.nav-holder {
height: 32px;
width: 1010px;
float: right;
position: relative;
}
#nav {
font-family: Arial;
font-size: 12px;
float: right;
margin: 0px 30px 0 0px; padding: 0 0px 0 0px;
color: #FFF;
}
#nav li a, #nav li {
float: left;
text-transform: capitalize;
z-index: 9997;
}
#nav li {
list-style: none;
position: relative;
list-style-position: outside;
}
#nav li a:hover { background:white; color: #666; font-weight: normal; }
#nav li:hover > a { background:white; color: #666; font-weight: normal;}
#nav li a {
margin: 0px 0px 0px 15.2px;
padding: 10px 8px 8px 8px;
text-decoration: none;
color: #FFF;
text-transform: uppercase;
font-weight:normal;
letter-spacing: 0.8px;
z-index: 1006;
/* background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px); */
/* background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929)); */
}
#nav li li a:link {
background-color: white;
color: #333;
font-size: 12px;
z-index: 9995;
height:22px;
/* background: -moz-linear-gradient(top, #11032e, #2a0d65); */
/* background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65)); */
}
#nav li li a:hover {
background: white;
color: #8B7500;
z-index: 9996;
/* background: -moz-linear-gradient(top, #11032e, #2a0d65); */
/* background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65)); */
}
/* Submenu */
#nav li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0px 1px 8px 1px; margin: 0px 0px 0px 0px;
}
#nav li:hover ul {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 15px;
width: 184px;
display: block;
z-index: 5000;
}
#nav li ul li a {
float: none;
letter-spacing: 0.0em;
background: white;
margin: 0px 0px 0px 0px;
padding: 10px 0px 0px 12px; /* Move text inside menu */
z-index: 1000;
font-size: 12px;
color: #666;
word-spacing: wrap;
text-transform: lowercase;
*margin-left: -9px;
}
#nav li ul li {
_display: inline; /* for ie6 */
background: url(../images/wordpress.png) no-repeat;
}
#nav li ul li a {
width: 158px;
display: block;
}
/* *** */
/* Sub Sub Menu */
#nav li ul li ul {
display: none;
}
#nav li ul li:hover ul {
left: 100%;
top: 0;
z-index: 1000;
}
EDIT:
I see what you're trying to do now. Wrap the contents of the in some sort of container, then you can float elements inside of it. I super-dummed-down your fiddle, but the concept still stands. You should be able to implement it in your markup.
HTML:
<ul id="nav">
<li>
<a>Past Projects</a>
<div class="menu-item-container">
<img src="http://lorempixum.com/100/100/" class="menu-image">
<ul class='children'>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul></div>
</li>
</ul>
CSS:
#nav li {
list-style: none;
position: relative;
}
#nav li div.menu-item-container {
position: absolute;
left: 0;
top:100%;
display:none;
}
#nav li:hover div.menu-item-container {
display:block;
}
#nav li img.menu-image {
float:right;
}
#nav li ul.children {
float:left;
}
Here's a fiddle: http://jsfiddle.net/thomas4g/VL3Sz/15/
Hope this helps!
I can't seem to reproduce your menu so I can't give an exact answer
For anyone stopping by, here was my original answer:
you can use the CSS pseudo class :hover (which i'm sure you're aware of) combined with a background-image, like so:
HTML:
<span class="menu-item">My Epic Menu Item</span>
CSS:
.menu-item {
padding:5px;
padding-right:25px;
}
.menu-item:hover {
background-image:url("http://lorempixum.com/20/20/");
background-position:right;
background-repeat:no-repeat;
}
Here's a fiddle if you want to play around with it: http://jsfiddle.net/thomas4g/NQQjX/4/
Please let me know if this isn't want you want, hopefully i can improve the answer.