heading section

this is the content

<BODY> <h1>heading section</h1> <div class="nav"> <ul> <li><a href="3_1_2_dropdownmenu.txt">CODE</a> </li> <li><a href="photo.html">photo</a> <ul> <li><a href="zoo.html">zoo</a> </li> <li><a href="lake.html">lake</a> </li> <li><a href="sunset.html">sunset</a> </li> </ul> </li> <li><a href="contact.html">contact</a> </li> </ul> </div> <h2 class="content"> this is the content tutorial:
https://www.youtube.com/watch?v=x4pHhRfqN2M
css drop down menu tutorial 1 -2
reference: littlewebhut.com

se også Farum Jensens dropdown

css
.nav ul {list-style:none; margin:0; padding: 0;} .nav li {float:left; width:100px;background-color:#444; text-align:center; border-right: 1px solid white; position:relative; height:30px; line-height:30px;} .nav li ul li {float:none; width:120px;text-align:left; padding-left:5px; border-top:1px solid white;} .nav a {text-decoration:none; color:white;} .nav li ul {position:absolute; top:30px; left:0; visibility: hidden;} .nav li:hover {background-color:maroon;} .nav li:hover ul {visibility: visible;} .content {clear:both;}

nav ul (unordered list) - list-style:none; --> omits the bullits.
margin:0 flushes the items to the left vertically.
nav li - float:left -> the 'list' is lined up horisontally ;
position : relative acts as ancestor to nav li ul
nav li line height places the text in the middle of each item box (height: 30 px)
nav li ul li applies only to the drop down (photo).
set to float: none and the list aligns vertically
nav li position:relative; then --> nav li ul is set to position:absolute AND visibility:hidden;

nav li:hover ul (!no space between li and the colon) is set to visible

content clear:both moves the content below the menulist