Skip to content

Instantly share code, notes, and snippets.

@chiragmongia

chiragmongia/CSS_Exercise

Created August 25, 2013 18:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save chiragmongia/6335522 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save chiragmongia/6335522 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. chiragmongia created this gist Aug 25, 2013.
    139 changes: 139 additions & 0 deletions CSS_Exercise
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,139 @@
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .main_menu {
    list-style-type: none;
    font-family: "Georgia";
    font-style: italic;
    font-size: 18px;
    padding:0px 20px;
    height: 37px;
    margin-left: 2px;
    margin-right: 655px;
    }

    .main_menu_li {
    display: inline;
    float: left;
    padding:9px 0px 0px 0px;
    }

    ul.main_menu > li > a {
    background-color: #cfcfcf;
    text-decoration: none;
    padding: 10px 10px 7px;
    color:black;
    margin: 0px 1px 0px 0px;
    border-bottom: solid #6d6d6d 1px;
    }

    ul.main_menu > li:hover > a {
    font-family: "Georgia";
    font-style: italic;
    font-size: 18px;
    color: #8C8C8C;
    background: white;
    padding: 9px 9px 7px;
    border: solid black 1px;
    border-bottom: none;
    position: relative;
    z-index: 1;
    }

    ul.list li a:link {
    text-decoration: none;
    }

    .list {
    list-style-type: none;
    width: 180px;
    border: solid #6d6d6d 1px;
    padding: 10px;
    background-color: white;
    font-family: "Georgia";
    font-size: 14px;
    font-style: italic;
    color:black;
    display: none;
    margin-top: 5px;
    position: absolute;
    }

    ul.list li {
    padding: 5px 0px;
    border-bottom: solid #cfcfcf 1px;
    }

    ul.list li a {
    font-family: "Georgia";
    font-style: italic;
    color: black;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 14px;
    }

    li:hover ul {
    display: block;
    }

    ul.list a:hover {
    color: #bd0707;
    }

    ul.list li.last_link {
    border-bottom: none;
    }

    </style>
    </head>
    <body>
    <ul class="main_menu">
    <li class="main_menu_li"><a href="#">Home</a>
    <ul class="list">
    <li><a href="#">Example Link 1</a></li>
    <li><a href="#">Example Link 2</a></li>
    <li><a href="#">Example Link 3</a></li>
    <li class="last_link"><a href="#">Example Link 4</a></li>
    </ul>
    </li>

    <li class="main_menu_li"><a href="#">About Us</a>
    <ul class="list">
    <li><a href="#">Example Link 1</a></li>
    <li><a href="#">Example Link 2</a></li>
    <li><a href="#">Example Link 3</a></li>
    <li class="last_link"><a href="#">Example Link 4</a></li>
    </ul>
    </li>

    <li class="main_menu_li"><a href="#">Our Services</a>
    <ul class="list">
    <li><a href="#">Example Link 1</a></li>
    <li><a href="#">Example Link 2</a></li>
    <li><a href="#">Example Link 3</a></li>
    <li class="last_link"><a href="#">Example Link 4</a></li>
    </ul>
    </li>

    <li class="main_menu_li"><a href="">Our Portfolio</a>
    <ul class="list">
    <li><a href="#">Example Link 1</a></li>
    <li><a href="#">Example Link 2</a></li>
    <li><a href="#">Example Link 3</a></li>
    <li class="last_link"><a href="#">Example Link 4</a></li>
    </ul>
    </li>

    <li class="main_menu_li"><a href="">Contact Us</a>
    <ul class="list">
    <li><a href="#">Example Link 1</a></li>
    <li><a href="#">Example Link 2</a></li>
    <li><a href="#">Example Link 3</a></li>
    <li class="last_link"><a href="#">Example Link 4</a></li>
    </ul>
    </li>
    </ul>
    </body>
    </html>