Top Menu – Dropdown wraps around when there is still room

  • pfree5891

    (@pfree5891)


    8 years ago

    One of the dropdown menus on one of my site is split into 3 sections. The 3rd section has ended up the first section, but I want them all to be side by side. Here is my the page I am referring to:

    https://www.pucschools.org/lchs/

    If you hover over “Resources” on the top menu you will see the “Parents” and “Students” sections and the “Teachers” section below them.

    How can I fix this?

Viewing 2 replies - 1 through 2 (of 2 total)
  • a2hostinglk

    (@a2hostinglk)

    The 3 sections of your menu bar is because of the way html mark up was written (the way links were created)

    This is the code of your sub-menu (with 3 sections)

    <div class="inner"><ul style="width: 810px;">
	<li id="nav-menu-item-483" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children sub" style="height: 187px;"><a href="#" class=""><i class="menu_icon blank fa"></i><span>Students</span><span class="plus"></span><i class="q_menu_arrow fa fa-angle-right"></i></a>
	<ul>
		<li id="nav-menu-item-590" class="menu-item menu-item-type-custom menu-item-object-custom "><a target="_blank" href="https://clever.com/in/pucschools" class=""><i class="menu_icon blank fa"></i><span>Clever</span><span class="plus"></span></a></li>
		<li id="nav-menu-item-728" class="menu-item menu-item-type-post_type menu-item-object-page "><a href="https://www.pucschools.org/lchs/resources/forms-downloads/" class=""><i class="menu_icon blank fa"></i><span>Forms & Downloads</span><span class="plus"></span></a></li>
		<li id="nav-menu-item-686" class="menu-item menu-item-type-custom menu-item-object-custom "><a href="https://connection.naviance.com/puclchs" class=""><i class="menu_icon blank fa"></i><span>Naviance</span><span class="plus"></span></a></li>
		<li id="nav-menu-item-687" class="menu-item menu-item-type-custom menu-item-object-custom "><a href="https://www.parchment.com/order/" class=""><i class="menu_icon blank fa"></i><span>Parchment (Transcripts)</span><span class="plus"></span></a></li>
		<li id="nav-menu-item-486" class="menu-item menu-item-type-custom menu-item-object-custom "><a target="_blank" href="https://powerschool.pucschools.org/public/" class=""><i class="menu_icon blank fa"></i><span>PowerSchool</span><span class="plus"></span></a></li>
	</ul>
</li>
	<li id="nav-menu-item-484" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children sub" style="height: 187px;"><a href="#" class=""><i class="menu_icon blank fa"></i><span>Parents</span><span class="plus"></span><i class="q_menu_arrow fa fa-angle-right"></i></a>
	<ul>
		<li id="nav-menu-item-487" class="menu-item menu-item-type-custom menu-item-object-custom "><a target="_blank" href="https://powerschool.pucschools.org/public/" class=""><i class="menu_icon blank fa"></i><span>PowerSchool</span><span class="plus"></span></a></li>
	</ul>
</li>
	<li id="nav-menu-item-485" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children sub" style="height: 187px;"><a href="#" class=""><i class="menu_icon blank fa"></i><span>Teachers</span><span class="plus"></span><i class="q_menu_arrow fa fa-angle-right"></i></a>
	<ul>
		<li id="nav-menu-item-488" class="menu-item menu-item-type-custom menu-item-object-custom "><a target="_blank" href="https://classroom.google.com/welcome" class=""><i class="menu_icon blank fa"></i><span>Google Classroom</span><span class="plus"></span></a></li>
		<li id="nav-menu-item-489" class="menu-item menu-item-type-custom menu-item-object-custom "><a target="_blank" href="https://powerschool.pucschools.org/teachers/" class=""><i class="menu_icon blank fa"></i><span>PowerSchool</span><span class="plus"></span></a></li>
		<li id="nav-menu-item-490" class="menu-item menu-item-type-custom menu-item-object-custom "><a target="_blank" href="https://intranet.pucschools.org" class=""><i class="menu_icon blank fa"></i><span>PUC Intranet</span><span class="plus"></span></a></li>
		<li id="nav-menu-item-491" class="menu-item menu-item-type-custom menu-item-object-custom "><a target="_blank" href="https://www.paycomonline.net/v4/ee/ee-login.php" class=""><i class="menu_icon blank fa"></i><span>Paycom</span><span class="plus"></span></a></li>
	</ul>
</li>
</ul></div>

    Simply correct the menu section here.

    @pfree5891,

    Did you correct the HTML markup for the menu bar that I mentioned in the code above?

    Let me know if you need any help.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Top Menu – Dropdown wraps around when there is still room’ is closed to new replies.