style body min height 200pt dropbtn background color 4CAF50 color white padding 16px font size 16px border none cursor pointer dropdown position relative display inline block dropdown content position absolute left 0 display none background color f9f9f9 box shadow 0px 8px 16px 0px rgba 0 0 0 0 2 dropdown content a color black padding 12px 16px text decoration none display block white space nowrap dropdown content a hover background color f1f1f1 dropdown hover dropdown content display inline block dropdown hover dropbtn background color 3e8e41 style div class dropdown style float left button class dropbtn Left button div class dropdown content style left 0 a href Cats like Mice a a href Link 2 a a href Link 3 a div div style body min height 200pt dropbtn background color 4CAF50 color white padding 16px font size 16px border none cursor pointer dropdown position relative display inline block width 100 dropdown content display none position absolute background color f9f9f9 min width 160px box shadow 0px 8px 16px 0px rgba 0 0 0 0 2 z index 1 top 100 dropdown content a color black padding 12px 16px text decoration none display block dropdown content a hover background color f1f1f1 dropdown hover dropdown content display inline block dropdown hover dropbtn background color 3e8e41 style div class dropdown style float left button class dropbtn Left button div class dropdown content style left 0 a href Once upon a time a a href Link 2 a a href Link 3 a div div link href netdna bootstrapcdn com font awesome 4 0 0 css font awesome css rel stylesheet style body min height 300pt nav position absolute left 100px top 50px width 300px display block background color 64abfb border bottom 5px solid 2980b9 nav ul padding 0 margin 0 list style none position relative nav ul After content display block clear both nav ul li display list item list style none float left background color 64abfb nav ul li i font size 10px width 20px nav ul li a padding 5px 5px display block padding 15px 30px color FFF font size 20px text decoration none font family Bree Serif serif text align center style style drop down functionality The Dropdown Styles Hide Dropdowns by Default nav ul ul display none position absolute top 100 Display Dropdowns on Hover nav ul li hover ul display list item Fisrt Tier Dropdown nav ul ul li width 30px float none position relative border bottom none nav ul ul li i margin right 10px nav ul ul li a padding 15px 20px text align left padding 5px 5px Second Third and more Tiers nav ul ul ul li position absolute relative top 30px left 100 if you want extra arrow to indicate nested children nav li a after content nav li a after content nav li a only child after content nav ul active color FFF nav ul hover li hover background color green style nav id nav ul li a href i class fa fa home fa 1x i a li li a href i class fa fa book fa 1x i a ul li a href i class fa fa desktop fa 1x i a ul li a href i class fa fa html5 fa 1x i a li li a href i class fa fa css3 fa 1x i a li li a href i class fa fa code fa 1x i a li li a href X a ul li a href i class fa fa html5 fa 1x i a li li a href i class fa fa css3 fa 1x i a li li a href i class fa fa code fa 1x i a li ul li ul li li a href i class fa fa cog fa 1x i a li li a href Y a ul li a href i class fa fa picture o fa 1x i a li li a href i class fa fa cog fa 1x i a li li a href i class fa fa code fa 1x i a li ul li ul li li a href i class fa fa code fa 1x i a li li a href i class fa fa folder fa 1x i a ul li a href i class fa fa folder open fa 1x i a li li a href i class fa fa folder open fa 1x i a li ul li li a href i class fa fa eye fa 1x i a li li a href i class fa fa user fa 1x i a li li a href i class fa fa envelope fa 1x i a ul li a href i class fa fa facebook fa 1x i a li li a href i class fa fa twitter fa 1x i a li ul li ul nav
wns by Default nav ul ul display none position absolute top 100 Display Dropdowns on Hover nav ul li hover ul display list item Fisrt Tier Dropdown nav ul ul li width 30px float none position relative border bottom none nav ul ul li i margin right 10px nav ul ul li a padding 15px 20px text align left padding 5px 5px Second Third and more Tiers nav ul ul ul li position absolute relative top 30px left 100 if you want extra arrow to indicate nested children nav li a after content nav li a after content nav li a only child after content nav ul active color FFF nav ul hover li hover background color green style nav id nav ul li a href i class fa fa home fa 1x i a li li a href i class fa fa book fa 1x i a ul li a href i class fa fa desktop fa 1x i a ul li a href i class fa fa html5 fa 1x i a li li a href i class fa fa css3 fa 1x i a li li a href i class fa fa code fa 1x i a li li a href X a ul li a href i class fa fa html5 fa 1x i a li li a href i class fa fa css3 fa 1x i a li li a href i class fa fa code fa 1x i a li ul li ul li li a href i class fa fa cog fa 1x i a li li a href Y a ul li a href i class fa fa picture o fa 1x i a li li a href i class fa fa cog fa 1x i a li li a href i class fa fa code fa 1x i a li ul li ul li li a href i class fa fa code fa 1x i a li li a href i class fa fa folder fa 1x i a ul li a href i class fa fa folder open fa 1x i a li li a href i class fa fa folder open fa 1x i a li ul li li a href i class fa fa eye fa 1x i a li li a href i class fa fa user fa 1x i a li li a href i class fa fa envelope fa 1x i a ul li a href i class fa fa facebook fa 1x i a li li a href i class fa fa twitter fa 1x i a li ul li ul nav