Skip to content

Instantly share code, notes, and snippets.

@chiragmongia

chiragmongia/CSS_Exercise

Created August 25, 2013 18:46
Show Gist options
  • Save chiragmongia/6335524 to your computer and use it in GitHub Desktop.
Save chiragmongia/6335524 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
CSS_Exercise
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment