Can I make my nav menu to add drop down?

**mlegg** · 03-07-2011, 08:54 PM

I have this site I am making for a church http://tinyurl.com/4j4cycw
I like the menu design but under Iconography I would like to have a drop down with several choices. Is this possible? I thought it may be easier than finding an entire menu and changing all the code to make it appear similar to what I have now.
thanks in advance

HTML:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="keywords" content="StNickPortIcons.com, Iconography, Icons, Orthodox, Orthodox Christian, Orthodox Church, Orthodox Christian Church, Christianity, Eastern Orthodox, Greek, Greek Orthodox, Church, Christian, Greece, Jesus Christ, Eastern Orthodoxy, byzantine,religious art, icons of saints, angels,">
<meta name="description" content="StNickPortIcons, St. Nicholas Church has a traditional Byzantine architectural style, with the center dome and the footprint in the shape of a cross. The church structure is modeled after many island churches typical in Greece. Between the altar and the upper Sanctuary is a wall adorned with icons with a central doorway called "Royal Doors." This wall is referred to as the iconostasis, and is characteristic of all Orthodox churches.">

<title>StNickPortIcons.com</title>
<link rel="stylesheet" type="text/css" href="styles.css"><!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6styles.css">
<![endif]-->

<style type="text/css">
 li.c1 {border:none}
</style>
<!-- Start visuallightbox.com HEAD section -->
 <link rel="stylesheet" href="engine/css/vlightbox1.css" type="text/css" />
 <link rel="stylesheet" href="engine/css/vlightbox2.css" type="text/css" />
<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="engine/js/jquery.min.js" type="text/javascript"></script>
		<script src="engine/js/visuallightbox.js" type="text/javascript"></script>
		<script src="engine/js/vlbdata.js" type="text/javascript"></script>

<!-- End visuallightbox.com HEAD section -->

</head>
<body>
<div id="container">
<div id="mainPicture"></div>
<div id="nav1">
<ul>
<li id="current" class="c1"><a href="index.html">Home</a></li>
<li><a href="iconography.html">Iconography</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

</div>
<div class="one">
<p>In  early 2002, the parishioners of St. Nicholas Church embarked upon a very ambitious project to add icons to its Church walls.</p> 
<table>
<tr>
  <td width="460px"><!-- Start VisualLightBox.com BODY section id=1 -->
	<div id="vlightbox1">
	<a class="vlightbox1" href="data/images/iconostasis.jpg" title="iconostasis"><img src="data/thumbnails/iconostasis.jpg" alt="iconostasis"/></a>
<a class="vlb" style="display:none" href="http://visuallightbox.com">jQuery Window Popup by VisualLightBox.com v4.7</a>
	</div>

	<!-- End VisualLightBox.com BODY section -->
</td>
  <td width="450px"><p>The Church itself has a traditional Byzantine architectural style, with the center dome and the footprint in the shape of a cross. The church structure is modeled after many island churches typical in Greece. Between the altar and the upper Sanctuary is a wall adorned with icons with a central doorway called "Royal Doors." This wall is referred to as the iconostasis, and is characteristic of all Orthodox churches.</p> 

<p>Previous iconography was painted on the church iconostasis and on the walls over and behind the altar. As is found in all Greek Orthodox Churches, the icon immediately right of the doors is Christ and immediately left, Mary and the Christ Child. Next on the right is St. John the Baptist, and on the left, the Church patron Saint, in this case, St. Nicholas. On either side of these Saints are icon doors with Archangels Gabriel and Michael. Some of the more recent iconography is seen on both sides of the iconostasis. Note the iconography work in progress on the left and right of photo</p></td>
  
</tr>

</table>


<div style="clear:both">


<div id="footer">Copyright &copy; St. Nicholas Greek Orthodox Church, Portsmouth NH</div>

</div>
<!--end #container --></div>

</body>
</html>

CSS:

Code:

html,body {
    padding:0;
    margin:0;
    height:100%;
    background-image:url(images/greekkey2.gif);
    background-position:center top;             /* this positioning has been modified */
 }
#container {
    position:relative;
    width:960px;
    padding: 0;    
    min-height:100%;
    margin:auto;
    font-family: sans-serif;color:navy;
    background-color:#fff;
 }

div.one {  
      padding: 15px;  
      min-height:100%;
} 
div.one a:link  { 
color :#00008B;
text-decoration:underline;
}
div.one a:visited {
color: #FF0000;
text-decoration : underline; 
}

div.one a:hover  {
color: #FFFFFF;
background-color: #8B0000;
text-decoration: underline;
}

div.one a:active  {
color : #FF0033; 
background-color: #FFFFFF;
text-decoration: underline;
}
#mainPicture {
  height:170px;
  width:960px;
  background-image:url(images/Icons-logo.jpg);      
 }

#nav1 {
	background: transparent url(images/hmenu.jpg) repeat-x scroll left top;
        height:40px;
	margin:0 auto ;
	width:960px;	
	text-align:center;
}


#nav1 ul {
	display:table;
	margin:0 auto;
	padding:0;
	list-style-type:none;
	position:relative;
	height:40px;
	text-transform:uppercase;
	font-size:13px;
	font-family:Arial,sans-serif;
}


#nav1 ul li {
	display:block;
	float:left;
	margin:0;
	padding:0;
	background:transparent url("images/hmenu.jpg") repeat-x top left;

}


#nav1 ul li a {
	display:block;
	float:left;
	color:#ffffff;
	text-decoration:none;
	padding:0px 20px ;
	line-height:40px;
	font-weight:bold;
}


#nav1 ul li a:hover {
	color:#ffffff;
	background:transparent url("images/hmenu-sel.jpg") repeat-x top left;
}
#Chris {         
background-image:url(images/Chris-Ganotis.jpg);
background-repeat:no-repeat;
width:196px;
height:400px;
padding: 10px;
float:right; 
} 

#footer {
    position:absolute;
    width:100%;
    left:0;
    bottom:0;
    padding:5px 0;
    font-family:sans-serif;
    font-size:15px;
    color:#ed000b;
    text-align:center;
    background-image:url(images/footer.png);
 }
#footer a:link  { 
color : #FF0000;
text-decoration:underline;
}

#footer a:visited {
color: #FF0000;
text-decoration : underline; 
}

#footer a:hover  {
color: #FFFFFF;
background-color: #8B0000;
text-decoration: underline;
}

#footer a:active  {
color : #FF0033; 
background-color: #FFFFFF;
text-decoration: underline;
}

**azoomer** · 03-07-2011, 09:32 PM

Maybe you can use the anylink menu!

Thread: Can I make my nav menu to add drop down?

Thread Tools

Search Thread

Can I make my nav menu to add drop down?

Bookmarks

Bookmarks

Posting Permissions