Comments on: Creating a Dropdown Menu with HTML & CSS

By: Fred

Fred — Thu, 26 Jul 2018 17:36:00 +0000

Hello all, first off, nice piece and nice explanation. But please I have been having problem getting my drop-down contents showing on hover, I’ve gone to hell and back without luck, it’s just permanently hidden under the movies menu and never comes out…. Please HELP!!!

By: Mark

Mark — Thu, 31 May 2018 13:03:14 +0000

Excellent. I have picked up a lot of stuff I have previously forgotten. Good work. I want to see how to make this responsive now with a hamburger menu and with the submenu included.

By: Derrick

Derrick — Sun, 15 Apr 2018 10:16:15 +0000

How do I start a CSS after html by coding dropmenu

By: NoobishUser

NoobishUser — Wed, 24 Jan 2018 23:18:27 +0000

Thank you!

Helped me out! Best wishes to you man!!!

Best

By: xmllllll

xmllllll — Tue, 16 Jan 2018 13:35:14 +0000

Hi,
I tied to put the navigation bar in the center but failed to do so. I have try to use padding 0 30% but when I resize my window the navigation won’t be in the center. tried to use text-align and margin 0 auto, all not working. appreciate anyone can help.

Thanks.

By: xmlllll

xmlllll — Tue, 16 Jan 2018 13:30:03 +0000

Hi I have difficulties to align the navigation bar centre. I tried several ways put padding-left, but when I resize the windows the navigation not centred anymore. I tried use margin: 0 auto; text-align all not working. appreciate anyone can help. thanks

By: Jason

Jason — Wed, 22 Nov 2017 22:14:13 +0000

Hello,
Thank you for taking the time to show us how to create this. I am an elementary school teacher who is trying to learn to code on my own. I am not happy with any of the websites out there that I have found to use for my classroom. I have decided to take it upon myself to learn to code and create a website that all teachers can use and love.

By: Janine Rawnsley

Janine Rawnsley — Wed, 01 Nov 2017 09:58:10 +0000

Thank you so much for this – great example with fab explanations. I’m a little stuck with my implementation though – I have to change .menu to a fixed position to get the dropdowns to overlap a sibling div beneath. This works but makes the dropdown panels fade in when you mouse over the panel itself rather than just the menu entry at the top. Any ideas for a quick win?

By: Karen

Karen — Sat, 28 Oct 2017 20:42:35 +0000

In reply to sanchi. Most browsers have Developer tools that you can use to view the source code on a web page. For example, Google Chrome's tools appear when you select Ctrl + Shift + i. When you see the tools window pop-up on the side of your screen, click on the "Sources" tab. This will bring up another window with a list of the resources used to create a web page. On this site and for this tutorial, the file is called "comment-page-3".

By: Karen

Karen — Sat, 28 Oct 2017 20:34:42 +0000

In reply to Simha.

a means active and # means id. So when you see a href=”#”, it means go to the item with the id. If you want it to actual go to an item’s id, you have to have given the item an id like id=”coolpage” first. Then you can use the a href=”coolpage” to actually go to the cool page, assuming that the id exists on the same html page. If you assign an actual web address to the href like a href=”http://somewebsite.com”, the item will become a link to another web page when clicked.

By: Karen

Karen — Sat, 28 Oct 2017 20:25:30 +0000

In reply to Victor.

For navigation links to work, you need to change the a href=”#” to a href=”http://www.google.com”, substituting the actual web address of your link for the google address. The “#” takes you to the existing page you are on, so it doesn’t go any where. If you want to link to an item on the same page, you can use its id as the href=”[value]”. So, suppose you have a div section on your page with the id of “partTwo”. You would type a href=”partTwo”.

By: Karen

Karen — Sat, 28 Oct 2017 20:19:45 +0000

In reply to Lavanya Kavarthapu. The html of this code needs to be corrected. HTML tags need starting and ending tags. For example or . The biggest issue I can see is missing tags. You have used multiple end tags without starting with any start tags. That is one reason the code does not work. Each item within an unordered list needs to be wrapped in the and tags in order to be rendered by the browser as list items. So, for a list of items in a class called foods, you would put: bacon apple cheese watermelon Another great resource for learning basic HTML and CSS coding is w3schools.com.