Jump to content
Sign in to follow this  
gebraset

Drop Down Menu

Recommended Posts

You should have consolidated it, some of the stuff i used is probably messing with the stuff in your file.

Share this post


Link to post
Share on other sites

Do you want the drop down directly below the main heading or do you want it indented?

EDIT: Oh and how long are your menu items going to be? So far they only work up to 9em wide. Still working on it but if you dont need any wider i wont bother.

Edited by SpeedCrazy

Share this post


Link to post
Share on other sites

If you got it to work, that would be great. I pretty much gave up on the idea and going to try WordPress out instead. It seems to be much easier to work with and edit. So we shall see. Thank you though Speedy, and I'm sure that we'll be in touch. :)

Share this post


Link to post
Share on other sites

Here is the code if you want it. This is for the menu items directly below the headings.If you want them indented i have marked the spot to change.

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
margin: 0;
padding: 0;
background: #F2F2F2 url(images/img01.jpg) repeat-x left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #7F7F81;
}

h1, h2, h3 {
margin: 0;
padding: 0;
font-weight: normal;
color: #FFFFFF;
}

h1 {
font-size: 2em;
}

h2 {
font-size: 2.4em;
}

h3 {
font-size: 1.6em;
}

p, ul, ol {
margin-top: 0;
line-height: 180%;
}

ul, ol {
}

a {
text-decoration: none;
color: #5D9800;
}

a:hover {
text-decoration: underline;
}

img.border {
border: 6px solid #E1F1F6;
}

img.alignleft {
float: left;
margin-right: 25px;
}

img.alignright {
float: right;
}

img.aligncenter {
margin: 0px auto;
}

#wrapper {
background: url(images/img02.jpg) no-repeat center top;
}

/* Header */

#header {
width: 950px;
height: 125px;
margin: 0 auto;
}

#logo {
float: left;
width: 600px;
height: 63px;
}

#logo h1 {
margin: 0;
padding: 40px 0px 0px 30px;
}

#logo h1 {
float: left;
letter-spacing: -1px;
text-transform: lowercase;
text-shadow: -1px 1px 2px #8C5414;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:60px;
color: #FFFFFF;
}

#logo a {
text-decoration: none;
color: #FFFFFF;
}

#search {
float: right;
width: 291px;
height: 63px;
}

#search form {
padding: 70px 0px 0px 0px;
background: url(images/img04.jpg) no-repeat left 70px;
}

#search fieldset {
margin: 0;
padding: 0;
border: none;
}

#search-text {
width: 200px;
padding: 8px 10px 8px 10px;
border: none;
background: none;
text-transform: lowercase;
font: normal 11px Arial, Helvetica, sans-serif;
color: #7F7F81;
}

#search-submit {
display: none;
}

/* Menu */

#menu {
width: 950px;
height: 63px;
margin: 0 auto;
padding: 0px 0px 0px 0px;
background: url(images/img03.jpg) repeat-x left top;
z-index:;
position:relative;
}

#menu li {
 list-style-type: none;
 float: left;
 width:9em;
 text-align:center;
 background: url(img05.jpg) no-repeat right top;
 vertical-align: bottom;
	float: left;
height: 63px;
}

#menu li ul {
 display: none;
}
#menu li:hover > ul {
 display: block; 
background: url(img06.jpg) repeat-x left top;
margin-left:;/*indent sub-headings*/
}



#menu ul {
margin: 0;
padding: 0px;
list-style: none;
line-height: normal;
}

#menu a {
display: block;
float: left;
height: 43px;
margin-right: 3px;
padding: 20px 30px 0px 30px;
text-decoration: none;
text-transform: lowercase;
text-shadow: 1px 1px 2px #4D5A1C;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
border: none;
background: url(images/img03.jpg) repeat-x left top;
}

#menu li.current_page_item {
}

#menu .current_page_item a {
background: url(images/img06.jpg) repeat-x left top;
}

#menu a:hover {
text-decoration: none;
background: url(images/img06.jpg) repeat-x left;
}

#splash {
width: 920px;
height: 472px;
margin: 0px auto 30px auto;
padding: 30px 0px 0px 30px;
background: #FFFFFF;
}

/* Page */

#page {
width: 950px;
margin: 0 auto;
padding: 0;
}

/* Content */

#content {
float: left;
width: 620px;
margin-bottom: 30px;
padding: 0px 0px 0px 0px;
}

.post {
margin-bottom: 30px;
padding: 40px;
background: #FFFFFF;
}

.post .title {
margin: 0px;
letter-spacing: -1px;
}

.post .title a {
color: #333333;
text-decoration: none;
border: none;
}

.post .meta {
padding: 5px 0px 15px 0px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: italic;
color: #888888;
}

.post .meta a {
}

.post .entry {
padding-bottom: 20px;
text-align: justify;
}

.links {
float: right;
font-weight: bold;
}

/* Sidebar */

#sidebar {
float: right;
width: 300px;
padding: 0px;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

#sidebar li {
background: #FFFFFF;
margin-bottom: 30px;
padding: 30px 0px;
}

#sidebar li ul {
margin: 0px;
padding: 0px 30px;
}

#sidebar li li {
margin: 0px;
padding: 0px;
padding-left: 15px;
line-height: 35px;
border-bottom: 1px dashed #B9B9B9;
}

#sidebar li li span {
display: block;
margin-top: -20px;
padding: 0;
font-size: 11px;
font-style: italic;
}

#sidebar h2 {
height: 38px;
margin-bottom: 20px;
padding: 0px 0px 0px 30px;
letter-spacing: -1px;
font-size: 28px;
color: #333333;
}

#sidebar p {
margin: 0 0px;
padding: 0px 30px 20px 30px;
text-align: justify;
}

#sidebar a {
border: none;
color: #7F7F81;
}

#sidebar a:hover {
text-decoration: underline;
color: #5D9800;
}

/* Calendar */

#calendar {
}

#calendar_wrap {
padding: 20px;
}

#calendar table {
width: 100%;
}

#calendar tbody td {
text-align: center;
}

#calendar #next {
text-align: right;
}

/* Footer */

#footer-wrapper {
overflow: hidden;
padding: 30px 0px;
background: #E7E7E7;
clear:both;
}

#footer {
clear: both;
height: 100px;
background: #222222;
font-family: Arial, Helvetica, sans-serif;
}

#footer p {
margin: 0;
padding: 30px 0px 0px 0px;
line-height: normal;
font-size: 10px;
text-transform: uppercase;
text-align: center;
color: #FFFFFF;

}

#footer a {
color: #FFFFFF;
}


#three-columns {
overflow: hidden;
width: 950px;
margin: 0px auto 0px auto;
padding: 20px 0px 30px 0px;
}

#three-columns ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#three-columns li {
padding: 4px 20px 6px 20px;
border-bottom: 1px dashed #B9B9B9;
}

#three-columns h2 {
	padding: 0px 0px 20px 20px;
font-size: 28px;
color: #000000;
}

#column1 {
float: left;
width: 280px;
margin-right: 55px;
}

#column2 {
float: left;
width: 280px;
}

#column3 {
float: right;
width: 280px;
}

#column1 a, #column2 a, #column3 a {
color: #141414;
}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...