CSS下拉菜单在FF上为1列，在Chrome等上为4列

时间：2015-01-16 18:46:22

标签： css google-chrome firefox

需要知道导航的内容。我会发布截图。我有一个使用CSS的下拉列表，它在Chrome上有4列显示正常但在FireFox上显示的是1个大长列。帮助

.nav{ background:#eaeadf; border-top:#eeeee5 solid 1px; margin:0px; box-shadow:0px -5px 5px #E7E9DA inset;}
.nav ul{ text-align: right; }
.nav ul li{  display: inline-block; }
.nav ul li span { color:#7c7c7c; font-size:16px; line-height:27px;}
.nav ul li a{ color:#7c7c7c; font-size:16px; padding:0px 10px; line-height:27px; text-transform:capitalize; margin: 0; display: inline-block; font-family:"Gill Sans", GillSans, Trebuchet, Calibri, sans-serif; letter-spacing: 1px; }
.nav ul li a:hover { color: #960530; }
.nav ul li:after { content:" | " ; color: #7c7c7c; font-size: 16px; line-height: 27px; }
.nav ul li.active:after { content: ""; }
.nav ul li:last-child a { padding-right: 0; }
.nav ul li:last-child:after { content: "";}
.nav ul li.active {
	margin-left: -11px;
	padding: 0 0 0 10px;
	background: url(images/nav-active-left.png) left top no-repeat;
}
.nav ul li.active a {
	color: #fff;  position: relative;
	background: url(images/nav-active-right.png) right top no-repeat; padding: 0 18px 0 12px;
}
.nav ul li.active a:after { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.nav ul li.active a:after { border-top-color: #7a0427; border-width: 10px; left: 50%; margin-left: -10px; }
.nav ul li ul { background: #363838; text-align: center; }

 
.nav ul li.drop ul { display: none; }
/*.nav ul li.drop:hover ul, .nav ul li.drop ul:hover { display: block; }
 */
.extended-menu { background: #363838; padding: 20px; display: none;
-moz-box-shadow: inset 0 11px 10px -7px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 11px 10px -7px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 11px 10px -7px rgba(0, 0, 0, 0.3);
 }
.extended-menu ul{ text-align: center; display: block; margin: 0 auto; max-width: 1130px; columns: 4; -webkit-columns: 4; column-rule: 2px inset #a9a9a9;
	-webkit-column-rule: 2px inset #a9a9a9;
	-moz-column-rule: 2px inset #a9a9a9;}
.extended-menu ul li { display: block;  margin-bottom: 15px;}
.extended-menu ul li a { padding: 0 10px; margin: 0 10px; font-size:16px; color:#fff; line-height:1.1em !important;}
.extended-menu ul li a:hover { color: #960530; }
.extended-menu ul li:after{ content:" " ; color: #7c7c7c; font-size: 16px; line-height: 27px; }
.extended-menu ul li:last-child:after{ content:"" ; }
<div class="nav">
    <div class="wrapper">
    <ul>
        <li class="drop"><a href="http://www.cumberland.edu/future-students">Future Students </a>
        <ul>
        <li><a href="http://www.cumberland.edu/about">About CU</a></li>
        <li><a href="http://www.cumberland.edu/academics">Academics</a></li>
        <li><a href="http://www.cumberland.edu/admissions">Admissions</a></li>
        <li><a href="http://www.cumberland.edu/applynow">Apply Now</a></li>
        <li><a href="http://www.gocumberlandathletics.com">Athletics</a></li>
        <li><a href="http://connect.cumberland.edu">CU Connect</a></li>
        <li><a href="http://www.cumberland.edu/directory">Directory</a></li>
        <li><a href="http://www.cumberland.edu/admissions/financial_aid/index.html">Financial Services</a></li>
        <li><a href="http://www.cumberland.edu/academics/graduate">Graduate Programs</a></li>
        <li><a href="http://www.cumberland.edu/online">Online & Professional Studies</a></li>
        <li><a href="http://www.cumberland.edu/admissions/informationrequest">Request Information</a></li>
        <li><a href="http://www.cumberland.edu/student-life">Student Development</a></li>
        <li><a href="http://www.cumberland.edu/admissions/preview">Preview Day Registration</a></li>
        <li><a href="http://www.cumberland.edu/studentrighttoknow">Student Right to Know</a></li>
        </ul>
        </li>
        
        <li class="drop"><a href="http://www.cumberland.edu/students">Current Students </a>
        <ul>
        <li><a href="http://www.cumberland.edu/student-resources/calendar">Academic Calendar</a></li>
        <li><a href="/business-office">Business Office</a></li>
        <li><a href="http://www.cumberland.edu/online_courses.html">Canvas Login</a></li>
        <li><a href="/student-life/executive-vice-president/career-services">Career Services</a></li>
        <li><a href="http://www.cumberland.edu/student-resources/home">Catalog, Forms, and Handbooks</a></li>
        <li><a href="http://www.cumberland.edu/comment">Comment Form</a></li>
        <li><a href="http://connect.cumberland.edu">CU Connect</a></li>
        <li><a href="http://www.cumberland.edu/student-life/dos">Dean of Students</a></li>
        <li><a href="http://www.cumberland.edu/student-life/dos/dining">Dining Services</a></li>
        <li><a href="http://www.cumberland.edu/directory">Directory</a></li>
        <li><a href="http://www.cumberland.edu/eportal/students">ePortal</a></li>
        <li><a href="http://www.cumberland.edu/admissions/financial_aid/index.html">Financial Services</a></li>
        <li><a href="https://cumberland-csm.symplicity.com/">Hire CU</a></li>
        <li><a href="http://www.cumberland.edu/student-life/todayatcu">Today @ CU</a></li>
        <li><a href="http://www.cumberland.edu/online">Online & Professional Studies</a></li>
        <li><a href="http://www.cumberland.edu/student-life/dos/residence-life">Residence Life</a></li>
        <li><a href="http://www.cumberland.edu/nursing-health-professions/nursing/wellness">Rudy Wellness Center</a></li>
        <li><a href="https://cumberlandu-community.symplicity.com">Community </a></li>
        <li><a href="http://www.cumberland.edu/student-life">Student Development</a></li>
        <li><a href="http://www.cumberland.edu/studentrighttoknow">Student Policies</a></li>
        <li><a href="http://www.cumberland.edu/library">Vise Library</a></li>
        <li><a href="http://www.cumberland.edu/Student_Email.html">Student Email</a></li>
        <li><a href="http://www.cumberland.edu/student-resources/home">Student Resources</a></li>
        <li><a href="http://www.cumberland.edu/studentrighttoknow">Student Right to Know</a></li>
        <li><a href="http://www.cumberland.edu/commencement">Commencement 2015</a></li>
        </ul>
        </li>
        
        <li class="drop"><a href="http://www.cumberland.edu/faculty-staff">Faculty & Staff </a>
        <ul>
        <li><a href="/communications">Communications</a></li>
        <li><a href="http://www.cumberland.edu/directory">Directory</a></li>
        <li><a href="http://www.cumberland.edu/student-life/dos/dining">Dining Services</a></li>
        <li><a href="http://www.cumberland.edu/ePortal/faculty">ePortal</a></li>
        <li><a href="https://charlie.cumberland.edu/efaculty/login.asp?flag=1">Faculty CAMS Login</a></li>
        <li><a href="http://mail.cumberland.edu">Faculty & Staff Email</a></li>
        <li><a href="https://charlie.cumberland.edu/intranet/">Intranet</a></li>
        <li><a href="https://support.cumberland.edu/portal">IT Service Request</a></li>
        <li><a href="http://www.cumberland.edu/academics/undergrad/nursing/wellness/index">Rudy Wellness Center</a></li>
        <li><a href="http://www.cumberland.edu/studentrighttoknow">Student Right to Know</a></li>
        </ul>
        </li>
        
        <li class="drop"><a href="http://www.cumberland.edu/alumni">Alumni & Friends </a>
        <ul>
        <li><a href="http://www.cumberland.edu/alumni/index.html">Alumni & Friends</a></li>
        <li><a href="http://www.cumberland.edu/alumni/alumni_benefits">Alumni Benefits</a></li>
        <li><a href="http://www.cumberland.edu/alumni/map">Alumni Map</a></li>
        <li><a href="http://www.cumberland.edu/alumni/update_form">Alumni Update Form</a></li>
        <li><a href="http://www.cumberland.edu/alumni/alumni_assoc.html">CU Alumni Association</a></li>
        <li><a href="http://www.cumberland.edu/alumni/downloads.html">Downloads</a></li>
        <li><a href="http://www.cumberland.edu/alumni/staff">Meet the Team</a></li>
        <li><a href="http://www.cumberland.edu/alumni/newsletter.html">Newsletters</a></li>
        <li><a href="http://www.cumberland.edu/alumni/socialnetworking">Social Networking</a></li>
        <li><a href="http://www.cumberland.edu/alumni/events">Upcoming Events</a></li>
        <li><a href="https://www.sitemason.com/files/e2x8xW/TRANSCRIPT_REQUEST_FORM_2.pdf">Request a Transcript</a></li>
        <li><a href="https://app.e2ma.net/app2/audience/signup/35287/21064/?v=a">Sign Up For E-Newsletter</a></li>
        </ul>
        </li>
        
        <li class="drop"><a href="http://www.cumberland.edu/online">THE NET.WORK&trade; Cumberland University Online </a>
        <ul>
        <li><a href="http://www.cumberland.edu/online/index.html">THE NET.WORK&trade; Cumberland University Online</a></li>
        <li><a href="http://www.cumberland.edu/online/corporate-partners.html">Corporate Partners</a></li>
        <li><a href="http://www.cumberland.edu/online/business-and-criminal-justice/business/index.html">Business Online</a></li>
        <li><a href="http://www.cumberland.edu/online/business-and-criminal-justice/criminal-justice/index.html">Criminal Justice Online</a></li>
        <li><a href="http://www.cumberland.edu/online/rn-bsn">RN-BSN Online</a></li>
        <li><a href="http://www.cumberland.edu/online/mae/">MAE Online</a></li>
        <li><a href="http://www.cumberland.edu/online/mba/index.html">MBA Online</a></li>
        <li><a href="http://www.cumberland.edu/online/faq.html">FAQs</a></li>
		</ul>
        </li>
        
      </ul>
      
        <div class="cleer"></div>
        
    </div>
<div class="extended-menu"></div>
<div class="cleer"></div>

</div>

任何帮助将不胜感激。再次 - 代码在Chrome中看起来很好，但在FireFox中只显示了一列。

enter image description here

enter image description here

0 个答案:

没有答案
相关问题
最新问题