Позиционирование мегаменю CSS в Internet Explorer 7

Я создал меню в HTML и CSS, которое работает во всех основных браузерах (Chrome, Firefox, IE8 + и Safari). Вы можете найти его здесь: http://www.calvaryccm.com/melbourne

Проблема возникает только в IE 7.

У меня есть всплывающее меню с использованием JS для эффекта. Когда я пытаюсь отобразить его в IE7, происходит следующее:

введите описание изображения здесь

Вот что должно произойти: введите описание изображения здесь

HTML:

<div id="menu-wrapper">
<ul class="megaCreator" id="menu"> <!-- About -->
    <li class="megaMenu-drop"> <a href="#">About</a>
    <div id="dropdown-wrapper" class="about"></div>
    <div class="megaMenu-content drop-six-columns">
    <div class="one-col">
    <h4>Melbourne Campus</h4>
    <ul>
        <li><a href="/melbourne">Campus Home</a></li>
        <li><a href="/melbourne/about">Campus History</a></li>
        <li><a href="/melbourne/meet-the-pastors">Meet The Pastors</a></li>
        <li><a href="https://maps.google.com/maps?q=2955+Minton+Road,+West+Melbourne,+FL&amp;hl=en&amp;oq=2955+minto&amp;t=h&amp;doflg=ptm&amp;hnear=2955+Minton+Rd,+West+Melbourne,+Brevard,+Florida+32904&amp;z=17&amp;iwloc=A">Directions</a></li>
    </ul>
    </div>
    <div class="one-col">
    <h4>New To CCM</h4>
    <ul>
        <li><a href="/welcome-new/how-do-i-get-saved">How Do I Get Saved</a></li>
        <li><a href="/welcome-new/five-cs">Five C's</a></li>
        <li><a href="/welcome-new/statement-of-faith">Statement of Faith</a></li>
        <li><a href="/contact-us/service-times">Service Times</a></li>
        <li><a href="/contact-us">Contact Us</a></li>
    </ul>
    </div>
    <div class="one-col">
    <h4>&nbsp;</h4>
    <ul>
        <li><a href="/contact-us/staff-contacts">Staff Contacts</a></li>
        <li><a href="/resources/baptism">Baptism</a></li>
    </ul>
    </div>
    <div class="three-col">
    <h4 style="margin-left: -1px;">What We Believe</h4>
    <p>Our core values here at Calvary Chapel Melbourne can be summed up with five C&rsquo;s. &nbsp;We <em>commit</em> our lives to Christ and <em>celebrate</em> the fulfilling lifestyle, <em>connecting</em> to others through personal relationships, <em>communicating</em> the Good News and <em>contributing</em> our time, passion, talents and possessions to the cause of Christ.</p>
    </div>
    </div>
    </li>
    <!-- End About --> <!-- What's New -->
    <li class="megaMenu-drop"> <a href="#">What's New</a>
    <div id="dropdown-wrapper" class="whatsNew"></div>
    <div class="megaMenu-content drop-six-columns">
    <div class="one-col">
    <h4>News</h4>
    <a href="/news"><img alt="News" src="/images/navigation/news.png" width="140" height="104" /></a> </div>
    <div class="one-col">
    <h4>Events</h4>
    <a href="/events"><img alt="Events" src="/images/navigation/event.png" width="140" height="104" /></a> </div>
    <div class="one-col">
    <h4>Calendar</h4>
    <a href="https://my.calvaryccm.com/portal/event_calendar.aspx?filter=campus:5"><img alt="Calendar" src="/images/navigation/calendar.png" width="140" height="104" /></a></div>
    <div class="one-col">
    <h4>Newsletter</h4>
    <a href="/subscribe"><img alt="Newsletter" src="/images/navigation/newsletter.png" width="140" height="104" /></a></div>
    <div class="two-col">
    <h4>Next Big Thing!</h4>
    <a href="/events/8067/fall-fest-2012-date-change"><img alt="Fall Fest" src="/images/navigation/nextbigthing.png" width="300" height="104" /></a></div>
    </div>
    </li>
    <!-- end What's New --> <!-- Ministries -->
    <li class="megaMenu-drop">
    <div id="dropdown-wrapper" class="ministries"></div>
    <a href="#">Ministries</a>
    <div class="megaMenu-content drop-six-columns">
    <div class="one-col">
    <h4>Students</h4>
    <ul class="megaMenu-links">
        <li><a href="/melbourne/ministries/244/childrens-ministry">Kids</a></li>
        <li><a href="/melbourne/ministries/415/412-jr-high">412 Jr. High</a></li>
        <li><a href="/melbourne/ministries/390/412-sr-high">412 Sr. High</a></li>
        <li><a href="/melbourne/ministries/61/fusion-melbourne">Young Adults</a></li>
    </ul>
    </div>
    <div class="one-col">
    <h4>Men</h4>
    <ul class="megaMenu-links">
        <li><a href="/melbourne/ministries/360/mens-ministry">R.E.A.L. Men</a></li>
        <li><a href="/melbourne/ministries/520/gait-keepers-father-son-ministry">Gait Keepers</a></li>
        <li><a href="/melbourne/ministries/285/mens-sports">Sports</a></li>
        <li><a href="/melbourne/recovery">Recovery</a></li>
    </ul>
    </div>
    <div class="one-col">
    <h4>Women</h4>
    <ul class="megaMenu-links">
        <li><a href="/melbourne/ministries/378/womens-ministries">Sisterhood</a></li>
        <li><a href="/melbourne/ministries/485/moms4moms">Moms4Moms</a></li>
        <li><a href="/melbourne/recovery">Recovery</a></li>
    </ul>
    </div>
    <div class="one-col">
    <h4>Couples</h4>
    <ul class="megaMenu-links">
        <li><a href="/melbourne/ministries/465/couples-ministry">Couples</a></li>
        <li><a href="/melbourne/ministries/426/divorce-care">Divorce Care</a></li>
    </ul>
    </div>
    <div class="one-col">
    <h4>Other</h4>
    <ul class="megaMenu-links">
        <li><a href="/resources/bible-college">Bible College</a></li>
        <li><a href="/the-chapel-store">Bookstore</a></li>
        <li><a href="/common-grounds-cafe">Cafe</a></li>
        <li><a href="http://www.ccamelb.com/home.aspx">CCA</a></li>
    </ul>
    </div>
    <div class="one-col">
    <h4>All Ministries</h4>
    <a href="/melbourne/ministries"><img alt="All Ministries" src="/images/navigation/allministries.png" width="140" height="104" /></a></div>
    </div>
    </li>
    <!-- end Ministries --> <!-- Missions -->
    <li class="megaMenu-drop"> <a href="#">Missions</a>
    <div id="dropdown-wrapper" class="about"></div>
    <div class="megaMenu-content drop-six-columns">
    <div class="one-col">
    <h4>Missionaries</h4>
    <a href="/missions/missionaries"><img alt="Missionaries" src="/images/navigation/missionaries.png" width="140" height="104" /></a> </div>
    <div class="one-col">
    <h4>Mission Trips</h4>
    <a href="/missions/mission-trips"><img alt="Mission Trips" src="/images/navigation/missiontrips.png" width="140" height="104" /></a> </div>
    <div class="one-col">
    <h4>Local Outreach</h4>
    <a href="/missions/local-outreach"><img alt="Local Outreach" src="/images/navigation/localoutreach.png" width="140" height="104" /></a></div>
    <div class="one-col">
    <h4>Evangelism</h4>
    <a href="/missions/evangelism"><img alt="Evangelism" src="/images/navigation/Evangelism.png" width="140" height="104" /></a></div>
    <div class="one-col">
    <h4>GMO</h4>
    <a href="/missions/global-media-outreach"><img alt="Global Media Outreach (GMO)" src="/images/navigation/gmomissions.png" width="140" height="104" /></a></div>
    <div class="one-col">
    <h4 style="margin-left: -1px;">What's Missions</h4>
    <p>Our strategy for missions is to build and support relationships that inspire change. We to this by serving our community and the world in love.</p>
    </div>
    </div>
    </li>
    <!--End Missions--> <!-- Teachings -->
    <li class="megaMenu-drop"> <a href="#">Teachings</a>
    <div id="dropdown-wrapper" class="teachings"></div>
    <div class="megaMenu-content drop-six-columns">
    <div class="one-col">
    <ul>
        <li><a href="/teachings">Teachings Home</a></li>
        <li><a href="/teachings/main">Main Archive</a></li>
        <li><a href="/teachings/viera">Viera Archive</a></li>
        <li><a href="/teachings/teachings-by-topic">Teachings by Topic</a></li>
        <li><a href="/resources/apps">Mobile Apps</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</li>
    </ul>
    </div>
    <div class="one-col">
    <ul>
        <li><a href="/resources/roku">Roku</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</li>
        <li><a href="/resources/resources/feeds-and-podcasts">Feeds and Podcasts</a></li>
    </ul>
    </div>
    <div class="one-col">
    <h4>Current Series</h4>
    <a href="/teachings/main/series/74"><img alt="Current Weekend Series" src="/images/navigation/currentseries.png" /></a> </div>
    <div class="one-col">
    <h4>Last Praise Night</h4>
    <a href="/teachings/main/video/PN2012/speak-to-me-lord"><img alt="Latest Praise Night" src="/images/navigation/currentpraisenight.png" width="140" height="104" /></a></div>
    <div class="one-col">
    <h4>Devotions</h4>
    <a href="/daily-devotions"><img alt="Daily Devotionals" src="/images/navigation/devos.png" width="140" height="104" /></a></div>
    <div class="one-col">
    <h4>Live Streaming</h4>
    <a href="/teachings/live-streaming"><img alt="Live Streaming Church Service" src="/images/navigation/livestreaming1.png" width="140" height="104" /></a></div>
    </div>
    </li>
    <!-- end Teachings --> <!-- Connect -->
    <li class="megaMenu-drop"> <a href="#">Connect</a>
    <div id="dropdown-wrapper" class="getInvolved"></div>
    <div class="megaMenu-content drop-six-columns">
    <div class="one-col">
    <ul>
        <li><a href="/melbourne/small-groups">Bible Studies</a></li>
        <li><a href="/melbourne/small-groups">Homegroups</a></li>
        <li><a href="http://www.facebook.com/CalvaryCCM">Facebook</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</li>
        <li><a href="http://twitter.com/CalvaryCCM">Twitter</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</li>
        <li><a href="/contact-us">Contact Us</a></li>
    </ul>
    </div>
    <div class="one-col">
    <h4>iPray</h4>
    <a href="/ipray"><img alt="iPray" src="/images/navigation/ipray.png" width="140" height="104" /></a></div>
    <div class="one-col">
    <h4>Small Groups</h4>
    <a href="/melbourne/small-groups"><img alt="Small Groups" src="/images/navigation/smallgroups.png" width="140" height="104" /></a></div>
    <div class="one-col">
    <h4>GMO</h4>
    <a href="/missions/global-media-outreach"><img alt="Clobal Media Outreach (GMO)" src="/images/navigation/gmo1.png" width="140" height="104" /></a></div>
    <div class="two-col">
    <h4>Volunteer Application</h4>
    <a href="/volunteer-application"><img alt="Volunteer Application" src="/images/navigation/volunteerapp.png" width="240" height="104" /></a></div>
    </div>
    </li>
    <!-- end Connect --> <!-- How Can I Help -->
    <li class="megaMenu-drop"> <a href="#">Giving</a>
    <div id="dropdown-wrapper" class="getInvolved"></div>
    <div class="megaMenu-content drop-six-columns">
    <div class="one-col">
    <ul>
        <li><a href="https://my.calvaryccm.com/portal/online_giving.aspx?filter=campus:5&amp;template=melbourne&amp;remembertemplate=true">Online Giving</a></li>
        <li><a href="/resources/volunteer">Volunteer</a></li>
        <li><a href="/resources/employment-opportunities">Employment</a></li>
        <li><a href="/contact-us">Contact Us</a></li>
    </ul>
    </div>
    <div class="two-col">
    <h4>Where Can I Serve?</h4>
    <a href="https://my.calvaryccm.com/portal/opportunity_finder.aspx?template=melbourne&amp;remembertemplate=true"><img alt="Opportunity Finder" src="/images/navigation/opportunities.png" width="300" height="104" /></a></div>
    <div class="one-col">
    <h4>Volunteer</h4>
    <a href="/resources/volunteer"><img alt="Volunteer With Us" src="/images/navigation/volunteer.png" width="140" height="104" /></a></div>
    <div class="two-col">
    <h4 style="margin-left: -1px;">Why We Need Volunteers</h4>
    <p>You might be asking, &ldquo;Why volunteer?&rdquo;&nbsp; As so many Christians have discovered, serving is what life is all about.&nbsp; Serving is how God transforms everything &ndash; our marriages, our families, our relationships, our community, and the world!</p>
    </div>
    </div>
    </li>
    <!-- end How Can I Help? --> </ul>
    </div>

CSS:

.megaCreator, .megaCreator ul, .megaCreator li, .megaCreator a, .megaCreator img, .megaCreator div, .megaCreator p, .megaCreator form, .megaCreator input, .megaCreator textarea, .megaCreator h3, .megaCreator h4, .megaCreator h5 { margin: 0; padding: 0; font-size: 12px; font-family: sans-serif; }
.megaCreator a { text-decoration: none; }
.megaCreator li { list-style: none; }
.megaCreator input, .megaCreator textarea, .megaCreator img { outline: none; border: none; background: none; }



/* NAVIGATION BAR STYLES */
.megaCreator {
    position: relative;
    z-index: 500;
    clear: both;
    width: 100%;
    height: 37px;

    background: #FFFFFF;
}

.megaCreator:before,
.megaCreator:after {
    content: '';
    clear: both;
}

/* Nav List */
.megaCreator > li {
    height: 37px;
}

.megaCreator > li.megaMenu-align-right {
    float: right;
    border-right: none;
    border-left: 1px dotted #ccc;
}

/* Nav Links */
.megaCreator > li > a {
    position: relative;
    z-index: 550;
    display: block;
    padding: 3px 25px 10px 25px;
    line-height: 34px;
    font-size: 14px;
    color: #525252;

    -webkit-transition: color .15s ease-in, background-image .2s linear .15s;
    -moz-transition: color .15s ease-in, background-image .2s linear .15s;
    -o-transition: color .15s ease-in, background-image .2s linear .15s;
    -ms-transition: color .15s ease-in, background-image .2s linear .15s;
    transition: color .15s ease-in, background-image .2s linear .15s;
}

.megaCreator > li > a:hover { color: #000000; }

.megaCreator > li > a:active {
    color: #525252;

    -webkit-transition: color 1ms;
    -moz-transition: color 1ms;
    -o-transition: color 1s;
    -ms-transition: color 1s;
    transition: color 1s;
}

.megaCreator > li.megaMenu-drop:hover > a:after,
.megaCreator > li.megaMenu-drop > a.megaMenu-click:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 38px;
}

.megaCreator > li.megaMenu-drop:hover > a,
.megaCreator > li.megaMenu-drop > a.megaMenu-click { z-index: 650; }



/*  DROPDOWN */

.megaCreator > li > div,
.megaCreator > li > ul,
.megaCreator > li > ul li > ul {
    position: absolute;
    z-index: 600;
    padding: 10px 0;
    top: 35px;
    left: 0px;
    overflow: hidden;
    visibility: hidden;
    border:none;
}

.megaCreator > li.megaMenu-align-right > div {
    left: auto;
    right: -1px;
}


/* Transitions */
.megaMenu-slide > li > div,
.megaMenu-slide > li > ul,
.megaMenu-slide > li > ul li > ul,
.megaMenu-fade > li > div,
.megaMenu-fade > li > ul,
.megaMenu-fade > li > ul li > ul {
    -webkit-transition: all .10s linear .15s;
    -moz-transition: all .10s linear .15s;
    -o-transition: all .10s linear .15s;
    -ms-transition: all .10s linear .15s;
    transition: all .10s linear .15s;
}

.megaMenu-slide > li > div,
.megaMenu-slide > li > ul,
.megaMenu-slide > li > ul li > ul { top: 100px; }

.megaMenu-slide > li.megaMenu-drop:hover > div,
.megaMenu-slide > li.megaMenu-drop:hover > ul,
.megaMenu-slide > li > ul li.megaMenu-drop:hover > ul {
    top: 40px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    overflow: visible;
    visibility: visible;
}

.megaMenu-fade > li.megaMenu-drop:hover > div,
.megaMenu-fade > li.megaMenu-drop:hover > ul,
.megaMenu-fade > li > ul li.megaMenu-drop:hover > ul,
.megaCreator > li.megaMenu-drop:hover > div,
.megaCreator > li.megaMenu-drop:hover > ul,
.megaCreator > li > ul li.megaMenu-drop:hover > ul {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    overflow: visible;
    visibility: visible;
}

/* Dropdown Columns */


.megaCreator .drop-two-columns { width: 320px; }
.megaCreator .drop-three-columns { width: 480px; }
.megaCreator .drop-four-columns { width: 640px; }
.megaCreator .drop-five-columns { width: 800px; }
.megaCreator .drop-six-columns { width: 950px;
    background-color:#E7E7E7;
    height:202px;}

/* Content Columns */
.megaCreator .one-col { width: 140px; }
.megaCreator .two-col { width: 300px; }
.megaCreator .three-col { width: 460px; }
.megaCreator .four-col { width: 620px; }
.megaCreator .five-col { width: 780px; }
.megaCreator .six-col { width: 950px; }

.megaCreator .one-col, .megaCreator .two-col, .megaCreator .three-col, .megaCreator .four-col, .megaCreator .five-col, .megaCreator .six-col {
    float: left;
    margin: 8px;
}

/* Dropdown Levels */

.megaCreator > li > ul,
.megaCreator > li > ul li > ul {
    width: 160px;
    padding: 10px;
}

.megaCreator > li > ul li.megaMenu-drop:hover > ul,
.megaCreator.megaMenu-fade > li > ul li.megaMenu-drop > ul { top: -11px; }

.megaCreator > li > ul li { position: relative; }

.megaCreator > li > ul li > ul {
    position: absolute;
    left: 100%;
}

.megaCreator > li.megaMenu-align-right > ul {
    left: auto;
    right: 0;
}

.megaCreator > li > ul li.megaMenu-align-left > ul {
    position: absolute;
    left: auto;
    right: 105%;
}

.megaCreator > li > ul a {
    display: block;

    font-size: 14px;
    color: #5e5e5e;
    text-shadow: 0px 1px 1px white;

    -webkit-transition: color .15s ease-in;
    -moz-transition: color .15s ease-in;
    -o-transition: color .15s ease-in;
    -ms-transition: color .15s ease-in;
    transition: color .15s ease-in;
}

.megaCreator > li > ul li:last-child a { border: none; }

.megaCreator > li > ul a:hover { color: #888; }


/* CONTENT STYLES */

/* Text */
.megaMenu-content h2, .megaMenu-content h3, .megaMenu-content h4 {
    color: #555;
    margin: 10px 0;
    font-family:'TitilliumText22LBold', Arial, Helvetica, Verdana, sans-serif;
}

.megaMenu-content h2 { font-size: 20px; }
.megaMenu-content h3 { font-size: 18px; }
.megaMenu-content h4 { font-size: 18px; margin-left:4px; }

.megaMenu-content p {
    padding: 10px 0;
    line-height: 18px;
    color: #333;
}

/* Button */
.megaMenu-content .button {
float: left;
padding: 7px 33px 6px 10px;
border: 2px solid #2FB9CE;
background: #27B7D0 url(../images/bg-link.gif) no-repeat 100% 50%;
font: 15px/15px 'HelveticaNeueLTStd75Bold', Arial, Helvetica, Verdana, sans-serif;
color: white;
text-decoration: none;
margin: 0 6px 0 0;
text-shadow: 0 1px #158BA0;

}


/* Links */
.megaMenu-content a  {
    display: block;
    padding: 4px 4px 4px 4px;
    line-height: 20px;
    margin: 4px -7px -7px 0px;
}
.megaMenu-content a:hover { color: #02ABC8; background-image:url(../images/bg-decor-line01.png);}

.megaMenu-content .megaMenu-links a {
    display: block;
    padding: 4px 4px 4px 4px;
    line-height: 20px;
    margin: 4px 37px 3px 4px;
}

a.button:hover{
    color:#FFFFFF;
    background: #27B7D0 url(../images/bg-link.gif) no-repeat 100% 50%;
    text-decoration:underline;
}

.megaMenu-content .megaMenu-links li:last-child a { border: none; }

.megaMenu-links .block ul{
    padding: 0 0 0 18px;
    width:auto;
    overflow:hidden;
}

/* Cursor */
.megaMenu-content { cursor: default; }

/* Floats */
.megaMenu-content .fl { float: left; }
.megaMenu-content .fr { float: right; }
.megaMenu-content .cb { clear: both; }
.megaMenu-content .cl { clear: left; }
.megaMenu-content .cr { clear: right; }
.megaMenu-content .block { display: block; margin-top: 10px; width:auto;}

.block{
            padding: 0 0 20px;
        }

.about{
    height:196px;
}

.whatsNew{
    height:196px;
}
.ministries{
    height:196px;
}
.teachings{
    height:196px;
}
.getInvolved{
            height:196px;
        } 
        #menu-wrapper{
            width: 960px;
            height: 48px;
            background: url(../images/bg-decor-line01.png);
            margin-bottom: 29px;
        }
        #menu {  
            list-style:none;  
            width:940px;  
            padding: 0 0 0 10px;
            margin: 0 0 0 5px;
            height:43px;  
            overflow: visible;
        } 

        #menu li {  
            float:left;  
            display:block;   
            padding: 4px 30px 9px -1px;  
            margin: 4px 0 0 0;  
            border:none;  
            z-index:7;
        }

        #menu li:hover{
            background-color:#E7E7E7;
        }

        #dropdown-wrapper{
            width:960px;
            background: url(../images/bg-decor-line01.png); 
            left:-5px; top:48px;
        }

Как мне заставить меню выстроиться правильно?

Courtney Stephenson 25.10.2012 источник

comment

Трудно дать действительно хороший ответ, не видя своего кода CSS и HTML. Мне приходилось сталкиваться с подобными проблемами, но без кода это сложно понять. - jessegavin 25.10.2012

comment

По данным W3, Internet Explorer 7 используют только около 4% пользователей. Если бы я был на твоем месте, я бы не стал слишком много времени уделять этому - tier1 25.10.2012

comment

К сожалению, @tkcsam клиенту это потребовалось - Courtney Stephenson 26.10.2012

comment

Попался: / Хотел бы я помочь - tier1 26.10.2012

comment

Не по теме - но меня забавляет, что у вас есть меню на церковном сайте под названием megaCreator ... Вот и все. - Timothy Lee Russell 01.05.2014

comment

@TimothyLeeRussell, мы тоже думали, что это смешно - Courtney Stephenson 01.05.2014

Ответы (1)

arrow_upward
1
arrow_downward

Удалите следующий фрагмент из ie.css

.block li {
    position:relative;
}

Я только что отредактировал вживую, вроде поправили.

Pranav 웃 25.10.2012

comment

Спасибо большое за помощь! - Courtney Stephenson; 26.10.2012

Позиционирование мегаменю CSS в Internet Explorer 7

Ответы (1)

Похожие вопросы