How to Create Transparent Drop Down Navigation Menu with CSS and HTML

Learn how to create transparent drop down navigation menu with CSS and HTML.

https://clevertechie.com/files/nature.jpg

“““““““““““““““““““““““““““““““““““““““““““““““

( Website ) https://clevertechie.com – PHP, JavaScript, WordPress, CSS, and HTML tutorials in video and text format with cool looking graphics and diagrams.

( YouTube Channel ) https://www.youtube.com/c/CleverTechieTube

( Google Plus ) https://goo.gl/J71p6f – clever techie video tutorials.

( Facebook ) https://www.facebook.com/CleverTechie/

( Twitter ) https://twitter.com/theclevertechie

“““““““““““““““““““““““““““““““““““““““““““““““
Video Transcript:
hey guys what’s going on it’s clever techie and in this video we’re going to learn how to create a transparent navigation menu with CSS and HTML that’s gonna look like this go ahead and get started right away so i created a new folder and inside this folder have this nature that jpg file that you just thought you can use any background you want otherwise you can download this file in the description of this video I’m going to create two new files here index dot HTML as well as style dot CSS and i’m good i’m going to open the files in the text editor of my choice which is netbeans ok so now we’re ready to create our navigation menu so for the HTML i’m going to use the HTML opening closing tags right away and then i’m going to include the stylesheet right away as well using a link tag with a trap attribute and i’m going to provide the path where his style is located i’m going to say a rail which is another attribute and i’m going to say stylesheet because we’re including the stylesheet ok so this navigation bar is going to consist of a bunch of you LOL and Li tags which has which means unordered list and list items so here’s what we’re going to be creating out let’s create the first unordered list and this another list is going to be our main menu so when I have stuff like home about thanks to do contact and let sexually add another one here called news so this is going to be our main menu let’s see what this looks like right now by open it inside the browser so you can see that this is just a unordered list pure and impure HTML right now so there’s not no menu at this point and we’re going to add the style we’re going to add the old style inside our style.css but for but first let’s go ahead and add all the submenu items as well so home is not going to have any sub menu items because it’s just a home link but the about list item is going to have other sub menus so inside this Li tags we want to add another want to add another unordered list so let’s go ahead and do that now and we just okay so for this another list want to have stuff like our team campsites condition and vision so you just put whatever you want for these doesn’t really matter i just want to show you guys that this is inside this Li about tagged by doing these tabs here ok so you can see that these this Ally we’re still inside the a lie about so that you always put it inside of this Li list item because it’s going to have all the sub elements and if I view this in a browser Oh save it first five you this in the browser you can see how these list items are in fact under news about so those are going to be our sub menu items ok so let’s do the same thing for things to do make sure you’re inside the lis tag i’m just going to copy all of these here and then i’m going to replace those with some other many’s many texts activities parks shops fix that one right there shops and events and let’s go ahead and add more to contact make sure inside the list item copy some of those tags already created and i’m just going to have to for for the can contact so map and directions ok let’s see what it looks like so far and as you can see this is our complete navigation bar with submenus without all the styling so all the HTML content is ready now we’re going to write all the CSS for it ok so this is our HTML code let’s start working on CSS ok so let’s apply the background image first because it’s just gonna look at make it look pretty right away i’m using nature that jpg whatever no-repeat on it and for the background sighs i’m going to put cover which is going to adjust it to the image screen and it’s going to cover the whole going to cover the whole background of our web browser and for a font family right away i want to say finally aerial let’s see what it looks like okay you can see that it added the background image and change the font the font family or font whatever font and just change the fund okay next up let’s make sure our unordered list doesn’t have any margins or padding by setting in 20 and also put the list style to non because we don’t want to have any kind of bullets on there are listening so you can see that it removes all those bullets and remove the tag and everything else ok let’s go back here ok so the

source