<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!--
"Simple&Sexy" THEMED BY ITSCHERRYDOLL
Do not remove the credit please, thank you :)
Enjoy the theme! xo
--!>
<!-- DEFAULT VARIABLES -->
<meta name="image:Sidebar" content=""/>
<meta name="image:Background" content=""/>
<meta name="color:background" content="#FFFFFF" />
<meta name="color:entry" content="#FFFFFF" />
<meta name="color:sidebar" content="#F7F7F7" />
<meta name="color:entrydate" content="#F7F7F7" />
<meta name="color:text" content="#9C9A96">
<meta name="color:link" content="#9C9A96">
<meta name="color:linkhover" content="#9C9A96">
<meta name="font:body" content="century gothic" />
<meta name="if:show sidebar image" content="0"/>
<meta name="if:show entry date" content="1" />
<meta name="if:endless scroll" content="1" />
<meta name="if:show pagination" content="1" />
<meta name="if:shaken image" content="1" />
<meta name="if:faded image" content="1" />
<meta name="text:Custom Link One" content="" />
<meta name="text:Custom Link One Title" content="" />
<meta name="text:Custom Link Two" content="" />
<meta name="text:Custom Link Two Title" content="" />
<meta name="text:Custom Link Three" content="" />
<meta name="text:Custom Link Three Title" content="" />
<meta name="text:Custom Link Four" content="" />
<meta name="text:Custom Link Four Title" content="" />
<style>
.shakeimage{
position:relative}
</style>
<script language="JavaScript1.2">
//configure shake degree (where larger # equals greater shake)
var rector=3
var stopit=0
var a=1
function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0}
function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1) return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector+"px"}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector+"px"}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector+"px"}
else{
shake.style.left=parseInt(shake.style.left)-rector+"px"} if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)}
function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0}
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".content").slideToggle(500);
});});
</script>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link href='http://fonts.googleapis.com/css?family=Rationale|Yellowtail|Redressed|Federo|Cedarville+Cursive|Vibur|Crushed|Geo|Over+the+Rainbow|Meddon' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Passero+One' rel='stylesheet' type='text/css'>
<style type="text/css">
::-webkit-scrollbar-thumb:vertical {background-color: {color:text}; height:100px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;}
::-webkit-scrollbar-thumb:horizontal {background-color: {color:text}; height:100px !important;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;}
::-webkit-scrollbar { height:15px; width:15px;background-color: {color:entry};}
{block:IfFadedImage}
img{
-webkit-transition: opacity 0.7s linear;
opacity: 0.7;
}
img:hover{
-webkit-transition: opacity 0.7s linear;
opacity: 1;
}
{/block:IfFadedImage}
body{
color:{color:text};
background-color:{color:background};
background-image:url('{image:background}');
background-postition:center;
background-attachment: fixed;
background-repeat: repeat;
font-family: {font:body};
font-size:9px;
line-height: 12px;
text-align:justify;}
a:link, a:active, a:visited{
color: {color:link};
text-decoration:none;
}
a:hover {
color:{color:linkhover};
text-decoration: none;
}
div.navigate a{
font-family: 'Crushed', cursive;
display: inline-block;
font-size:11px;
padding:7px;
width:auto;
margin:2px;
letter-spacing:3px;
text-align:center;
z-index:1;
color:#9C9A96;
background-color: {color:entrydate};
}
div.navigate a:hover{
font-family: 'Crushed', cursive;
display: inline-block;
font-size:11px;
padding:7px;
width:auto;
margin:2px;
text-align:center;
z-index:1;
color:#9C9A96;
background-color: {color:entrydate};
text-transform:uppercase;
}
#description {
font-family: {font:body};
font-size:9px;}
h3{
color:#9C9A96;
text-align:center;
font-family: 'Crushed', cursive;
font-size:25px;
line-height:30px;
letter-spacing:-1px;
font-weight:normal;
margin:0px;
padding:0px;
margin-bottom:-0px;
}
.blogtitle {
font-family: 'Crushed', cursive;
font-size:25px;
color: {color:text};
padding:4px;
}
#bottominfo{
border-top:1px solid {color:entrydate};
padding:2px 0px 0px 0px;
display:block;
}
#info{
float:left;
width:400px;
padding:3px;
margin:5px;
margin-right:23px;
background-color: {color:entrydate};
border: 1px solid #;
}
#side{
float: left;
position: fixed;
top: 50px;
left: 340px;
background-color:{color:sidebar};
width:200px;
height:100%;
padding:5px;}
#itscherrydollsbar{
float: left;
position: fixed;
top: 0px;
left: 340px;
width:580px;
height:45px;
padding-top:5px;
background-color:{color:background};
z-index:1000;}
#center{
margin: 0 0px 15px 0;
margin-left:200px;
margin-top:35px;
width:410px;
background-color:;
padding:15px;
padding-left:355px;
}
#entry {
float:left;
{block:IndexPage}
width:400px;
overflow:hidden; {/block:IndexPage}
{block:PermalinkPage}
width:400px;
{/block:PermalinkPage}
overflow:hidden;
background-color:{color:entry};
padding:1px;
margin:0px;
padding-left:5px;
padding-right:5px;
padding-bottom:2px;
}
div#entrybox{
font-family: 'Passero One', cursive;
font-size:9px;
background:{color:entrydate};
padding-top:4px;
text-transform:lowercase;
letter-spacing:1px;
text-align:center;
}
#navigate {
width:400px;
padding:5px;
background-color:#9E9E9E;
text-transform:uppercase; font-size:8px;
}
#title{
text-transform:;
font-weight:;
text-align:right;
padding-bottom:5px;
font-family:georgia, serif;
font-size:10px;
margin-top:-3px;
}
#notes{
display:block;
width:400px;
float:left;
padding:3px;
margin:5px;
}
#foot{
display:block;
width:500px;
position:absolute;
padding:10px;
height:15px;
bottom:-45px;
border-top: 1px dashed #000000;
_bottom:-55px;
_margin-left:370px;
background-color: {color:background};
}
#question{
background-color: {color:background};
overflow:SHOW;
padding-bottom:3px;
margin-bottom:3px;}
#entry:hover #perma {display: block; opacity:1;}
.alignleft {float: left;}
.alignright {float: right;}
.right { background-color:{color:header}; margin: 0 0 px 0; padding: px; overflow:hidden; -moz-border-radius:3px; border-radius:3px; text-align: left; text-transform:; }
.totalright {float:right; margin-top:0px;}
#ask{ display:block; float: left; width:50px; overflow:hidden; word-wrap:break-word; margin-right:3px;}
blockquote{ padding:6px; padding-left:6px; border-left:1px solid #9E9E9E;
b, strong{color:{color:title};}
i, em {color:{color:text};}
p{margin-top:3px; margin-bottom:3px;}
blockquote img{display:block; width:100%;}
border-left: 2px solid #616161;
padding: 0 0 0 15px;
margin-left: 0px;
blockquote {position:relative; left:-5px; margin-top:0px; margin-right:0px; padding-right:0px;}
a img{border:none;}
.audio{background-color:#C7C7C7; display:block;}
.user_1 .label, .user_4 .label, .user_7 .label {color:{color:title};}
.user_2 .label, .user_5 .label, .user_8 .label {color:{color:link};}
.user_3 .label, .user_6 .label, .user_9 .label {color:{color:text}; opacity:.75;}
ul.chat, .chat ol, .chat li {list-style:none; margin:0px; padding:0px;}
.notes img{width:10px; position:relative; top:1px;}
ol.notes, .notes li{list-style:none; margin:0px; padding:0px;}
iframe input, iframe submit, iframe textarea, iframe div, iframe table {background-color:transparent!important;}
<style type="text/css">{CustomCSS}</style>
{block:IfEndlessScroll}
<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
{/block:IfEndlessScroll}
</head>
<body>
<!-- IMPORTANT -->
<div id="center">
<div id="itscherrydollsbar">
<div class="navigate">
<center>
<a href="/">Home</a>
<a href="/archive">archive</a>
<a href="/ask">ask</a>
{block:IfCustomLinkOneTitle}<a href="{text:Custom Link One}">{text:Custom Link One Title}</a> {/block:ifCustomLinkOneTitle}
{block:ifCustomLinkTwoTitle}<a href="{text:Custom Link Two}">{text:Custom Link Two Title}</a> {/block:ifCustomLinkTwoTitle}
{block:ifCustomLinkThreeTitle}<a href="{text:Custom Link Three}">{text:Custom Link Three Title}</a>
{/block:ifCustomLinkThreeTitle}
{block:ifCustomLinkFourTitle}<a href="{text:Custom Link Four}">{text:Custom Link Four Title}</a> {/block:ifCustomLinkFourTitle}
</div class=navigate"><br></center>
<div id="side">
<Center>
<div class="blogtitle">{Title}</div><br>
{block:IfShowSidebarImage}
<a href="/"><img src="{image:sidebar}" width=150px">
{/block:IfShowSidebarImage}</a>
<br>
{block:Description}
<div id="description">{Description}</div>{/block:Description}
</center>
<br><br><br><br>
{block:IfShowPagination}
<center>{block:PreviousPage}<a href="{PreviousPage}" title="newer entries">←</a>{/block:PreviousPage} Page {CurrentPage} of {TotalPages} {block:NextPage}<a href="{NextPage}" title="older entries">→</a>{/block:NextPage}</center>
{/block:IfShowPagination}
</div>{/block:Pagination}</div>
<div class = "autopagerize_page_element" >
{block:Posts}<div id="entry">
{block:IndexPage}{/block:IndexPage}<div id="title">
{block:Chat}{block:Title}{Title}{/block:Title} {/block:Chat}{block:Link}{/block:Link}{block:Quote}<h3>"{Quote}"</h3>{/block:Quote}{block:Photo}{/block:Photo}{block:Photoset}{/block:Photoset}{block:Video}{/block:Video}{block:Audio}{/block:Audio}{block:Answer}{/block:Answer}</div>
{block:Text}{block:Title}<h3>{Title}</h3>{/block:Title}{Body}{/block:Text}
{block:Photo}<center>{block:IndexPage}<a href="{permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width=400"
{block:IfShakenImage}class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()
{/block:IfShakenImage}"></a></center>{/block:IndexPage}{block:PermalinkPage}{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}{/block:PermalinkPage}</center>{/block:Photo}
{block:Photoset}<center>{block:IndexPage}{Photoset-500}{/block:IndexPage}{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}</center>{block:PermalinkPage}{/block:PermalinkPage}{/block:Photoset}
{block:Quote}{block:Source}{Source}{/block:Source}{/block:Quote}
{block:Link}<a href="{URL}" class="link" {Target}>{Name}</a><BR>{block:Description}{Description}{/block:Description}{/block:Link}
{block:Chat}<ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>{/block:Lines}</ul>{/block:Chat}
{block:Video}<center>{block:IndexPage}<div id="video">{Video-250}</div>{/block:IndexPage}{block:PermalinkPage}{Video-500}{/block:PermalinkPage}</center>{/block:Video}
{block:Audio}<span class="audio">{AudioPlayerBlack}</span>{block:IndexPage}{block:Caption}{Caption}{/block:Caption}{/block:IndexPage}{/block:Audio}
{block:Answer}
<img src="{AskerPortraitURL-30}"/>
{Asker}: {Question}<br>
________________________________________________________________________________<br>
{Answer}
{/block:Answer}</div>
{block:IfShowEntryDate}
<div id="entrybox"><a href="{permalink}"><a href="{Permalink}" class="date">{block:Date} Posted on {shortmonth} {year}{/block:Date}</span></a> with {notecountwithlabel}, <a href="{ReblogURL}" target="_blank" class="details"> reblog here</a> </span></div>
{/block:IfShowEntryDate}
{block:PermalinkPage}{block:Date}<div id="info">{block:Caption}{Caption}{/block:Caption}
<div id="bottominfo">
Posted: <a href="/day/{year}/{monthnumberwithzero}/{dayofmonthwithzero}">{ShortDayOfWeek} {Month}·{DayofMonth}·{NoteCount} Notes{/block:Date}//{NoteCount}♥ {block:RebloggedFrom}<br>Originally posted by <a href="{ReblogRootURL}">{ReblogRootName}</a>.{/block:RebloggedFrom}
{block:Photo}{block:HighRes}<br>HighRes: <a href="{PhotoURL-HighRes}">view</a>{/block:HighRes}{/block:Photo}
{block:Answer}<BR>Ask: <a href="/ask">{AskLabel}</a>{/block:Answer}
{block:Audio}<BR>Plays: {FormattedPlayCount}{block:ExternalAudio}<BR>Download: <a href="{ExternalAudioURL}">here</a>.{/block:ExternalAudio}{/block:Audio}
{block:HasTags}<BR>Tagged: {block:Tags}<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}{block:NoteCount}<BR>Notes: {NoteCount}{/block:NoteCount}
</div></div> {/block:Date}{/block:PermalinkPage}
{/block:Posts}
</div>
{block:PostNotes}{PostNotes}{/block:PostNotes}
<p id="footer">
<center>Powered by Tumblr. Themed by <a href="http://itscherrydoll.tumblr.com">ItsCherryDoll</a></center>
</div>
</body>
</html> Hmm.. The code above is from my tumblr theme codes. I can't do drop down menu for I'm not familiar with css codes or html's.. I tried codes that google suggests but I can't do it. Could anyone help me if how can I add a drop down menu on my header navigation? Any help will be very much appreciated.