ptg16476052310 LESSON 11: Using CSS to Position Elements on the Page
width: 160px;
border: 1px #666666 solid;
background-color: #dddddd;
}It’s set to display none so that it’s hidden when the page loads. The position is set to
static, which is the default. I also add a border and a background color. Next, I style the
list items in the submenu:
#navigationBar ul ul li {
position: relative;
float: none;
display: block;
height: 28px;
width: 100%;
border: none;
}In this case, the list items are positioned relatively, float is disabled, and the list items are
sized. Many of these styles override styles set for the items in the parent list. Following
the pattern, I next style the links in the list:
#navigationBar ul ul li > a {
height: 100%;
width: 96%;
padding: 0 0 0 4%;
line-height: 28px;
background-color: transparent;
border: none;
color: #000000;
font-size: 12px;
font-style: normal;
}In this case, I set the height and width of the link, add a little padding, and set the line-
height so that the link is positioned properly. I also reduce the font size a bit so that the
links fit in the space allotted. Once I’m done with that, I just have to add the hover styles
to make the page dynamic:
#navigationBar li:hover > a {
color: #220000;
background-color: #eeeabe;
}
#navigationBar li:hover > ul {
display: block;
}