To extend the standard menu would this be correct?

<li><a href="../products.php">Products</a></li>
<li><a href="../categories.php">Departments</a></li>
<ul>
<li><a href="../categories1.php">Departments1</a></li>
<li><a href="../categories2.php">Departments2</a></li>
</ul>
<li><a href="../tracking.php">Tracking</a></li>
<li><a href="../orderstatus.php">Order status</a></li>
Many thanks for your help.
John

This page should help
It depends on what you are trying to do with the menu...

https://www.w3schools.com/tags/tag_ul.asp

David

Normally, for a sub-menu under a heading, it would be laid out like this.

<li><a href="../products.php">Products</a></li>
<li><a href="../categories.php">Departments</a>
<ul>
<li><a href="../categories1.php">Departments1</a></li>
<li><a href="../categories2.php">Departments2</a></li>
</ul>
</li>
<li><a href="../tracking.php">Tracking</a></li>
<li><a href="../orderstatus.php">Order status</a></li>

And unless the sub-menu displays on hover, a link for Departments would prevent the sub-menu from displaying when clicked. You would use <a href="#">Departments</a>

Marshall
CENLYT Productions - ms designs
Affordable Web Design
Custom Ecommerce Designs
Responsive Websites
Cenlyt.com

Thank you very much for your help.

I find it best to have a good starting point, saves so much time!

Regards

John

I ran into a problem with this test menu.

I placed the menu below and when I run the menu the top link moved upward with the sub menu below as per image[img]https://net100.co.uk/menu-test.JPG[/img]
Can you see what needs correcting please?

Thank you

John
<div class="relative">
<div class="navTab"><img src="../images/nav_btn.png" alt=""/></div>
<div class="navLink">
<ul>
<li><a href="../index.php"><i class="w3-margin-right fa fa-home"></i>Home</a></li>
<li><a href="../clothing.php">Clothing</a>
<ul>
<li><a href="../markcain.php">Mark Cain</a></li>
</ul>
</li>
<li><a href="../about.php">About us</a></li>
<li><a href="../products.php">Products</a></li>
<li><a href="../categories.php">Departments</a></li>
<li><a href="../tracking.php">Tracking</a></li>
<li><a href="../orderstatus.php">Order status</a></li>
<li><a href="../clientlogin.php">Account</a></li>
<li><a href="../cart.php">Shopping cart</a></li>
</ul>
</div>
</div>

There's a missing line closing tag </li> - add the closing tag as highlighted below

<ul>
<li><a href="../index.php"><i class="w3-margin-right fa fa-home"></i>Home</a></li>
<li><a href="../clothing.php">Clothing</a></li>
<ul>
<li><a href="../markcain.php">Mark Cain</a></li>
</ul>

I would also add some spacing between the word Home and the font awesome icon as in blue below but leaving no gaps between the none breaking space code. Personally I just go for a font awesome icon for the home rather than text

<li><a href="../index.php"><i class="w3-margin-right fa fa-home"></i>& n b s p; & n b s p;Home</a></li>



Steve
Egerton Village, Bolton, UK

Hi David,
I think I understand what going on but I am still getting much the same result.
I cleared cookies in Firefox but still cannot see where I am going wrong.
I am attaching the amended code, perhaps you can see my error(s).

<!-- menu start -->
<div class="relative">
<div class="navTab"><img src="../images/nav_btn.png" alt=""/></div>
<div class="navLink">
<ul>
<li><a href="../index.php"><i class="w3-margin-right fa fa-home"></i>  Home</a></li>
<li><a href="../clothing.php">Clothing</a></li>
<ul>
<li><a href="../markcain.php">Mark Cain</a></li>
</ul>
<li><a href="../about.php">About us</a></li>
<li><a href="../products.php">Products</a></li>
<li><a href="../categories.php">Departments</a></li>
<li><a href="../tracking.php">Tracking</a></li>
<li><a href="../orderstatus.php">Order status</a></li>
<li><a href="../clientlogin.php">Account</a></li>
<li><a href="../cart.php">Shopping cart</a></li>
</ul>
</div>
</div>

<!-- menu end -->

You have a closing </ul> tag without a matching opening <ul> tag...

<!-- menu start -->
<div class="relative">
<div class="navTab"><img src="../images/nav_btn.png" alt=""/></div>
<div class="navLink">
<ul>
<li><a href="../index.php"><i class="w3-margin-right fa fa-home"></i> Home</a></li>
<li><a href="../clothing.php">Clothing</a></li>
<ul>
<li><a href="../markcain.php">Mark Cain</a></li>
</ul>missing opening ul tag would go here
<li><a href="../about.php">About us</a></li>
<li><a href="../products.php">Products</a></li>
<li><a href="../categories.php">Departments</a></li>
<li><a href="../tracking.php">Tracking</a></li>
<li><a href="../orderstatus.php">Order status</a></li>
<li><a href="../clientlogin.php">Account</a></li>
<li><a href="../cart.php">Shopping cart</a></li>
</ul>
</div>
</div>

Re
missing opening ul tag would go here.
Sorry to be so thick David, but how would this
<li><a href="../markcain.php">Mark Cain</a></li>
</ul>[red]missing opening ul tag would go here[/red]
<li><a href="../about.php">About us</a></li>
<li><a href="../products.php">Products</a></li>
<li><a href="../categories.php">Departments</a></li>
<li><a href="../tracking.php">Tracking</a></li>
<li><a href="../orderstatus.php">Order status</a></li>
<li><a href="../clientlogin.php">Account</a></li>
<li><a href="../cart.php">Shopping cart</a></li>
[red]</ul>[/red]

be amended?
Thanks
John

It would probably benefit you to go to the link I posted in my first response and learn about the list tags

https://www.w3schools.com/tags/tag_ul.asp

It really depends on if you intended to break the list up or not...

For every open tag, there must be a closing tag...
This is basic html 101
Open <ul> close </ul>
In between you have list tags open <li> close </li>
Notice the slash / is the syntax for the closing html tag.
The same for <div></div> and others tags in your html markup.

I was off in my last response, it's actually valid markup because you can have a list inside another list..

Looking at your markup below again,



I actually see there that you have a nested list inside a list. So while the markup actually is valid, maybe you don't want a nested list...

you have the following
and maybe you want that link in line with the rest and if so, you should just have



David

Thanks David for your help
I do need a normal drop down menu arrangement

As you can see in this image the dropdown seems to push the top row item up rather than the dropdown items being place in a downwards position.
[img]https://net100.co.uk/menu-test2.jpg[/img]

Out of interest I placed another drop down item in the list so now have Marc Cain1 and 2.
Marc Cain1 and 2 should show under Clothing
<div class="relative">
<div class="navTab"><img src="../images/nav_btn.png" alt=""/></div>
<div class="navLink">
<ul>
<li><a href="../index.php"><i class="w3-margin-right fa fa-home"></i>  Home</a></li>
<li><a href="../clothing.php">Clothing</a>
<ul>
<li><a href="../markcain.php">Mark Cain1</a></li>
<li><a href="../markcain2.php">Mark Cain2</a></li>
</ul>
</li>
<li><a href="../about.php">About us</a></li>
<li><a href="../products.php">Products</a></li>
<li><a href="../categories.php">Departments</a></li>
<li><a href="../tracking.php">Tracking</a></li>
<li><a href="../orderstatus.php">Order status</a></li>
<li><a href="../clientlogin.php">Account</a></li>
<li><a href="../cart.php">Shopping cart</a></li>
</ul>
</div>
</div>

Regards
John

Just one point
The script I sent had the ul section indented but I see that it is not indented after being sent.
(as it was)
[img]https://net100.co.uk/menu-test3.JPG[/img]

Being that looks like just a row of links and not some fancy drop down menu, it's just doing exactly what you asked.
Maybe you need to change to a mega menu.

David

Hi David,
Many thanks for the clarifications.

John

Hello David,
Is there a mega Menu for the DW version of ECT?

Regards
John

Code for a Mega Menu is included as standard now in the ectcart.js file. There is an example of how to use it here...

https://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=113729

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Thanks Vince,
Regards I did not get very far but here's the code taht may show where I am wrong.
John

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
ect_megamenu('#FFF');
</script>
<link href="css/ectstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="ectmegamenu">
<ul>
<!-- 2 links, no drop downs -->
<li><a href="default.asp">Home</a></li>
<li><a href="about.asp">About</a></li>
<!-- first mega menu display - 4 columns -->
<li><a href="products.asp">Products</a>
<ul>
<li><a href="products.asp"><i class="w3-margin-right fa fa-chevron-circle-right"></i> Layout #1</a>
<ul>
<li><a href="proddetail.asp?prod=testproduct">Blue jeans boot cut</a></li>
<li><a href="proddetail.asp?prod=testproduct">Blue jeans relaxed</a></li>
</ul>
</li>
<li><a href="products2.asp"><i class="w3-margin-right fa fa-chevron-circle-right"></i> Layout #2</a>
<ul>
<li><a href="proddetail2.asp?prod=testproduct">Black sneakers</a></li>
<li><a href="proddetail2.asp?prod=testproduct">Blue sneakers</a></li>
</ul>
</li>
</ul>
</li>
<!-- second mega menu display - 4 columns -->
<li><a href="categories.asp">Categories</a>
<ul>
<li><a href="products.asp"><i class="w3-margin-right fa fa-chevron-circle-right"></i> Blue Jeans</a>
<ul>
<li><a href="proddetail.asp?prod=testproduct">Blue jeans boot cut</a></li>
<li><a href="proddetail.asp?prod=testproduct">Blue jeans relaxed</a></li>
</ul>
</li>
<li><a href="products.asp"><i class="w3-margin-right fa fa-chevron-circle-right"></i> Cools Sneakers</a>
<ul>
<li><a href="proddetail.asp?prod=testproduct">Black sneakers</a></li>
<li><a href="proddetail.asp?prod=testproduct">Blue sneakers</a></li>
</ul>
</li>
<li><a href="products.asp"><i class="w3-margin-right fa fa-chevron-circle-right"></i> Drill Bits</a>
<ul>
<li><a href="proddetail.asp?prod=testproduct">Drill bit arrow</a></li>
<li><a href="proddetail.asp?prod=testproduct">Drill bit pointy</a></li>
</ul>
</li>
<li><a href="categories.asp"><i class="w3-margin-right fa fa-chevron-circle-right"></i> All categories</a>
<ul>
<li><a href="products.asp">Blue jeans</a></li>
<li><a href="products.asp">Cool sneakers</a></li>
<li><a href="products.asp">Drill bits</a></li>
</ul>
</li>
</ul>
</li>
<!-- third mega menu display - 1 column -->
<li><a href="#">Services</a>
<ul>
<li>
<ul>
<li><a href="clientlogin.asp">Your Account</a></li>
<li><a href="orderstatus.asp">Order Status</a></li>
<li><a href="tracking.asp">Order tracking</a></li>
<li><a href="giftcertificate.asp">Gift Certificates</a></li>
<li><a href="affiliate.asp">Affiliates</a></li>
</ul>
</li>
</ul>
</li>
<!-- single link display -->
<li><a href="cart.asp">View Cart</a></li>
</ul>
</div>

</body>
</html>

Hi John
You don't seem to have the ectcart.js script included and that is necessary for the mega menu. But if you still have problems, can you give us a link to a test page rather than posting code as it's easier to debug that way.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Thanks Vince
I have placed this file at
http://fb-design.co.uk/megatest.php

John

Hi John
And this doesn't seem to have either the ectcart.css or the ectcart.js files. There are more details here...
https://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=107040

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Thanks Vince
I am not sure if I am seeing the right result or not but this is what I get.
https://fb-design.co.uk/megtest.php

Here I can see 2 js/ecart.js examples I wonder if this is a mistake?

[img]https://fb-design.co.uk/js layout.JPG[/img]