Create a Transparent Dropdown Navigation with CSS & HTML

hey guys what's going on it's clever tikki 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 unordered list list items so these are going to be the main items that is going to apply it is going to apply the style to all the list items off this UL tag so under here we first of all we want to make sure that our text flows to the left so that's going to align all the texts to the left which this forward view it in a browser now all the text is aligned to the left and let's specify all the other elements to format this ok let's see what it looks like now okay just so we can see what's going on so far let's go ahead and set the color to white ok so you can see how our menus style right now so these are all of our main menu items at the top like home about things to do contact news and all the other sub menus are underneath so that's that's what we do here float left we set the width to 200 set the height of 440 pixels and set the background to black now let's set the opacity 2.8 and this is what's going to make our menu navigation menu transparent so you can see what i did there it made a transparent ok so whatever we want to deal let's set some other elements ok so let's go ahead and set the line height 240 to Center the text vertically and we're also going to Center the text horizontally by by specifying aligned text-align centers and let's set the font size to a little bit bigger ok so now that we have our main menu style let's go ahead and apply some of styles on the on the actual menu link so the menu link is going to be ull i ate right away want to set thanks decorations to non because we don't want to have any kind of underlying or anything like that on our main menu links that the color to white and display it as block ok so the next element is going to be r UL li a hover and this one is going to be where when the user hovering the mouse over our menu so we want to set the color to green ok let's see what happens so this is what we have so far we have all of our elements and when we heard the mouse over its covering the whole block and all the elements are transparent so now we would want to do is we want to hide the submenus and we all it we only want to display them when we hover the mouse over the main menu and in order to do that we're going to apply the following yeah we're just going to apply display non to that element so we're going to say UL li UL li and display non and the reason we're doing this UL li UL li is because those submenu elements are inside UL li UL li so this is how the css3 structure works and in order to get to it this is what we have to type yes that UL li UL li and in HTML UL li UL li and that's how you get to it ok so we said display non and now they're going to be hidden so now they're hidden and now all we have to do is make sure that was showing them when the mouse is over and again we're going to use UL li and then say hover uli display block so here's what we're doing is we're applying the harbor to the list which is previous to that which is the main menu and we we are targeting the harbor which is the mouse-over element and then we saying we want to display the list as is within the main list and say display equals block so that's exactly what's going to happen and now we have our transparent navigation menu and everything is working if you guys want to apply some margin here you can easily do so you can just say large in the right those two pixels and then it's going to break the is going to break down the menu in these little block elements if you prefer your money to look like that ok that's how we create our transparent job down navigation menu with CSS and HTML if you guys like this video please like share and subscribe and I'll see you next time by taking out