This problem only affects IE7. The hover effect works but when I attempt to hover over the sub-menu items, the menu suddenly disappears! Only, it's covered by the images in the header div. I've tried z-index and removing margin among other things but nothing works.
CSS
#menu-container{
background: url(../images/menu-bg.png) repeat-x;
height: 75px;
}
#menu{
width: 960px;
margin: 0px auto;
height: 75px;
border-left: 1px dashed #2a3f37;
}
#menu ul{
}
#menu ul li{
float: left;
line-height: 75px;
}
#menu a, #menu h2{
display: block;
}
#menu a{
text-decoration: none;
}
#menu a:hover{
color: #A00;
background: #fff;
}
#menu li{
position: relative;
z-index:2px !important;
}
#menu ul li a { /*stle for IE7*/
height: 1%;
}
#menu ul ul{
position: absolute;
top: 75px;
left:0px;
background: #000;
z-index:2px !important;
}
#menu ul li ul li a{
width: 175px;
height: 35px;
line-height: 35px;
}
#menu ul ul ul{
position: absolute;
top: 0;
left: 100%;
}
div#menu ul li ul li{
margin:0px;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{
display: none;
}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{
display: block;
z-index: 2;
}
HTML
<div id="menu-container">
<div id="menu">
<ul class="menu">
<li class=active>Home</li>
<li >Hearing
<ul>
<li>How You Hear</li>
<li>Hearing Test</li>
<li>Hearing Loss</li>
<li>Online Hearing Test</li>
</ul>
</li>
<li >Hearing Aids</li>
<li >Tinnitus</li>
<li >Patients</li>
<li >About Us
<ul>
<li>About Us</li>
<li>Top Ten Reasons</li>
<li>Our Staff</li>
<li>Our Location</li>
<li>Patient Forms</li>
</ul>
</li>
<li >Contact Us</li>
</ul><!--/menu-->
</div><!--/menu-->
</div>
<!--/menu-container-->
Ohhh such a rule there div#menu ul li:hover ul ul (and many others) are not treated by IE6 or IE7.
IE browsers until IE8 only manage :hover rules for link elements.
Check this tutorial where it's explained in detail the problem and the solution.
Good Luck!
Related
I am trying to make a submenu where the items are at least as wide as the parent item unless the text is longer, then I want it to stretch to the text width. I've tried adding a width element but this doesn't seem to stretch the background colour to the width I specify so I'm a little unsure as to how to do this. My menu html is
<ul class="a">
<li>Home</li>
<li>Menu Item 1
<ul class="subMenu">
<li>Submenu Item</li>
</ul>
</li>
<li>Menu Item 2
<ul class="subMenu">
<li>Submenu Item 1</li>
<li>Submenu Item 1</li>
</ul>
</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
</ul>
and the corresponding css
ul
{
text-align:center;
list-style-type:none;
margin:1em 0px 0px;
padding:0px;
display:block;
z-index:1;
height:1em;
}
li
{
display:inline-block;
float:left;
margin:0px 0px 0px;
position:relative;
}
a
{
cursor: pointer;
text-decoration: none;
padding: .5em 2em .55em;
-webkit-box-shadow: 0 0px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 0px 2px rgba(0,0,0,.2);
box-shadow: 0 0px 2px rgba(0,0,0,.2);
color: #000000;
border: solid 1px #0f7a6c;
background: #0f7a6c;
background: -webkit-gradient(linear, left top, left bottom, from(#1b7a6d), to(#53a499));
background: -moz-linear-gradient(top, #1b7a6d, #53a499);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1b7a6d', endColorstr='#53a499');
font-weight:bold;
}
a:hover
{
text-decoration: none;
background: #0f7a6c;
background: -webkit-gradient(linear, left top, left bottom, from(#53a499), to(#1b7a6d));
background: -moz-linear-gradient(top, #53a499, #1b7a6d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#53a499', endColorstr='#1b7a6d');
}
a:active
{
position: relative;
top: 1px;
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#49a397), to(#097a6b));
background: -moz-linear-gradient(top, #49A397, #097a6b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#49A397', endColorstr='#097a6b');
}
.subMenu
{
visibility:hidden;
position:absolute;
}
.a li:hover .subMenu
{
visibility:visible;
position:absolute;
opacity:1;
height:1em;
}
.subMenu li
{
float:left;
margin:0px 0px 1em;
position:relative;
}
I am having problem with centering the navigation. Tried all possible ways. Unable to center it. Wondering what might be affecting? Do I need to target .nav only? Or container too? My website :
HTML
<div id="navcontainer">
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li class="test">
<li>PRADŽIA</li>
<li>APIE MUS</li>
<li>KAINOS</li>
<li>ASMENINĖS
<ul>
<li>Asmeninė fotosesija</li>
<li>Poros fotosesija</li>
<li>Šeimos fotosesija</li>
<li>Nėščiosios fotosesija</li>
<li>Vaikų fotosesija</li>
<li>Draugų fotosesija</li>
<li>Erotinė fotosesija</li>
<li>Švencių fotosesija</li>
<li>Modelio testas</li>
</ul>
</li>
<li>KŪRYBINĖS</li>
<li>ATSILIEPIMAI</li>
<li>KONTAKTAI</li>
</li>
</ul>
</div>
</div><!--/navcontainer-->
CSS
/*---- NAVIGATION -------*/
#navcontainer{
float: left;
width:100%;
padding: 10px 0 10px 0;
font-size:1.2em;
background: #ccc;
}
.toggleMenu {
display: none;
padding: 10px 15px;
color: #fff;
background:#383636;
}
.nav {
list-style: none;
*zoom: 1;
background: blue;
margin: 0 auto;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
display: inline-block;
list-style-type: none;
width: 9em;
}
.nav a {
display: inline-block;
padding: 10px 15px;
color:#383636;
text-decoration:none;
}
.nav li {
position: relative;
display: inline;
}
.nav > li {
float: left;
}
.nav > li > .parent {
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background: #efefef;
position: relative;
z-index:100;
border-top: 1px solid #ccc;
}
#navcontainer ul li a:hover{
color: #fff;
background: #ccc;
}
#navcontainer ul li a#current{
color: #fff;
background: #ccc;
}
try to add this to your NAV-CONTAINER: margin:0px auto;
Try this :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
/*---- NAVIGATION -------*/
#navcontainer{
width:100%;
padding: 10px 0 10px 0;
font-size:1.2em;
background: #ccc;
margin: 0 auto;
text-align: center;
}
.toggleMenu {
display: none;
padding: 10px 15px;
color: #fff;
background:#383636;
}
.nav {
display: inline-block;
list-style: none;
background: #AE4532;
}
ul {
display: inline-block;
list-style-type: none;
width: auto;
}
.nav a {
display: inline-block;
padding: 10px 15px;
color:#3EBD36;
text-decoration:none;
margin: 10px
}
li {
position: relative;
/* display: inline;*/
float: left;
}
.nav li ul {
position: absolute;
width: 100%;
left: -9999px;
}
</style>
</head>
<body>
<div id="navcontainer">
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li>PRADŽIA</li>
<li>APIE MUS</li>
<li>KAINOS</li>
<li>ASMENINĖS
<ul>
<li>Asmeninė fotosesija</li>
<li>Poros fotosesija</li>
<li>Šeimos fotosesija</li>
<li>Nėščiosios fotosesija</li>
<li>Vaikų fotosesija</li>
<li>Draugų fotosesija</li>
<li>Erotinė fotosesija</li>
<li>Švencių fotosesija</li>
<li>Modelio testas</li>
</ul>
</li>
<li>KŪRYBINĖS</li>
<li>ATSILIEPIMAI</li>
<li>KONTAKTAI</li>
</ul>
</div>
</body>
</html>
The title pretty much describes my problem. I've got a navigation menu at the top of my page with multiple drop-down sections. Now all of the bg-colors are recognised perfectly the only problem is that the menu that you are currently in (lets say 'Weblog') then it disregards the background-color specified and it just gives it the default background. I'm using the Wayfinder snippet in ModX which basically takes all specified pages and puts them in a menu. Ill note the css below since the wayfinder call wont be of much use. I'm open for all kinds of suggestions and improvements.
Cheers,
#nav {
/* float: right; */
font-style:uppercase;
margin-left:100px;
margin-right: 62px;
margin-top: 36px;
z-index: 2;
}
#nav a{
padding: 0 10px;
letter-spacing: 1px;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
z-index: 2;
}
#nav ul li.active a {
background: #3f3a2b;
}
#nav ul li:hover{
background-color:#3f3a2b;
}
#nav ul li {
position: relative;
}
#nav ul li a {
font-size: 13px;
padding: 4px 8px;
display: inline-block;
font-family: Georgia, "Times New Roman", Times, serif;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
line-height: 28px;
color: #fff;
}
#nav ul li ul{
border: 1px solid #2a2a2a;
}
#nav ul li ul li{
}
#nav ul li ul li:hover{
background-color:#3f3a2b;
}
#nav ul li ul li a{
color:black;
font-size:11px;
line-height:15px;
border:none !important;
width:170px;
background: #FFF;
}
#nav ul li ul li a:hover{
background-color:#3f3a2b;
}
#nav ul ul,
#nav ul ul ul {
display: none;
z-index: 2;
}
#nav ul li:hover > ul {
display: block;
position: absolute;
top: 35px;
left: 0;
}
#nav ul li:hover > ul li {
float: none;
background: #FFF;
position: relative;
}
#nav ul li:hover > ul li:hover ul {
display: block;
position: absolute;
top: 0;
left: 186px;
}
#nav ul li ul li a:hover{
background-color:#3f3a2b;
color:white;
}
#nav ul li:hover ul li:hover ul {
display: block;
}
#nav ul li ul li ul li a{
/* line-height:25px !important; */
}
EDIT
Here are some screenshots explaining my problem:
^This is what all items look like.^
^This is what the menu looks like if you are currently in one of its pages^
weblog is li.active and this rule change his color:
#nav ul li.active a {
background: #3f3a2b;
}
#nav ul li.active li a {
background: white;
}
#nav ul li:hover{
background-color:#3f3a2b !important;
}
this fixed the problem for me, thank you all for thinking with me.
There are some similar problems here but none of the solutions fit my situation. I've got a nav that needs to be centered. There is a sub nav in a UL that needs to be left-aligned to its parent LI and laid out horizontally. When I float the sub nav LI's left, the UL keeps the width of its parent LI.
I'd set a fixed PX but the sub nav needs to be expandable so that the client can add or remove nav items and keep the layout.
Here is my HTML:
<nav>
<ul>
<li>Who We Are
<ul>
<li>Our Approach</li>
<li>What We Do</li>
<li>Leadership</li>
</ul>
</li>
<li>Our Results
<ul>
<li>Case Study A</li>
<li>Case Study B</li>
</ul>
</li>
<li>Our Experience
<ul>
<li>Category Experience</li>
</ul>
</li>
<li class="current">What We Think
<ul>
<li>Articles</li>
<li>Category Insight</li>
<li>Research</li>
<li>Training</li>
</ul>
</li>
<li>News
<ul>
<li>Press Releases</li>
<li>Articles</li>
</ul>
</li>
<li>Connect With Us
<ul>
<li>Join Us</li>
<li>Find Us</li>
</ul>
</li>
<li><div class="search"><input name="searchbox" type="text" id="searchbox" class="input_style" value="SEARCH" onFocus="if (this.value == 'SEARCH') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'SEARCH';}"><button></button></div></li>
</ul>
</nav>
Here is my CSS:
nav a,
nav a:visited {
color: #888888;
text-decoration: none;
display: inline-block;
line-height: 30px;
}
nav a:hover {
color: #CCC;
}
nav a:active {
color: #FFF;
}
nav {
text-align: center;
}
nav ul {
display: inline-block;
position: relative;
z-index: 597;
}
nav ul li {
float: left;
padding-left: 15px;
padding-right: 15px;
position: relative;
z-index: 599;
line-height: 30px;
}
nav ul li ul {
display: none;
}
nav li.current a {
background: url(../img/nav_arrow.png) no-repeat center bottom;
color: #FFF;
}
nav li.current ul {
display: block;
position: absolute;
z-index: 598;
top: 31px;
left: 1px;
width: auto;
}
nav li.current ul a {
background: url(none);
color: #888888;
}
nav li.current ul li {
float: left;
display: inline-block;
}
nav .search {
height: 18px;
width: 84px;
padding-left: 4px;
background: url(../img/search_bk.png) no-repeat;
margin-left: 20px;
margin-top: 5px;
float: left;
}
nav .search input {
height: 14px;
width: 68px;
float: left;
background-color: transparent !important;
border-style: none;
}
nav .search input.input_style {
font-family: "proxima-nova", sans-serif;
padding-top: 3px;
color: #777777;
}
nav .search button {
height: 11px;
width: 10px;
float: left;
background-image: url(../img/search_btn.png);
background-color: transparent;
border-style: none;
background-repeat: no-repeat;
margin-top: 3px;
}
Here is a screenshot:
My Screenshot
Thanks in advance!
Just make the width of the sub-menu UL something ridiculous like width:2000px instead of width:auto; this way the items can float horizontally in the sub-nav ul.
Commonly a website menu isn't going to exceed the width of the page area so why does it matter if the sub-menu UL has a excessively large width? It's only meant to house your li elements which will float above any content.
I use this: http://matthewjamestaylor.com/blog/centered-dropdown-menus
So my sub menu ul looks like;
#centeredmenu ul ul {
display: none;
float: left;
left: 0; // important to keep menu left aligned to parent li element>
position: absolute;
right: auto;
top: 2em;
width: 1000px; // set to whatever you want //
}
#centeredmenu ul ul li {
display: inline-block; // not really needed
left: 0; // important
}
I have a dropdown tab-style list, using Suckerfish Dropdown as a starting point.
When I hover over the level 1 tab, the second level anchor text displays on multiple lines, as if they are line breaks. This only happens in IE7, not in IE8/9 or FF.
Here's a screenshot:
http://i1200.photobucket.com/albums/bb333/MacGirl1986/DropDownIssue.gif
Heres the CSS:
#navWrap{
background-color:transparent;/*test color*/
overflow: visible;
padding: 0;
position:absolute;
right:100px;
top:0;
z-index:9000;
}
#tNav{font-size:13px;}
#tNav ul{
padding: 0;
margin: 0;
list-style: none;
font-size:13px;
}
#tNav li {/*Level 1 - horizontal menu*/
float: left;
border: solid 1px transparent;
position:relative;
}
#tNav a {/*level 1 text style*/
display: block;
padding: 3px 10px;
background-color:transparent;
font-weight:bold;
text-decoration: none;
}
#tNav a:visited, #tNav a:hover {
font-weight:bold;
color: #006400;
text-decoration:none;
}
#tNav li:hover ul {left: auto;}
#tNav li:hover {
border:solid 1px #ccc;
background-color:#fff;
z-index:1000;
}
#tNav li ul {/*level 2 container- Second Level List*/
list-style: none;
position: absolute;
width: 120px;
left: -999em;
background-color:#fff;
border: solid 1px #ccc;
margin-top: 0px;
margin-left: -1px;
}
#tNav li ul a, #tNav li ul a:hover{
border: none;
font-weight:normal;
text-decoration: none;
display:block;
}
#tNav li ul a:hover, *this is area that is going to new line in IE*/
#tNav li ul a:active,
#tNav li ul a:focus/{
color: #880000;
font-weight:normal;
text-decoration:underline;
display:block;
}
#tNav ul li { clear:both;}
#tNav li ul li:hover {
border:solid 1px #fff;
}
Heres the HTML:
s<div id="navWrap">
<ul id="tNav">
<li>Help
<ul class="level2">
<li>Help Center</li>
<li>Search Knowledge Base</li>
<li>Contact Support</li>
<li>Search Site Web Page</li>
<li>Browse FAQs</li>
</ul>
</li>
<li>Buyers
<ul>
<li>New Buyers</li>
<li>For Buyers</li>
<li>How To Buy</li>
<li>Buyer's Protection</li>
</ul>
</li>
<li>Sellers
<ul>
<li>New Sellers</li>
<li>For Sellers</li>
<li>How To Sell</li>
<li>Fees & Services</li>
<li>Join our Network</li>
<li>Sell an Item</li>
</ul>
</li>
</ul>
</div>
Just add a width to your nav links:
#tNav a {width:100px; }
The value used needs to be the width of the element (120px) minus the horizontal padding (10px left and 10px right) = 100px.
http://jsfiddle.net/5sZm9/