Pure CSS Menu
<html>
<head>
<style>
LI { list-style: none; }
/**********************************************************************************/
@font-face {
font-family: ‘CursiveHandwriting’;
src: url(‘../fonts/cursht__-webfont.eot’);
src: url(‘../fonts/cursht__-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘../fonts/cursht__-webfont.woff’) format(‘woff’),
url(‘../fonts/cursht__-webfont.ttf’) format(‘truetype’),
url(‘../fonts/cursht__-webfont.svg#CursiveHandwritingTryoutRg’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
/**************************************************************************************/
#menu {
height: 53px;
width: 1200px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
background-color: #726e69;
padding: 0px;
margin-bottom: 5px;
z-index: 1;
}
#menu .navBreaks{
font-family: “Times New Roman”, Times, serif;
color: #FFF;
font-size: 20px;
margin-right: 20px;
margin-left: 20px;
}
#menu .navSubBreaks{
font-family: “Times New Roman”, Times, serif;
color: #FFF;
font-size: 18px;
margin-right: 20px;
margin-left: 20px;
}
#menu LI {
line-height: 30px;
font-size: 16px;
cursor: pointer;
float: left;
}
#menu LI.main-item {
line-height: 30px;
font-size: 16px;
cursor: pointer;
float: left;
background-color: #99C;
}
#menu LI A.main-item{
text-decoration: none;
font-family: CursiveHandwriting, sans-serif;
display: inline;
color: #FFF;
font-size: 30px;
margin-right: 30px;
margin-left: 30px;
margin-top: 5px;
line-height: 50px;
padding-bottom: 5px;
}
#menu LI A.main-item:hover {
font-family: CursiveHandwriting, sans-serif;
color: #fa1c97;
}
#menu LI A.main-item-sel{
text-decoration: none;
font-family: CursiveHandwriting, sans-serif;
display: inline;
color: #FFF;
font-size: 30px;
margin-right: 20px;
margin-left: 20px;
margin-top: 3px;
line-height: 50px;
background-image: url(../images/resume2.png);
background-repeat: no-repeat;
background-position: center 6px;
}
#menu LI A.main-item-sel:hover {
font-family: CursiveHandwriting, sans-serif;
color: #fa1c97;
background-image: url(../images/resume_pink2.png);
background-repeat: no-repeat;
background-position: center 6px;
}
#menu LI UL LI A:hover {
text-decoration: none;
background: transparent;
color: #ff0093;
}
#menu LI UL LI A {
font-family: CursiveHandwriting, sans-serif;
font-size: 26px;
color: #fff;
text-decoration: none;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
line-height: 30px;
}
#menu UL LI UL {
position: absolute;
display: none;
width: 600px;
}
#menu UL LI UL.sub-rivista {
position: absolute;
display: none;
width: 1061px;
background-color: #726E69;
padding-top: 0px;
margin-top: -7px;
z-index: 0;
padding-left: 139px;
border-top-width: thin;
border-top-style: solid;
border-top-color: #e2c5bc;
}
#menu UL LI:hover UL, #menu UL LI A:hover UL, #menu LI.sfhover UL { display: block; }
#menu .sel, #menu .actual, #menu .sel:hover {
background: url(‘images/menu-item-sel.jpg’) repeat-x;
padding: 0px 20px 0px 20px;
color: #F29063;
}
#menu .sub-rivista {
margin-left: -505px;
}
/**************************************************************************************/
/**************************************************************************************/
</style>
</head>
<body>
<div id=”menu”>
<ul>
<li><a href=”http://www.hollymwallace.com” title=”Home”>Home</a> <span>♥</span></li>
<li> <a href=”about” title=”About”>About</a> <span>♥</span></li>
<li > <a href=”http://hollymwallace.com/blog” title=”Blog”>Blog</a> <span>♥</span></li>
<li > <a href=”portfolio” title=”Portfolio”>Portfolio</a>
<ul>
<li><a href=”web” title=”Web”>Web</a><span>♥</span></li>
<li><a href=”graphic” title=”Graphic Design”>Graphic Design</a><span>♥</span></li>
<li><a href=”video” title=”Video”>Video</a><span>♥</span></li>
<li><a href=”flash” title=”Flash”>Flash</a><span>♥</span></li>
<li><a href=”photo” title=”Photo”>Photography</a></li>
</ul>
<span>♥</span></li>
<li > <a href=”resume” title=”Resume”>Resume</a> <span>♥</span></li>
<li > <a href=”contact” title=”Contact”>Contact</a> <span>♥</span></li>
<li > <a href=”credits” title=”Credits”>Credits</a> </li>
</ul>
</div>
</body>
</html>Written by Holly
Related protips
1 Response
How about an explanation, a demo link, or... anything useful?
over 1 year ago
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#