SOFT7001 Class 11

We completed out horizontal menu using CSS to change the properties of a nested list. We resisted the temptation to create classes for the inner and outer lists using child selectors.

Getting the elements to line up nicely proved difficult because of inheritance of the padding properties - or something. Colin promised to look into it.

Colin attempted to use background images instead of colors for the hovers, but that didn't go so well. We will look at images the next day.

Today's code. Note the child selectors and the display property's none and block attributes


body {background-color: #cccccc;}

div.menulist {
width:100%;
border-top: 5px solid #069;
border-bottom: 5px solid #069;
margin-top:20px;
float:left;
background-color: #ffa;
}


div.menulist >ul >li {
float:left;
width:6em;
padding-left:0;
}

div.menulist  li {
list-style-type:none;
background-color: #ffa;
border-right: 1px solid #069;

}


div.menulist > ul {
margin-top:0;
padding-left:0px;}


a:link {color:black;}
a:visited {color:black;}
a {text-decoration:none;}
a:hover {color:red;}

div.menulist li:hover {background-color: #aaa;}


div.menulist ul li ul {
margin:0;
width:6em;
position:absolute;
padding-left:0;
}

div.listmenu ul li ul li {
width:100%;
}

div.menulist ul li ul {display:none;}

div.menulist ul li:hover ul {display:block;}