My dropdown menu, lifted a few years ago from a long-lost online resource, works fine on a full-sized screen. I keep it as a separate html file and then include that file on each page on the site, so I only have to modify one file when the site changes.
When the screen width is reduced, the menu drops to two lines. No problem with that, but when you hover over the top line, you can't access the menu items - as soon as you move the cursor down, you hover over a button from the second line and that menu then shows. You can see for yourself what I mean here.
I've tried several solutions from answers to similar questions, but with no success. If anyone has any pointers for workable solutions, I'd be extremely grateful. Thanks!
The page calls a CSS file, of which the relevant code is:
ul, ol {
margin: 1em 0;
padding: 0 0 0 40px;
list-style-type: none;
}
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
The relevant code from the dropdown menu file is:
<style>
ul a{display:block; color:#333; text-decoration:none; line-height:32px; width:110px; padding:0 15px; text-align:center }
ul li{ position:relative; float:left; margin:0; padding:0}
ul li a:link{
background: #000000;
color: #BAE7E7
}
ul li a:hover {
background-image: url(images/Tab_background.jpg);
background-repeat: repeat-x;
width: 110px;
}
ul ul{ display:none; position:absolute; top:100%; left:0; background:#fff; padding:0}
ul ul li{ float:none; width:110px}
ul ul a{ line-height:120%; padding:10px 15px}
ul ul ul{ top:0; left:100%}
ul{ list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
}
<!--ul li:hover > ul{
display: block;
background-color: #FFF;
background-image: url(file:///C|/Dreamweaver_websites/pictures/Tab_background.jpg);
color: #FFF;
}
The hilite code-->
body.home ul li a:link.home,
body.about ul li a:link.about,
body.services u l li a:link.services,
body.products ul li a:link.products,
body.contact ul li a:link.contact {
background-color: #000 ; }
a:link {
color: #80FFFF;
text-decoration: none;
}
a:visited {
color: #81BBF5;
text-decoration: none;
}
a:hover {
color: #3F9;
text-decoration: none;
}
a:active {
color: #0CC;
text-decoration: none;
}
</style>
</head>
<body link="#82BCFD" class="link">
<DIV>
<ul>
<li>Miramodus </li>
<li >Our Models
<ul>
<li>Range</li>
<li>Examples
<ul>
<li>Teaching molecular models</li>
<li>Inorganic structure models</li>
<li>Inorganic molecular models</li>
<li>Mineral structure models</li>
<li>Biological and Organic Molecular Models</li>
<li>Mathematical models</li>
<li>Crystallographic models</li>
<li>Protein molecular models</li>
</ul> </li>
<li>Colours</li>
<li>Colour selector
<li>Price estimator
</ul>
</li>
<li>Standard models
<ul>
<li>Alphabetic list</li>
<li>Search catalogue</li>
<li>Proteins</li>
</ul>
</li>
<li>Custom Builds
<ul>
<li>Extra features</li>
<li>3d Printed Models</li>
<li>Brass molecular models</li>
<li>Perspex molecular models</li>
</ul>
</li>
<li>Giant Models
<ul>
<li>Static models</li>
<li>Detachable models</li>
<li>Other large models</li>
</ul>
</li>
<li><a class="contact" href="Contact_form.shtml">Contact Us</a>
<ul>
<li>Contact form</li>
<li>About us</li>
<li>Contact information</li>
<li>Ordering
<ul>
<li>Order form</li>
<li>Pay online
<li>Terms
</ul>
</li>
</ul>
</li>
</li>
</ul>
</div>
</body>
</html>
Set z-index:1; to below UL as shown below also check updated code snippet:
ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0;
z-index:1;/*newly added*/
}
ul a {
display: block;
color: #333;
text-decoration: none;
line-height: 32px;
width: 110px;
padding: 0 15px;
text-align: center
}
ul li {
position: relative;
float: left;
margin: 0;
padding: 0
}
ul li a:link {
background: #000000;
color: #BAE7E7
}
ul li a:hover {
background-image: url(images/Tab_background.jpg);
background-repeat: repeat-x;
width: 110px;
}
ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0;
z-index:1;
}
ul ul li {
float: none;
width: 110px
}
ul ul a {
line-height: 120%;
padding: 10px 15px
}
ul ul ul {
top: 0;
left: 100%
}
ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
}
<!--ul li:hover>ul {
display: block;
background-color: #FFF;
background-image: url(file:///C|/Dreamweaver_websites/pictures/Tab_background.jpg);
color: #FFF;
}
The hilite code-->body.home ul li a:link.home,
body.about ul li a:link.about,
body.services u l li a:link.services,
body.products ul li a:link.products,
body.contact ul li a:link.contact {
background-color: #000;
}
a:link {
color: #80FFFF;
text-decoration: none;
}
a:visited {
color: #81BBF5;
text-decoration: none;
}
a:hover {
color: #3F9;
text-decoration: none;
}
a:active {
color: #0CC;
text-decoration: none;
}
</head>
<body link="#82BCFD" class="link">
<DIV>
<ul>
<li>Miramodus </li>
<li>Our Models
<ul>
<li>Range</li>
<li>Examples
<ul>
<li>Teaching molecular models</li>
<li>Inorganic structure models</li>
<li>Inorganic molecular models</li>
<li>Mineral structure models</li>
<li>Biological and Organic Molecular Models</li>
<li>Mathematical models</li>
<li>Crystallographic models</li>
<li>Protein molecular models</li>
</ul>
</li>
<li>Colours</li>
<li>Colour selector
<li>Price estimator
</ul>
</li>
<li>Standard models
<ul>
<li>Alphabetic list</li>
<li>Search catalogue</li>
<li>Proteins</li>
</ul>
</li>
<li>Custom Builds
<ul>
<li>Extra features</li>
<li>3d Printed Models</li>
<li>Brass molecular models</li>
<li>Perspex molecular models</li>
</ul>
</li>
<li>Giant Models
<ul>
<li>Static models</li>
<li>Detachable models</li>
<li>Other large models</li>
</ul>
</li>
<li><a class="contact" href="Contact_form.shtml">Contact Us</a>
<ul>
<li>Contact form</li>
<li>About us</li>
<li>Contact information</li>
<li>Ordering
<ul>
<li>Order form</li>
<li>Pay online
<li>Terms
</ul>
</li>
</ul>
</li>
</li>
</ul>
</div>
</body>
</html>
Related
I have learnt CSS online and I am new to web designing. Need some expert opinion here, I may have written something wrong or stupid. Please forgive that as I am a beginner.
Here are my CSS and HTML codes:
#menu {
float: left;
width: 1000px;
height: 30px;
background-color:#0066FF;
border-bottom: 1px solid #333;``
}
#menu ul {
float: left;
width: 1000px;
margin: 0;
padding: 7px 0 0 0;
list-style: none;
}
#menu ul li{
display:inline;
}
li ul {display: none;}
li:hover ul {display: block; position:relative;}
li:hover li a{background: #0066FF;}
#menu ul li a{
float: left;
padding: 0 20px;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #FFFFFF;
}
#menu li a:hover, #menu li .current{
color: #FFFF00;
}
#menu ul li:hover ul{
width: 150px;
white-space: nowrap
height: 10px;
text-align: center;
background:#0066FF;
}
<div id="menu">
<ul>
<li>Home</li>
<li>Quran
<ul>
<li>Translation</li>
<li>Tajweed</li>
<li>Tafseer</li>
<li>Qoutes</li>
</ul>
</li>
<li>Ahadees
<ul>
<li>Sahih Al-Bukhari</li>
<li>Sahih Muslim</li>
<li> Sunan Abu-Dawud</li>
<li>al-Tirmidhi</li>
<li>al-Nasa'i</li>
<li>Ibn Maja </li>
</ul></li>
<li>Wazaif
<ul>
<li>Allah's help</li>
<li>Rizzaq</li>
<li>Aulaad</li>
<li>Marriage</li>
</ul></li>
<li>Rights & Duties
<ul>
<li>As Parents</li>
<li>As Husband</li>
<li>As Wife</li>
<li>As Son</li>
<li>As Daughter</li>
</ul></li>
<li>Videos
<ul>
<li>Molana Tariq Jameel</li>
<li>Dr Zakir Naik</li>
<li>Dr Farhat Hashmi</li>
<li>Naat videos</li>
</ul></li>
<li>Quran & Science</li>
<li>Library
<ul>
<li>Masnoon Duain</li>
<li>Tib-e-Nabvi</li>
<li>Tafseer</li>
<li>Islamic comerace</li>
</ul></li>
<li>FAQs</li>
<li>Blogs</li>
<li>Contacts</li>
</ul>
</div>
It looks like the problem is that you haven't positioned the sub-menus properly.
Because the sub-menu have not been given position:absolute they remain in the documents flow and so disturb other elements when shown.
Adding position:absolute removes them from the flow and solves the problem.
In order to be positioned according to the parent li, that li needs to be a block (hence display:inline-block)(you could float the li too if that's your choice) and be given position:relative.
Here's a suggestion that should help you along the way.
#menu ul li {
display:inline-block;
position: relative;
}
li ul {
display: none;
position: absolute;
top:100%;
left:0;
}
li:hover ul {
display: block;
}
JSfiddle Demo
#menu {
float: left;
width: 1000px;
height: 30px;
background-color: #0066FF;
border-bottom: 1px solid #333;
``
}
#menu ul {
float: left;
width: 1000px;
margin: 0;
padding: 7px 0 0 0;
list-style: none;
}
#menu ul li {
display: inline-block;
position: relative;
}
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}
li:hover ul {
display: block;
}
li:hover li a {
background: #0066FF;
}
#menu ul li a {
float: left;
padding: 0 20px;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #FFFFFF;
}
#menu li a:hover,
#menu li .current {
color: #FFFF00;
}
#menu ul li:hover ul {
width: 150px;
white-space: nowrap height: 10px;
text-align: center;
background: #0066FF;
}
<div id="menu">
<ul>
<li>Home
</li>
<li>Quran
<ul>
<li>Translation
</li>
<li>Tajweed
</li>
<li>Tafseer
</li>
<li>Qoutes
</li>
</ul>
</li>
<li>Ahadees
<ul>
<li>Sahih Al-Bukhari
</li>
<li>Sahih Muslim
</li>
<li> Sunan Abu-Dawud
</li>
<li>al-Tirmidhi
</li>
<li>al-Nasa'i
</li>
<li>Ibn Maja
</li>
</ul>
</li>
<li>Wazaif
<ul>
<li>Allah's help
</li>
<li>Rizzaq
</li>
<li>Aulaad
</li>
<li>Marriage
</li>
</ul>
</li>
<li>Rights & Duties
<ul>
<li>As Parents
</li>
<li>As Husband
</li>
<li>As Wife
</li>
<li>As Son
</li>
<li>As Daughter
</li>
</ul>
</li>
<li>Videos
<ul>
<li>Molana Tariq Jameel
</li>
<li>Dr Zakir Naik
</li>
<li>Dr Farhat Hashmi
</li>
<li>Naat videos
</li>
</ul>
</li>
<li>Quran & Science
</li>
<li>Library
<ul>
<li>Masnoon Duain
</li>
<li>Tib-e-Nabvi
</li>
<li>Tafseer
</li>
<li>Islamic comerace
</li>
</ul>
</li>
<li>FAQs
</li>
<li>Blogs
</li>
<li>Contacts
</li>
</ul>
</div>
Fiddle Link
I just want to make a mega drop down menu for my website . the above link is what I've done for now . what i just want is make all main titles inline . but it just stay like block . how can i make the header "Loans", ""Leasing (Automotive)" in one line and other lists under them ?
Demo
css
body {
font: 300 86% helvetica, arial, sans-serif;
color: #000;
background: #fff;
margin: 0;
padding: 0;
}
#wrapper {
width: 980px;
min-height: 600px;
margin: 0 auto;
}
nav {
display: block;
position: relative;
width: 980px;
height: 50px;
margin: 0 auto;
background: #8dc63f;
}
nav ul#menu {
display: block;
margin: 0;
padding: 0;
list-style: 0;
}
nav ul#menu li {
position: relative;
display: inline-block;
}
nav ul#menu li a {
display: block;
height: 50px;
font-size: 1em;
line-height: 50px;
color: #fff;
text-decoration: none;
padding: 0 15px;
}
nav ul#menu li a:hover, nav ul#menu li:hover > a {
background: #333;
}
nav ul#menu li:hover > #mega {
display: block;
}
#mega {
position: absolute;
top: 100%;
left: 0;
width: 920px;
height: auto;
padding: 20px 30px;
background: #333;
display: none;
}
ul#menu ul {
float: left;
width: 23%;
margin: 0 2% 15px 0;
padding: 0;
list-style: none;
}
ul#menu ul li {
display: block;
}
ul#menu ul li a {
float: left;
display: block;
width: 100%;
height: auto;
line-height: 1.3em;
color: #888;
text-decoration: none;
padding: 6px 0;
}
ul#menu ul li:first-child a {
font-size: 1.2em;
color: #8dc63f;
}
ul#menu ul li a:hover {
color: #fff;
background: none;
}
ul#menu ul li:first-child a:hover {
color: #fff;
}
/* clearfix */
nav ul:after {
content:".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
nav ul {
display: inline-block;
}
html[xmlns] nav ul {
display: block;
}
* html nav ul {
height: 1%;
}
#content {
padding: 30px 0;
}
html
<!-- begin wrapper -->
<div id="wrapper">
<!-- begin nav -->
<nav>
<ul id="menu">
<li>Products & Services
<div id="mega">
<ul>
<li>Loans
</li>
<li>Mortgage Loans
</li>
<li>SME Loans
</li>
<li>Revolving Loans
</li>
<li>Professional Loans
</li>
<li>Personal Loans
</li>
<li>Micro Loans
</li>
<li>Commercial Credit
</li>
</ul>
<ul>
<li>Leasing (Automotive)
</li>
<li>Three Wheeler Leasing
</li>
<li>Motorcyvle Leasing
</li>
<li>Motorcar Leasing
</li>
<li>Mini trucks Leasing
</li>
</ul>
<ul>
<li>Leasing (Automotive)
</li>
<li>Three Wheeler Leasing
</li>
<li>Motorcyvle Leasing
</li>
<li>Motorcar Leasing
</li>
<li>Mini trucks Leasing
</li>
</ul>
<ul>
<li>Leasing (Automotive)
</li>
<li>Three Wheeler Leasing
</li>
<li>Motorcyvle Leasing
</li>
<li>Motorcar Leasing
</li>
<li>Mini trucks Leasing
</li>
</ul>
<ul>
<li>Loans
</li>
<li>Mortgage Loans
</li>
<li>SME Loans
</li>
<li>Revolving Loans
</li>
<li>Professional Loans
</li>
<li>Personal Loans
</li>
<li>Micro Loans
</li>
<li>Commercial Credit
</li>
</ul>
<ul>
<li>Leasing (Automotive)
</li>
<li>Three Wheeler Leasing
</li>
<li>Motorcyvle Leasing
</li>
<li>Motorcar Leasing
</li>
<li>Mini trucks Leasing
</li>
</ul>
<ul>
<li>Leasing (Automotive)
</li>
<li>Three Wheeler Leasing
</li>
<li>Motorcyvle Leasing
</li>
<li>Motorcar Leasing
</li>
<li>Mini trucks Leasing
</li>
</ul>
</div>
</li>
<li>Locations
</li>
<li>Our Team
</li>
<li>Testimonials
</li>
<li>FAQ
</li>
<li>News & Events
</li>
<li>Contact
</li>
</ul>
</nav>
<!-- /nav -->
<div id="content">
<p>Page content...</p>
</div>
</div>
<!-- /wrapper -->
Put the 2nd tier ul's inside the li for the header. Then just add this to your stylesheet:
nav .dropdown-list > li {
float:left;
}
View fiddle: http://jsfiddle.net/7WXZL/1/
In html
<ul id="main_menu">
<li class="main_list">Electronics
<ul>
<p class="category_header">Buy Any Electronics Item And Get Flat 50% OFF</p>
<ol>
<li>Mobiles</li>
<li>Item1</li>
<li>Item2</li>
</ol>
</ul>
</li>
<li class="main_list">Food&Snacks
<ul>
<p class="category_header">Buy Any Food&Snacks Item And Get Upto 40% OFF</p>
<ol>
<li>Pulses</li>
<li>Item1</li>
<li>Item2</li>
</ol>
</ul>
</li>
write more if you want
in css
body
{
text-align:center;
font-family:helvetica;
background-color:#424242;
}
h1
{
margin:0px;
margin-top:40px;
color:#8181F7;
font-size:45px;
}
#main_menu
{
background-color:#1C1C1C;
float:left;
padding:0px;
width:700px;
height:50px;
line-height:50px;
margin-left:140px;
border-radius:5px;
}
#main_menu .main_list
{
color:white;
list-style-type:none;
float:left;
border-left:1px solid #666;
padding-left:27px;
padding-right:27px;
}
#main_menu .main_list:hover
{
color:#2E9AFE;
}
.main_list ul
{
background-color:white;
width:600px;
position:absolute;
left:150px;
width:700px;
padding:0px;
float:left;
padding-bottom:10px;
}
.main_list ul p
{
color:white;
background-color:#2E9AFE;
margin:0px;
text-align:left;
padding-left:10px;
font-size:20px;
font-weight:bold;
}
.main_list ul ol
{
float:left;
padding:0px;
list-style-type:none;
margin-left:30px;
}
.main_list ul ol li
{
line-height:25px;
font-weight:bold;
font-size:16px;
color:#2E9AFE;
}
.main_list ul ol li:first-of-type
{
list-style: none;
font-size:19px;
margin-top:10px;
color:#084B8A;
}
.main_list:hover ul
{
display:block;
}
.main_list ul
{
display:none;
}
this is the main code from http://talkerscode.com/webtricks/mega-dropdown-menu-like-ecommerce-using-css.php to create css mega drop down menu
I've been able to create a horizontal menu using (display:inline) and I now have a drop menu thanks to sousMenu. My problem is that all the submenus, regardless of element I hovered over, appear in the same place. How do I work around this?
My menu code thus far:
<ul>
<li>Home</li>
<li class="sousMenu">About Us
<ul>
<li>Board of Directors</li>
</br>
<li>Student Profiles</li>
</br>
<li>Projects</li>
</ul>
</li>
<li class="sousMenu">Get Involved
<ul>
<li>Donations</li>
</br>
<li>Job Board</li>
</br>
<li>Join</li>
</ul>
</li>
<li class="sousMenu">Resources
<ul>
<li>Connections</li>
</br>
<li>Gallery</li>
</br>
<li>Tours</li>
</ul>
</li>
CSS:
#navcontainer ul {
/*margin: 0;*/
margin-left: auto;
margin-right: auto;
padding: 0;
top:180;
right:20;
width:800px;
list-style-type: none;
text-align: center;
position: absolute;
color: #fff;
background-color: #003300;
padding: .2em 1em;
}
#navcontainer ul li {
display: inline;
padding-left:2cm;
}
#navcontainer ul li a {
text-decoration: none;
color: #fff;
background-color: #030;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #000;
}
.sousMenu:hover ul {
display: block;
}
.sousMenu ul {
text-align: center;
display: none;
list-style-type: none;
}
Try setting the parent list item to position: relative and the child ul to position: absolute for starters. I made some other slight modifications to your code to achieve the desired effect.
Here's the CSS:
* {
margin: 0;
padding: 0;
vertical-align: baseline;
}
li {
list-style-type: none;
}
ul.main li {
position: relative;
display: inline-block;
}
.main li:hover > ul {
display: block;
}
ul.sub {
position: absolute;
display: none;
top: 100%;
left: 0;
}
ul.sub li {
display: block;
}
I also cleaned up the HTML a bit. You were missing a closing </ul> tag as well:
<ul class="main">
<li>Home</li>
<li class="sousMenu">About Us
<ul class="sub about">
<li>Board of Directors</li>
<li>Student Profiles</li>
<li>Projects</li>
</ul>
</li>
<li class="sousMenu">Get Involved
<ul class="sub get-involved">
<li>Donations</li>
<li>Job Board</li>
<li>Join</li>
</ul>
</li>
<li class="sousMenu">Resources
<ul class="sub resources">
<li>Connections</li>
<li>Gallery</li>
<li>Tours</li>
</ul>
</li>
</ul>
Here's the fiddle: http://jsfiddle.net/vXhZb/2/
Check out the JSFiddel Here
I have a CSS Based dropdown menu that drops down on hover but all lists displayed on hover are in the same location, not under the menu item they are associated with. I believe the problem lies with this part of the code...
#menu ul li {
}
but even when I edit this and take away the float I can't seem to figure it out. Maybe someone can point out the mistake I've made. Thanks in advance for the help.
CSS
#menu ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu ul li {
display: block;
position: relative;
float: left;
}
#menu li ul {
display: none;
}
#menu ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
#menu ul li a:hover {
background: #3b3b3b;
}
#menu li:hover ul {
display: block;
position: absolute;
}
#menu li:hover li {
float: none;
font-size: 11px;
}
#menu li:hover a { background: #3b3b3b; }
#menu li:hover li a:hover {
background: #1e7c9a;
}
HTML
<ul id="menu">
<li>Find Us
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Logo Design</li>
<li>Blog Design</li>
</ul>
</li>
<li>Our Menu
<ul>
<li>This is a project</li>
<li>So is this</li>
<li>and this</li>
<li>don't forget this too</li>
</ul>
</li>
<li>Our Story
<ul>
<li>Support</li>
<li>Quote</li>
<li>General Enquiry</li>
</ul>
</li>
</ul>
http://jsfiddle.net/UfpCm/1/
Use inline-block on #menu li.
I have recently added a drop down menu to my website... well, in the works of adding a drop down menu to my website. I have the list displayed horizontally but the drop down portions of the list are not.. dropping down. I was wondering if someone would be able to take a look and tell me what I am doing wrong?
Thanks, here is my code.
HTML
<ul id="main-nav">
<li>Home</li>
<li>Products</li>
<ul>
<li>Apparel</li>
<li>Gloves</li>
<li>Punching Bags</li>
<li>Protection</li>
<li>Accessories</li>
</ul>
<li>Wholesales</li>
<ul>
<li>Equipment Catalogue</li>
<li>Wholesale Inqueries</li>
</ul>
<li>Contact</li>
<ul>
<li>Direct Contact</li>
<li>YouTube Channel</li>
<li>LinkedIn Page</li>
<li>Facebook Page</li>
</ul>
</ul>
CSS
#main-nav,
#main-nav ul {
list-style: none;
}
#main-nav {
float: left;
}
#main-nav > li {
float: left;
}
#main-nav li a {
display: block;
height: 25px;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#main-nav ul {
position: absolute;
display: none;
z-index: 999;
}
#main-nav ul li a {
width: 80px;
}
#main-nav li:hover ul {
display: block;
}
/* Main menu
------------------------------------------*/
#main-nav {
font-family: Arial;
font-size: 12px;
background: #880202;
}
#main-nav > li > a {
color: #fffff;
font-weight: bold;
}
#main-nav > li:hover > a {
background: #c90000;
color: #ffffff;
}
/* Submenu
------------------------------------------*/
#main-nav ul {
background: #880202;
}
#main-nav ul li a {
color: #ffffff;
}
#main-nav ul li:hover a {
background: #c90000;
}
put this code in you code and check
<ul id="main-nav">
<li>Home</li>
<li>Products
<ul>
<li>Apparel</li>
<li>Gloves</li>
<li>Punching Bags</li>
<li>Protection</li>
<li>Accessories</li>
</ul></li>
<li>Wholesales
<ul>
<li>Equipment Catalogue</li>
<li>Wholesale Inqueries</li>
</ul></li>
<li>Contact
<ul>
<li>Direct Contact</li>
<li>YouTube Channel</li>
<li>LinkedIn Page</li>
<li>Facebook Page</li>
</ul></li>
</ul>
li tag is over after the sub menu ul tag