Menú CSS puro

<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>&hearts;</span></li>
<li> <a href=”about” title=”About”>About</a> <span>&hearts;</span></li>
<li > <a href=”http://hollymwallace.com/blog” title=”Blog”>Blog</a> <span>&hearts;</span></li>
<li > <a href=”portfolio” title=”Portfolio”>Portfolio</a>
<ul>
<li><a href=”web” title=”Web”>Web</a><span>&hearts;</span></li>
<li><a href=”graphic” title=”Graphic Design>Graphic Design</a><span>&hearts;</span></li>
<li><a href=”video” title=”Video”>Video</a><span>&hearts;</span></li>
<li><a href=”flash” title=”Flash”>Flash</a><span>&hearts;</span></li>
<li><a href=”photo” title=”Photo”>Photography</a></li>
</ul>
<span>&hearts;</span></li>
<li > <a href=”resume” title=”Resume”>Resume</a> <span>&hearts;</span></li>
<li > <a href=”contact” title=”Contact”>Contact</a> <span>&hearts;</span></li>
<li > <a href=”credits” title=”Credits”>Credits</a> </li>
</ul>
</div>
</body>
</html>