Nested Lists

<html>
<head>

<title>
Nested Lists
</title>

<style type="text/css">

body{background-color: White}

body{font-size: 20px; margin: 0;padding: 0%}


/*--Below is the ids that control the divisions within the body of our html file--*/
#header{height: 15%; margin-top: 1pt; padding-top: 1pt;}

#ptitle{background-color: #ff9900; float: right; clear: left; width: 100%;

font-size: 35pt; font-weight: bold; text-align: center; font-style: italic; text-decoration: underline;}

#left{float: left; width: 20%; height: 75%; background-color: #e6ff00; font-size: 15pt;
    padding: 10pt; color: white;}

#right{float: left; width: 65%; height: 75%; padding: 10pt; color: #e6ff00;}


/*--Below is the CSS that controls the Navigation Links--*/

/*--This is the CSS code that makes the 2nd Level of Unorderd list items disappear--*/
li ul{display: none;}

/*--This is the CSS code that makes the 2nd Level of Unordered list items reappear once you
hover over them--*/
li:hover ul{display: block;}

/*--This piece of code controls the 1st Level of Unordered List items--*/
#navitems li{list-style-type: none; float: left; width: 60mm; text-align: center;
align: top;}

/*--This piece of CSS fixes the 1st Level of Unordered List items' position relative to each other--*/
#navitems li{position: relative;}

/*--This piece of CSS fixes the 2nd Level of Unorderd list items’ position absolute--*/
#navitems li ul{position: absolute;}


/*--This piece of CSS code controls the look of the text within the link--*/
#navitems a{text-decoration: none; color: white; display: block; background-color: #ffcc33;
border:1px black solid;}


/*--This piece of CSS code controls how our links look once the cursor is over them.--*/
#navitems a:hover{color: red;}


/*--Below is the class that is controlling the look of the 1st layer of list itmes, the titles for the
drop down menus.--*/

.lititles{background-color: #ff9900; border: 1px black solid; border-bottom: none;}


</style>


</head>

<body>
<!---This is the header division in our html file-->
<nav>
<div id="header">

<div id="navitems">
<ul>
<li class="lititles">CSS Intro Lessons
    <ul>
    <li><a href="link1.html">
        CSS Introduced</a>
    <li><a href="link2.html">
        CSS Classes</a>
    <li><a href=link3.html">
        CSS Assigned Values</a>
    <li><a link4.html">
        CSS Background Images</a>
    <li><a href="link5.html">
        CSS Text Properties</a>
    </ul>
</li>
<li class="lititles">Page Layout Lessons
    <ul>
    <li><a href="link6.html">
        CSS Box Properties</a>
    <li><a href="link7.html">
        CSS The Great Divide</a>
    <li><a href="link8.html">
        Creating Forms</a>
    </ul>
</li>
<li class="lititles">CSS List Lessons
    <ul>
    <li><a href="link9.html">
        CSS Lists</a>
    <li><a href="link10.html">
        CSS Horizontal Lists</a>
    </ul>
</li>
<li class="lititles">Hexa Color Websites
    <ul>
    <li><a href="http://www.colorpicker.com/">
        Colorpicker.com</a>
    <li><a href="http://www.colorhexa.com/">
        ColorHexa.com</a>
    <li><a href="http://www.w3schools.com/tags/ref_colorpicker.asp">
        HTML Color Picker</a>
    <li><a href="http://html-color-codes.com/">
        Html-Color-Codes.com</a>
    </ul>
</li>
</ul>
</div>


<div id="ptitle">
<p>
Nested Lists
</p>
</div>

</div>
</nav>


<!--This is left division in our html file-->
<div id="left">


</div>

<!--This is right division in our html file-->
<div id="right">

<!--This is the html code that creates the list in the right division of the webpage-->


</div>


</body>