Thanks some more.Here's how it looks now in IE7, submenus shifted to the left, doesn't fill the space and is still vertical. This menu was such a good idea, before I installed it. Thanks some more.
Thanks some more.Attachments
lecart.jpg (125.79 KiB) Viewed 1609 times
As an update for anyone else who had the question, I've fixed one problem by simply making sure my menu is only on one line. So we rearranged categories so there's only one line of primaries.
The only problem left is that in IE7, after all of the changes so far, it still makes submenus appear in a vertical list all the way to the left of the container instead of horizontal and positioned under the main menu item. In IE8, Firefox, Chrome and Safari it works fine. In IE6, oddly enough, except for some weird z-index issues, the first three submenus load normally and the last ones do the push to the left vertical behavior. Very odd.
Not worried so much about IE6 but I still need some assistance getting it to work in IE7. Thanks! Current stylesheet:
The only problem left is that in IE7, after all of the changes so far, it still makes submenus appear in a vertical list all the way to the left of the container instead of horizontal and positioned under the main menu item. In IE8, Firefox, Chrome and Safari it works fine. In IE6, oddly enough, except for some weird z-index issues, the first three submenus load normally and the last ones do the push to the left vertical behavior. Very odd.
Not worried so much about IE6 but I still need some assistance getting it to work in IE7. Thanks! Current stylesheet:
Code: Select all
/*
Original CSS code by Soh Tanaka @ http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/
*/
ul#mm_topnav {
margin: 0; padding: 0;
float:left;
width:100%;
list-style: none;
background:#000000;
background-image:url(../image/menuback.jpg);
background-repeat:repeat;
}
ul#mm_topnav li {
float: left;
margin: 0; padding: 0;
position: relative; /*--Important--*/
line-height: 44px;
}
ul#mm_topnav li a {
float: left;
height: 40px;
padding-left: 10px;
padding-right: 10px;
font-weight: bold;
text-decoration: none;
color:#ffffff;
font-size:13px;
}
ul#mm_topnav li:hover{
background-position: left bottom;
background: #4376ab;
}
ul#mm_topnav li:hover a {
color: #FFF;
}
ul#mm_topnav li:hover a.mm_root {
color: #FFF;
background:url("../image/mm_arrow_down.png") no-repeat scroll right 20px transparent;
}
ul#mm_topnav a.mm_root {
margin-right:10px;
background:url("../image/mm_arrow_down_1.png") no-repeat scroll right 20px transparent;
padding-right: 15px;
}
ul#mm_topnav a:hover.mm_root {
background:url("../image/mm_arrow_down_1.png") no-repeat scroll right 20px transparent;
}
ul#mm_topnav li .mm_sub {
position: absolute; /*--Important--*/
top: 39px; left: 0;
z-index: 99999;
background: #4376ab;
padding: 10px;
float: left;
/*--Bottom right rounded corner--*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
/*--Bottom left rounded corner--*/
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
/*css3*/
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
display: none; /*--Hidden for those with js turned off--*/
}
ul#mm_topnav li .mm_sub ul{
list-style: none;
margin: 0; padding: 0;
width: 150px;
float: left;
margin-bottom: 5px;
}
ul#mm_topnav .mm_sub ul li {
width: 100%; /*--Override parent list item--*/
color: #fff;
line-height: 25px;
}
ul#mm_topnav .mm_sub ul li h2 { /*--Sub nav heading style--*/
padding: 0px; margin: 0px;
font-size: 11px;
color:#c8e2fd;
font-weight: normal;
text-decoration:none;
}
ul#mm_topnav .mm_sub ul li h2 a { /*--Sub nav heading link style--*/
padding: 0px 0;
margin: 1px;
background-image: none;
color:#e2d7eb;
font-weight: 700;
}
ul#mm_topnav .mm_sub ul li a {
float: none;
padding: 0px;
text-indent: 0; /*--Override text-indent from parent list item--*/
height: auto; /*--Override height from parent list item--*/
background: url(../image/mm_arrow_right.png) no-repeat left center;
padding-left: 10px;
padding-right:10px;
display: block;
text-decoration: none;
color: #FFF;
font-weight: normal;
}
ul#mm_topnav .mm_sub ul li a:hover {
color: #fff;
text-decoration: none;
}
ul#mm_topnav li .mm_sub ul.mm_noparent {
}
Who is online
Users browsing this forum: No registered users and 1 guest
