• Site Plan
• Modularization Plan
• Style Guide
• Copyright
• Colophon
• Learning Report #1
• Learning Report #2
• Learning Report #3
• Learning Report #4
• Learning Report #5
• Learning Report #6
• Learning Report #7
• Learning Report #8

Learning Report #4

Drop-down Nav Bar

This is my sad attempt of creating a drop-down menu for my navigation bar

What I Learned

I learned the difficulty of creating drop-down menus. Within my nav bar div (#nav) I created an unorder list. Within the unorder list I created another unordered list for the subject I needed (e.g. My Portfolio had a <ul< then a list of my portfolio). I followed the guidlines from flepstudio.org and had to make certian modifications to fit the CSS style I wanted.

Explanation/Examples

Here is the CSS sheet I used for this sheet.

#nav{
position: absolute;
top: 1in;
left: 0;
height: .25in;
width: 100%;
background-color: fuchsia;
}

#nav ul{
padding:0;
margin:0;
}

#nav li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
}

#nav li a{
width: 150px;
height: .25in;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
}

#nav li:hover ul{
display: block;
background-color: fuchsia;
color: white;
}

#nav li a:hover{
color: blue;
background-color: #FF99FF;
}

#nav ul ul{
position: absolute;
top: .255in;
visibility: hidden;
}

#nav ul li:hover ul{
visibility: visible;
}