这是我的 HTML 和 CSS 代码。
我想知道如何让我的第 3 级下拉菜单从左侧而不是从右侧打开。
<div id="horizontalmenu">
<ul>
<li><a href="AboutUs.html">about us</a>
<ul>
<li><a href="CEO_Message.html">Welcome Message</a></li>
<li><a href="VisionMission.html">Our Vision & Mission</a></li>
<li><a href="Objectives.html">Our Objectives</a></li>
<li><a href="Business_excellence.html">Business Excellence</a></li>
<li><a href="OurBoard.html">Our Board</a></li>
<li class="Menu_second_level"><a href="Management.html">Musanada's Management</a>
<!--<ul>
<li><a href="#">second level</a></li>
<li><a href="#">second level</a></li>
</ul>
<span class="indicator2"></span>-->
</li>
</ul>
<span class="indicator"></span>
</li>
<li><a href="Services.html">services</a>
<ul>
<li><a href="DesignCoordination.html">Design and Coordination</a></li>
<li><a href="RoadsInfrastructure.html">Roads and Infrastructure</a></li>
<li class="Menu_second_level"><a href="BuildingServices.html">Building Services </a>
<ul>
<li><a href="ProjectManagement.html">Project Management </a></li>
<li><a href="FacilitiesManagement.html">Facilities Management</a></li>
</ul>
<span class="indicator2"></span>
</li>
<li><a href="FacilityManagement.html">Facility Management</a></li>
<li class="Menu_second_level"><a href="Overview.html">Procurement</a>
<ul>
<li><a href="Overview.html">Overview</a></li>
<li><a href="Musanada_Procurement_Process.html">Procurement Process</a></li>
<li><a href="Respond_to_Tender.html">Respond to a Tender</a></li>
<li><a href="ContactProcurement.html">Contact Procurement</a></li>
</ul>
<span class="indicator2"></span>
</li>
</ul>
<span class="indicator"></span>
</li>
<li><a href="OurProjects.html">Our project</a>
<ul>
<li class="Menu_second_level"><a href="BuildingOverview.html">Building</a>
<!--<ul>
<li><a href="NationalRehabilitationCenter.html">National Rehabilitation Center</a></li>
<li><a href="ZakherMosque.html">Zakher Mosque</a></li>
<li><a href="ShootingClub.html">Shooting Club</a></li>
<li><a href="CamelRaceTrackAlWathba.html">Camel Race Track Al Wathba</a></li>
<li><a href="AbuDhabiAccountability.html">Abu Dhabi Accountability Authority Headquarters</a></li>
<li><a href="CareRehabilitation.html">Care and Rehabilitation Center - Al Qua'a</a></li>
<li><a href="GhayathiSpecialNeedsCenter.html">Ghayathi Special Needs Center</a></li>
<li><a href="AlAinClub.html">Al Ain Ladies Club</a></li>
<li><a href="AlShahamahSlaughterhouse.html">Al Shahamah Slaughter house</a></li>
<li><a href="CivilDefenseAcademy.html">Civil Defense Academy</a></li>
<li><a href="AbuDhabiClubProject.html">AbuDhabi Ladies Club Project</a></li>
</ul>
<span class="indicator2"></span>-->
</li>
<li class="Menu_second_level"><a href="EducationOverview.html">Education</a>
<!--<ul>
<li><a href="AbuDhabiFutureModelSchoolProgram.html">Abu Dhabi Future Model School Program</a></li>
<li><a href="AlMiskKindergarten.html">Al Misk Kindergarten</a></li>
<li><a href="KhnourFatimahBintAsadSchools.html">Khnour and Fatimah Bint Asad Schools</a></li>
<li><a href="BinHamSchool.html">Bin Ham School – Al Wagan</a></li>
</ul>
<span class="indicator2"></span>-->
</li>
<li class="Menu_second_level"><a href="HousingOverview.html">Housing</a>
<!-- <ul>
<li><a href="WataniProject.html">Watani Project</a></li>
<li><a href="YasProject.html">Yas Project</a></li>
<li><a href="AlFalahVillages.html">Al Falah Villages</a></li>
<li><a href="AlShuaibahProject.html">Al Shuaibah Project</a></li>
<li><a href="AlShuwaibProject.html">Al Shuwaib Project</a></li>
<li><a href="AinAlFaydaProject.html">Ain Al Fayda Project</a></li>
<li><a href="JebelHafeetProject.html">Jebel Hafeet Project</a></li>
<li><a href="RamahProject.html">Ramah Project</a></li>
<li><a href="MezyadUmmGhafaProject.html">Mezyad and Umm Ghafa Project</a></li>
<li><a href="NeimahAlSalamatProject.html">Neimah and Al Salamat Project</a></li>
<li><a href="BidaaAlMatawaProject.html">Bidaa Al Matawa’a Project</a></li>
<li><a href="UmmAlAshtanProject.html">Umm Al Ashtan Project</a></li>
</ul>
<span class="indicator2"></span>-->
</li>
<li class="Menu_second_level"><a href="HealthCareOverview.html">Health Care</a>
<!-- <ul>
<li><a href="AlHayerAlYaharSuwaihanCenter.html">Al Hayer, Al Yahar and Suwaihan Center</a></li>
<li><a href="AlRahbaHospital.html">Al Rahba Hospital</a></li>
<li><a href="AlWaganHospital.html">Al Wagan Hospital</a></li>
<li><a href="AlZafranaCenter.html">Al Zafrana Center</a></li>
<li><a href="PreventiveMedicalCenter.html">Preventive Medical Center – Khalifa City</a></li>
<li><a href="TawamDialysisCenter.html">Tawam Dialysis Center</a></li>
<li><a href="AlHiliOudAlTawbahClinic.html">Al Hili and Oud Al Tawbah Clinic</a></li>
<li><a href="AlTawayahMedicalCenter.html">Al Tawayah Medical Center</a></li>
<li><a href="AlFalahClinic.html">Al Falah Clinic</a></li>
<li><a href="KhalifaCityDialysisCenter.html">Khalifa City Dialysis Center</a></li>
<li><a href="AlSilaHospital.html">Al Sila Hospital</a></li>
<li><a href="AlAinHospital.html">Al Ain Hospital</a></li>
<li><a href="AlMafraqHospital.html">Al Mafraq Hospital</a></li>
<li><a href="GhayathiHospital.html">Ghayathi Hospital</a></li>
<li><a href="AlMushrifCenter.html">Al Mushrif Center</a></li>
<li><a href="AlNoorCentreforSpecialNeeds.html">Al Noor Centre for Special Needs</a></li>
</ul>
<span class="indicator2"></span>-->
</li>
<li class="Menu_second_level"><a href="RoadInfrastructureOverview.html">Road & Infrastructure</a>
<!-- <ul>
<li><a href="SouthShamkhaProject.html">South Shamkha Project</a></li>
<li><a href="PedestrianBridgesProject.html">Pedestrian Bridges Project</a></li>
<li><a href="NeimaProject.html">Neima Project</a></li>
<li><a href="AlMafraqAlGhuwaifatHighwayProject.html">Al Mafraq – Al Ghuwaifat Highway Project</a></li>
<li><a href="AbuDhabiDubaiRoadProject.html">Abu Dhabi – Dubai Road Project</a></li>
<li><a href="AbuDhabiAirportRoadProject.html">Abu Dhabi Airport Road Project</a></li>
<li><a href="MadinatZayedGhayathiRoad.html">Madinat Zayed – Ghayathi Road</a></li>
</ul>
<span class="indicator2"></span>-->
</li>
</ul>
<span class="indicator"></span>
</li>
<li class="Menu_second_level"><a href="OurClient.html">clients</a>
<ul>
<li><a href="HelpDesk.html">800-177 Help Desk</a></li>
</ul>
<span class="indicator"></span>
</li>
<li><a href="#">partners</a></li>
<li><a href="MediaCenter.html">media</a>
<ul>
<li class="Menu_second_level"><a href="MusanadaNews.html">Musanada News</a>
<ul>
<li> <a href="MusanadaNewsletters.html">News Letters</a></li>
<li> <a href="Contact_Us.html">Media Inquiry</a></li>
</ul>
<span class="indicator2"></span>
</li>
<li><a href="MediaGallery.html">Media Gallery</a></li>
</ul>
<span class="indicator"></span>
</li>
<li><a target="_blank" href="http://careers.musanada.com/">careers</a></li>
<!--<li><a href="Contact_Us.html">contact us</a></li>-->
</ul>
</div>
Css
========================================================
#horizontalmenu {
/*width: 78%;*/
display: inline-block;
float: right;
}
#horizontalmenu ul {
padding: 0;
margin: 0;
list-style: none;
}
#horizontalmenu li a{
font-family: 'dinmedium';
font-size: 12.1px;
padding:19px 0px 14px 39px;
color: #fff;
text-decoration: none;
display: block;
text-transform: uppercase;
-webkit-transition: color 0.2s linear, background 0.2s linear;
-moz-transition: color 0.2s linear, background 0.2s linear;
-o-transition: color 0.2s linear, background 0.2s linear;
transition: color 0.2s linear, background 0.2s linear;
}
#horizontalmenu li {
float: left;
position: relative;
padding: 0 0px;
display: block;
}
#horizontalmenu li .indicator {display: block;position: absolute;color: #dedede;top: 23px;right: -12px;font-size: 17px;background: url('../images/nav_arrow.png') center center no-repeat;width: 8px;height: 7px;}
#horizontalmenu li ul {
display: none;
position: absolute;
}
#horizontalmenu li:hover ul {
display: block;
background:rgb(138, 0, 0);
height: auto;
/*width: 8em;*/
margin:0;
padding:0;
/*left: 10px;*/
box-shadow:0 0 4px #757575;
}
#horizontalmenu li ul li {
clear: both;
border-style: none;
}
#horizontalmenu ul li ul li.Menu_second_level ul {
display:none;
position:absolute;
}
#horizontalmenu ul li ul li .indicator2 {display: block;position: absolute;color: #dedede;top: 17px;right: 10px;font-size: 17px;background: url('../images/2ndL_m_arrow.png') center center no-repeat;width: 8px;height: 7px;}
#horizontalmenu ul li ul li.Menu_second_level:hover ul {display:block;background:rgb(138, 0, 0);height: auto;margin:0;padding:0;box-shadow:0 0 4px #757575;left: 210px;top: 0; z-index: 1;}
#horizontalmenu ul ul li {margin: 0;width: 210px;}
#horizontalmenu ul ul li a {
font-family: 'dinmedium';
font-size: 12px;
padding: 12px 0 12px 10px;
color: #fff;
text-align: left;
text-decoration: none;
display: block;
text-transform: uppercase;
-webkit-transition: color 0.2s linear, background 0.2s linear;
-moz-transition: color 0.2s linear, background 0.2s linear;
-o-transition: color 0.2s linear, background 0.2s linear;
transition: color 0.2s linear, background 0.2s linear;
}
#horizontalmenu ul ul li:hover {
/*background: #fff;
color:#8a0000;*/
color: #FFF;
border-bottom: 1px solid #EFEFEF;
background: rgba(255, 255, 255, 0.12);
}
#horizontalmenu ul li a:hover{color:#8a0000;}
#horizontalmenu ul ul li a:hover {/*color:#8a0000;*/ color:#fff;text-shadow: 0px 2px 1px #4B0000;}
最佳答案
更改以下 css 部分:
#horizontalmenu ul li ul li.Menu_second_level:hover ul {
display:block;
background:rgb(138, 0, 0);
height: auto;
margin:0;
padding:0;
box-shadow:0 0 4px #757575;
right:100%; <-- delete left:210px
top: 0;
z-index: 1;
}
关于html - 如何根据视口(viewport)大小设置下拉第二级打开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29119806/