I have a website: http://www.icontactlens.com.sg
When I click the navigation menu "About Us", it will display the sub-menu at both Chrome and Firefox. However, when I click at the IE (8,9,10 versions), it not working.
Here is the CSS code:
/* main navigation bar */
#navigation{
padding:0 0 30px 0;
}
/* first level menu item's font face */
#navigation > ul > li > a{
font-family: 'Oswald', arial, serif;
}
/* first level links */
#navigation, #navigation a{
color:#fff;
text-decoration:none;
font-size:14px;
line-height:100%;
display:block;
}
/* inacvtive - expandable items */
#navigation a.inactive{
background:url(../images/plusminus.png) right 3px no-repeat;
}
/* acvtive - expanded items */
#navigation a.active{
background:url(../images/plusminus.png) right -12px no-repeat;
}
/* current page items and hover states */
#navigation a:hover, #navigation ul li.current_page_item a, #navigation ul li.current-menu-ancestor a{
color:#9D9D9D;
}
/* current page items and hover states */
#navigation ul li.current_page_item a:hover, #navigation ul li.current-menu-ancestor a:hover{
color:#fff;
}
#navigation ul ul li.current-menu-item a{
color:#D0D0D0;
}
#navigation ul{
padding:1px 0 0 0;
display:block;
margin:0;
list-style:none !important;
}
/* First Level */
#navigation > ul{
background:url(../images/transparent-pixel.png) top repeat-x;
}
#navigation > ul > li{
background:url(../images/transparent-pixel.png) bottom repeat-x;
padding:10px 0 10px 0;
}
#navigation ul li{
display:block;
}
/* Sub Levels */
#navigation ul ul{
display:none;
margin:10px 0 0 0;
}
#navigation ul ul li{
margin:0 0 0 0;
padding:5px 0 5px 0;
}
#navigation ul ul li a{
font-size:12px;
color:#C4C4C4;
}
/* Third Level */
#navigation ul ul ul{
margin:10px 0 0 0;
background:url(../images/transparent-pixel.png) repeat-y;
}
#navigation ul ul ul li{
margin:0 0 0 10px;
}
Does I missing anything on the CSS stylesheet?
Related
I have a code where I want to apply a image and also background color at the same time. Can anyone help me with it?
CSS
.menu, .menu ul
{
width:1000px;
background-color: #F3F3F3;
margin: 0;
}
.menu{ padding: 0; height:30px;}
.menu li
{
float: left;
padding-top:3px;
height:20px;
text-align:left;
text-transform:uppercase;
position: relative;
display: block;
font-family: Tahoma;
font-size: 8px;
font-weight:bold;
text-align: center;
text-decoration: none;
padding:10px 15px 0 15px;
background:url(../image/border.png) no-repeat right center;
}
.menu li:hover
{
background:#3EBBEC;
color: #FFFFFF;
}
.menu a { text-decoration: none; color:#000000; }
.menu a:hover { text-transform:lowercase; }
HTML
<ul class="menu">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
This is the code of both HTML and CSS where I need to apply an image and also a bckground color at the same time. Please someone help me with this.
Don't use the short-hand notation when you only want to change single values. Or the other way , if you use the short-hand notation, supply all values you don't want to be "default" values.
Use:
.menu li:hover
{
background-color: #3EBBEC;
}
or:
.menu li:hover
{
background: #3EBBEC url(...) ...;
}
Just remember that when you use the short-hand, that all values not provided will fallback to it's default not to it's inherited values.
.menu li {
background: #color url(path to img);
}
.menu li:hover {
background: #hover-color url(path to hover-img);
/* or if only color is changed just write */
background-color: #hover-color;
}
add
.menu li:hover
{
background:#3EBBEC url(image.jpg) no-repeat;
color: #FFFFFF;
}
First your HTML should look like this
<ul class="menu">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
CSS
ul.menu li{display:block; width:100px; height:30px; background:url(yourbackgroundimage.png);}
ul.menu li a{display:block; width:100px; height:30px; background:url(yoursecondbackgroundimage.png);}
and if you like to add hover state
ul.menu li{display:block; width:100px; height:30px; background:url(yourbackgroundimage.png);}
ul.menu li:hover{background:url(yourhoverbackgroundimage.png);}
ul.menu li a, ul.menu li a:visited{display:block; width:100px; height:30px; background:url(yoursecondbackgroundimage.png);}
ul.menu li a:hover{background:url(yoursecondbackgroundimagehover.png);}
I have a bit of a problem and I am struggling to solve it for some time now.
Top menu is working... strange.
To see the problem go to: proba.dalipro.com.
JS for controlling menu:
var timeoutID;
jQuery(function(){
jQuery('.dropdown').mouseenter(function(){
jQuery('.sublinks').stop(false, true).hide();
window.clearTimeout(timeoutID);
var submenu = jQuery(this).parent().next();
submenu.css({
position:'absolute',
top: jQuery(this).offset().top + jQuery(this).height() + 'px',
left: jQuery(this).offset().left + 'px',
zIndex:100
});
submenu.stop().slideDown(300);
submenu.mouseleave(function(){
jQuery(this).slideUp(300);
});
submenu.mouseenter(function(){
window.clearTimeout(timeoutID);
});
});
jQuery('.dropdown').mouseleave(function(){
// timeoutID = window.setTimeout(function() {jQuery('.sublinks').stop(false, true).hide();}, 250); // just hide
timeoutID = window.setTimeout(function() {jQuery('.sublinks').stop(false, true).slideUp(300);}, 250); // slide up
});
});
and css for menu:
/* CSS For Dropdown Menu Start */
#menu_top ul
{
list-style:none;
padding:0px;
margin:0px;
}
#menu_top ul li
{
display:inline;
float:left;
}
#menu_top ul li a
{
color:#ffffff;
background:#990E00;
margin-right:5px;
font-weight:bold;
font-size:12px;
text-decoration:none;
display:block;
width:100px;
height:25px;
line-height:25px;
text-align:center;
border: 1px solid #560E00;
}
#menu_top ul li a:hover
{
color:#cccccc;
background:#560E00;
font-weight:bold;
text-decoration:none;
display:block;
width:100px;
text-align:center;
border: 1px solid #000000;
}
#menu_top ul li.sublinks a
{
color:#000000;
background:#f6f6f6;
border-bottom:1px solid #cccccc;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
margin-top:2px;
}
#menu_top ul li.sublinks a:hover
{
color:#000000;
background:#FFEFC6;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
}
#menu_top ul li.sublinks
{
display:none;
position: relative;
}
/* CSS For Dropdown Menu End */
What I need to do to fix drop down function?
Take left out of the submenu css:
submenu.css({
position:'absolute',
top: jQuery(this).offset().top + jQuery(this).height() + 'px',
zIndex:100
});
Also, change #menu_top ul and #menu_top ul li in your style sheet to:
#menu_top ul
{
list-style:none;
padding:0px;
margin:0px;
float: left
position: relative;
}
#menu_top ul li
{
}
I am working on a website for a client. For the menu/navigation bar, I created one for them (they were very specific) with dropdowns, but there is one problem--when you mouse over one of the items on the dropdown, it dissappears--check it out here http://www.brandonsdesigngroup.com/menu-expamle.html.
for the code, I call jquery from google API's, then there is the javascript, the CSS, and the actual content (in an unordered list).
Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("#nav-one li").hover(
function(){ $("ul", this).fadeIn("fast"); },
function() { }
);
if (document.all) {
$("#nav-one li").hoverClass ("sfHover");
}
});
$.fn.hoverClass = function(c) {
return this.each(function(){
$(this).hover(
function() { $(this).addClass(c); },
function() { $(this).removeClass(c); }
);
});
};
</script>
CSS:
<style type="text/css">
.nav, .nav ul {
list-style: none;
margin: 0;
padding: 0;
height:20px
}
.nav {
z-index: 100;
position: relative;
}
.nav li {
border-left: 0px solid #000;
float: left;
margin: 0;
padding: 0;
position: relative;
font-family: Arial, Helvetica, sans-serif;
font-style:normal;
font-size:12px;
}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
font:1.22em/25px "Arial Narrow", Arial, sans-serif letter-spacing:5px;
color: #FFFFFF;
display: block;
padding: 0 10px;
text-decoration: none;
text-style: narrow;
margin-right:26px;
}
.nav li a:hover {
margin-right:26px;
color: #FFFFFF;
}
#nav-one li:hover a,
#nav-one li.sfHover a {
color: #FFFFFF;
}
#nav-one li:hover ul a,
#nav-one li.sfHover ul a {
color: #FFFFFF;
height:20px;
background-image: url(menubar/transparent.png);
}
#nav-one li:hover ul a:hover,
#nav-one li.sfHover ul a:hover {
color:#FFFFFF;
background-image:url(menubar/transparent.png);
}
.nav ul {
border-bottom: 0px solid #FFFFFF;
list-style: none;
margin: 0;
width: 100px;
position: absolute;
top: -99999px;
left: 0px;
}
.nav li:hover ul,
.nav li.sfHover ul {
top: 22px;
}
.nav ul li {
border: 0;
float: none;
font-family: Arial, Helvetica, sans-serif;
font-style:normal;
font-size:10px;
}
.nav ul a {
border: 0px solid #000;
border-bottom: 0;
padding-right: 50px;
margin-bottom: 0px;
width: 130px;
white-space: nowrap;
}
.nav ul a:hover {
color: #FFFFFF;
}
</style>
<style type="text/css">
body {
width: auto;
height: auto;
background-color: #3A2C21;
}
</style>
HTML:
<td background="images/menu_bg.gif" height="25"><ul id="nav-one" class="nav">
<li>
HOME
</li>
<li>
PROFILE
<ul>
<li>ABOUT</li>
<li>PEOPLE</li>
<li>SERVICES</li>
<li>TRADE SHOWS</li>
</ul>
</li>
<li>
PORTFOLIO
<ul>
<li>ARTISTIC TILE</li>
<li>ATLANTIS</li>
<li>BLANCO</li>
<li>BUTLER"S OF FAR HILLS</li>
<li>HAMPTON FORGE</li>
<li>HILAND H. TURNER</li>
<li>MIELE</li>
<li>POGGENPOHL</li>
<li>THG FAUCETS</li>
<li>TOP KNOBS</li>
<li>VIXEN HILL</li>
</ul>
</li>
<li>
PUBLIC RELATIONS
<ul>
<li>PRESS ATTENTION</li>
<li>FRANK PR</li>
<li>HITS</li>
<li>MORE HITS</li>
<li>LEVERAGING PR</li>
</ul>
</li>
<li>
CONTACT
</li>
</ul>
Problem #1: Menu disappears before cursor can reach submenu.
Usually this is due to a gap between the <li> tag and the subnavigation <ul>. A gap of even one pixel will cause the navigation to disappear before the cursor can reach the submenu.
For instance, add a padding: 0 0 10px; to .nav li in your CSS, and the problem goes away.
You could also set a specific height for the <li> to cover the problem, too.
Problem #2: Menu disappears when cursor runs over the image slideshow.
As to the problem of your menu disappearing when you reach the point where your image slideshow and menu collide, that's due to a z-index problem.
You should set the .nav to have a z-index: 200 (or anything greater than 100, according to your slideshow -- I try to go overboard). This will make sure it sits above the gallery.
Javascript
<script>
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
html
Already a Member? Login
Become a Member?
Signup
Army
Navy
Airforce
I would use the Hover Intent plug-in. It is designed for exactly this kind of usage and helps provide a more robust dropdown.
My jquery dropdown menu is fails in IE7 or IE8 Compatibility view.
I use this jquery for the dropdown menu in the below link:
var timeout = 1000;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('.menu ul > li').bind('mouseover', jsddm_open)
$('.menu').bind('mouseout', jsddm_timer)});
document.onclick = jsddm_close;
http://www.urbanlifefeed.com/cruise_ulf/
And this is the css:
div.menu { height:49px;}
div.menu ul {
/*width:886px;
margin:0 7px;*/
width:921px;
margin:0;
background:url(images/nav_bg.gif) repeat-x 0 0;
float:left;
border-left: 1px solid #FFFFFF;
}
div.menu ul li {
font-family:"Myriad Pro", Arial, Helvetica, sans-serif;
font-size:21px;
line-height:49px;
padding:0 12px;
text-transform:uppercase;
float:left;
border-right: 1px solid #FFF;
position:relative;
}
div.menu ul li ul
{
position:absolute;
top:49px;
left:0;
width:280px;
border:0px;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
background:url(images/sub_nav_bg.png) repeat 0 0;
z-index:999999 !important;
visibility:hidden;
float:none;
display:inline-block;
}
div.menu ul li ul li:hover {background:url(images/sub_nav_bg.png) repeat 0 0;}
div.menu ul li ul li
{
border:0px;
border-bottom:1px solid #f4c726;
width:256px;;
float:left;
}
div.menu ul li ul li a
{ color:#f4c726; text-transform:capitalize;}
div.menu ul li:hover{
background:url(images/nav_roll_bg.png) repeat-x center 0;
}
div.menu ul li a {
color:#FFF;
text-decoration:none;
float:left;
height:49px;
width:100%;
}
div.menu ul li a:hover{
color:#fbf0cc;
}
Looks to me like the menu is sitting behind the slider container. You could use the z-index attribute to ensure that the menu block always appears above the slider block. For example, the div that holds the slider you can set a z-index of 1, and then set the menu a z-index of 2 or above.
I have an issue with superfish which makes the dropdown menu not appear at all in ONLY IE8. It shows up in everything else (even IE6) but not IE8. I didn't modify the source JS at all and I'm calling a div called "subnav" where my list is displayed.
What SHOULD happen is when I mouse-over the menu-item, it changes the dropdown menu's CSS to "visibility: visible, display:block" and displays the menu. In IE8, nothing happens and no CSS is changed at all.
Any ideas what could be causing it? I'm also using the supersubs plugin for superfish.
Here is the css:
#navbar ul{
margin:10;
padding:0;
width:1000px;
}
#navbar li{
float:left;
color:#191919;
list-style-type:none;
text-transform:uppercase;
background:transparent url('../images/common/layout/nav-separator.jpg') center right no-repeat;
padding:10px 0;
}
#navbar li.last{
background:none;
}
#navbar ul li a{
padding: 12px 33px;
color: #fff;
text-decoration: none;
}
#navbar ul li a:hover{
color:#05af0d;
background:transparent url(../images/common/layout/nav-hover-highlight.png) top center no-repeat;
}
#navbar ul li a.hover-arrow:after{
margin-left:10px;
content:url(../images/common/nav-arrow.png);
}
#navbar ul li:hover a.hover-arrow:after{
margin-left:10px;
content:url(../images/common/nav-arrow-roll.png);
}
#navbar ul li a.hover-arrow:hover{
background:#000 url('../images/common/layout/nav-separator.jpg') right 9px no-repeat;
}
#navbar ul li p{
margin:0;
display:inline-block;
}
/*Sub Nav Lists */
.subnav {
display:none;
visibility:hidden;
}
#navbar ul li ul{
margin:0; padding:0;
position: absolute;
left: auto; top: 40px;
background: #333;
z-index: 99;
}
#navbar ul li ul li{
background:none;
}
#navbar ul li ul li a{
padding:0px 3px;
display:inline-block;
margin:0;
width:150px;
text-transform:capitalize;
}
#navbar ul li ul li a:hover{
background-color:#a7a7a7;
color:#000;
border:none;
background-image:none;
font-weight:bold;
}
Here is how it's going on the page:
<div id="navbar">
<ul class="topnav">
<li id="item 1"><p></p>
<ul class="subnav"></subnav>
</li>
<li id="item 2"><p></p>
<ul class="subnav"></subnav>
</li>
etc...
</ul>
</div>
Not sure if this will address the problem you're seeing, but I noticed in your html snippet that the UL elements with the subnav class aren't being closed with an appropriate tag. First thing I'd try is replacing them with:
<ul class="subnav"></ul>
Any other errors may not be being handled by IE8 as graciously as other browsers. Try running your page through a validator (ie: The W3C Markup Validator)