wrenn inside

by alinktothepast

HTML

<div class="header">
        <ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a>
        <ul>
            <li><a href="#">Mission Statement</a></li>
            <li><a href="#">The Wrenn Girls</a></li>
            <li><a href="#">(Y)Our Inspiration</a></li>
            <li><a href="#">Prices and Priceless</a></li>
            <li><a href="#">Text Filler</a></li>
            <li><a href="#">Text Filler</a></li>
        </ul>
    </li>
    <li><a href="#">Products and Designs</a>
        <ul>
            <li><a href="#">Featured Products</a></li>
            <li><a href="#">Chairs and Tables</a></li>
            <li><a href="#">Antique Plates</a></li>
            <li><a href="#">Customize Your Own Design</a></li>
            <li><a href="#">Upcoming Products</a></li>
            <li><a href="#">Text Filler</a></li>
        </ul>
    </li>
    <li><a href="#">Contact Us</a>
        <ul>
            <li><a href="#">General Inquiries</a></li>
            <li><a href="#">Inside Feedback</a></li>
            <li><a href="#">Text Filler</a></li>
            <li><a href="#">Text Filler</a></li>
            <li><a href="#">Text Filler</a></li>
            <li><a href="#">Text Filler</a></li>
        </ul>
                </li>
                </ul>

    Username: <input type="text" name="User" />
    Password: <input type="text" name="Pass" />
    <input type="button" name="submit" value="Sign in" /></br>New customer?  <a href="#">Sign up now!</a>

</div>



<div class="content">
    <div class="featuredcontent">
    <h1>Hello!</h1>
    <p>
    This is where the main content will appear.  The first content seen here will include "Featured Products", "Company News", etc.  At any point you will be able to change this content very easily.  The code will pull each section of information from its designated category and place it in here.  So if a person clicks "Products and Design - Chairs" this section will then display your chairs.  Also enhanced...

CSS

body {
        background-image: url('http://4.bp.blogspot.com/-gqcVS9icSXg/T_3M6tEpVuI/AAAAAAAAAEc/FGBAVVY6KgU/s1600/il_fullxfull.319017164.jpeg');
}

.header
{
    position: relative;
    margin: auto;
    width: 980px;
    height: 150px;
    border: solid 0px #000;
    background-color: #eee;
    box-shadow: inset 5px 5px 15px #eee, inset 9px 9px 9px #eee;
}   
.content
{
    position: relative;
    margin: auto;
    width: 980px;
    height: 400px;
    border: solid 0px #000;
    background-color: #FFEFD3;
    box-shadow: inset 5px 5px 15px #B29A70, inset 9px 9px 15px #FFF;
}
.featuredcontent
{
    position: relative;
    border: solid 1px #000;
}
    
h1, p
{
    float: left;
    margin: 10px 30px 10px 350px;
    color: #000;
    font: normal 22px sans-serif;
}
p
{
    font-size: 14px;
    text-align: justify;
}
#menu
{

    position: relative;
    float: right;
    margin-top: 0;
    z-index: 5;
    border: solid 1px #000;
    list-style: none;
    font: strong 12px sans-serif;
    text-align: center;
    background-color: #eee;
}
#menu li
{
    float: left;
    margin-right: 2px;
    position: relative;
    
}
#menu a
{
    display: block;
    padding: 10px;
    color: #357AFF;
    text-decoration: none;
}
#menu a:hover
{
    color: #000;
    text-decoration: underline;
}
#menu ul
{
    background-color: #FFF;
    background:rgba(255,255,255,0);
    list-style: none;
    position: absolute;
    left: -9999px;
}
#menu ul li
{
    padding: 0px;
    float: none;
    border: solid 1px #000;
}
#menu ul a
{
    white-space: nowrap;
}
#menu li:hover ul
{
    left: 0;
}
#menu li:hover a
{
    background-color: #FFF;
    text-decoration: underline;
}
#menu li:hover ul a
{
    text-decoration: none;
}
#menu li:hover ul li a:hover
{
    background-color: #FFF;
}