Another Drop Down question - need help

[brm5017]

I tried several different methods to drop downs, I can not get them to line up right. Anyone want to give me a hand?

 

nav.css:

<style type="text/css">

ul#list-nav {
list-style:none;
margin:0;
padding:0;
width:100%
}

ul#list-nav li {
display:inline
}

ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:110px;
color:#eee;
display: block;
position: relative;
float: left;
overflow: hidden;
border-left:.5px solid #fff;
border-right:.5px solid#fff;
font-size:1.2em;
}

ul#list-nav li a:hover {
color:#575757;
}

</style>

 

and my style.css:

<style type="text/css">

/* Basic Elements */
html, body {
margin: 0 auto;
}

body {background-image: url('../images/bg.jpg');}

#container {
width: 970px;
margin: 0 auto;
align: center;

}

#content {
width: 900px;
margin: 0 auto;
font-family: serif;
color: white;
margin: 0 auto;
border-top: 1px solid #fff;

}

/* column container for MAIN PAGE*/
.colmask {
	clear:both;
	float:left;
	width:100%;			/* width of whole page */
	overflow:hidden;		/* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
	float:left;
	width:100%;
	position:relative;
}
.col1,
.col2,
.col3 {
	float:left;
	position:relative;
	padding:0 0 1em 0;
	overflow:hidden;
}

/* 2 Column (double page) settings */
.doublepage {		/* right column background colour */
}
.doublepage .colleft {
	right:50%;			/* right column width */
			/* left column background colour */
}
.doublepage .col1 {
	width:46%;			/* left column content width (column width minus left and right padding) */
	left:52%;			/* right column width plus left column left padding */
}
.doublepage .col2 {
	width:46%;			/* right column content width (column width minus left and right padding) */
	left:56%;			/* (right column width) plus (left column left and right padding) plus (right column left padding) */
}

/* 2 Column (double page) settings */
.doublepagemain {		/* right column background colour */
}
.doublepagemain .colleft {
	right:50%;			/* right column width */
			/* left column background colour */
}
.doublepagemain .col1 {
	width:30%;			/* left column content width (column width minus left and right padding) */
	left:50%;			/* right column width plus left column left padding */
}
.doublepagemain .col2 {
	width:70%;			/* right column content width (column width minus left and right padding) */
	left:55%;			/* (right column width) plus (left column left and right padding) plus (right column left padding) */
}

#header {
    text-align: center;
width: 100%;
height: 160px;
color: #fff;
font-family: Impact, Charcoal, sans-serif;
font-size: 10pt; 

}

#navcontainer { 
text-align: center;
    font-family: Impact, Charcoal, sans-serif;
color: white;
font-size: 1em;
width: 100%;
position: relative;
}

#footer {
width: 100%;
height: 120px;
clear: both;
border-top: 1px solid #cecece;
text-align: center;
padding: 5px 0;
color: #fff;
font-family: "Times New Roman";
font-size: 10pt; 

}

#slider {
    position:relative;
    display:block;
    width:600px; /* Change this to your images width */
    height:356px; /* Change this to your images height */
    background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:block;
}
#slider a {
    border:0;
    display:block;
}


/* Additional styles */
p {
padding: 10px;
margin: 0;
}
img {
border: 0;
}

img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto }
h1 {

color: white;
}
a {
color: #b0b0b0;
text-decoration: none;
}
a:hover {
color: white;
}

.imagedropshadow {
padding: 5px;
border: solid 1px #EFEFEF;
}
a:hover img.imagedropshadow {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
        box-shadow: 1px 1px 5px #999;
}

</style>

 

[biggieuk]

Can you provide your HTML, it's hard to see whats going on with only CSS code.

[Frank P]

Can you provide your HTML, it's hard to see whats going on with only CSS code.

 

Correct. Better still, put it on the net.