I can't seem to make a space between my buttons as having them right next to each other looks too close, I can't use the <p> or <br> tags and when using the margin-bottom in my css, that mucks up my drop down menu. So do you have any other ideas of how i can space my buttons out.

 

The link to where you can see it doesn't work with margin-bottm www.jasongold.org

 

My html:

 

<ul id="navlist">
<li><a href="index.html" title="Link to Homepage" id="homenav">Home</a>
	<ul>
		<li><a href="about.html" title="Link to About Page">About</a></li>
		<li><a href="portfolio.html" title="Link to Portfolio Page">Portfolio</a>
			<ul>
				<li><a href="fashion.html" title="Link to Fashion Page">Fashion</a></li>
				<li><a href="portrait.html" title="Link to Portrait Page">Portrait</a></li>
				<li><a href="reportage.html" title="Link to Reoportage Page">Reportage</a></li>
				<li><a href="travel.html" title="Link to Travel Page">Travel</a></li>
			</ul>
		</li>
		<li><a href="contact1.html" title="Link to contact page">Contact</a></li>
	</ul>
</li>
</ul>

 

My css

#menu {
width: 12em; /* set width of menu */
background: #333333;
display:block;
z-index: 100;
height: 40px;
} 

#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}

/* style, color and size links and headings to suit */
#menu a, #menu h2 {
display: block;
border-width: 0px;
border-style: solid;
border-color: #ccc # #555 #bbb;
margin: 0;
font-family: "Times New Roman", Times, serif;
font-size: 16px;
line-height: 20px;
font-weight: bold;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #a5a2b5;
background: #333333;
text-decoration: none;
}



#menu a:hover {
color: #ffffff;
background: #202020;
}

#menu li {
/* make the list elements a containing block for the nested lists */
position: relative;
} 

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}



body#home a#homenav,
body#about a#aboutnav,
body#portfolio a#portfolionav,
body#fashion a#fashnav,
body#portrait a#portraitnav,
body#reportage a#repnav,
body#travel a#travnav,
body#contact a#connav {

color: #fff;
background: #666666;
}

li {margin-bottom: 10px}

ul {margin-bottom: 10px}

 

Also why is it that even with align bottom, Home and About always stay stuck together?

I can't seem to make a space between my buttons as having them right next to each other looks too close, I can't use the <p> or <br> tags and when using the margin-bottom in my css, that mucks up my drop down menu. So do you have any other ideas of how i can space my buttons out.

 

The link to where you can see it doesn't work with margin-bottm www.jasongold.org

 

My html:

 

<ul id="navlist">
<li><a href="index.html" title="Link to Homepage" id="homenav">Home</a>
	<ul>
		<li><a href="about.html" title="Link to About Page">About</a></li>
		<li><a href="portfolio.html" title="Link to Portfolio Page">Portfolio</a>
			<ul>
				<li><a href="fashion.html" title="Link to Fashion Page">Fashion</a></li>
				<li><a href="portrait.html" title="Link to Portrait Page">Portrait</a></li>
				<li><a href="reportage.html" title="Link to Reoportage Page">Reportage</a></li>
				<li><a href="travel.html" title="Link to Travel Page">Travel</a></li>
			</ul>
		</li>
		<li><a href="contact1.html" title="Link to contact page">Contact</a></li>
	</ul>
</li>
</ul>

 

My css

#menu {
width: 12em; /* set width of menu */
background: #333333;
display:block;
z-index: 100;
height: 40px;
} 

#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}

/* style, color and size links and headings to suit */
#menu a, #menu h2 {
display: block;
border-width: 0px;
border-style: solid;
border-color: #ccc # #555 #bbb;
margin: 0;
font-family: "Times New Roman", Times, serif;
font-size: 16px;
line-height: 20px;
font-weight: bold;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #a5a2b5;
background: #333333;
text-decoration: none;
}



#menu a:hover {
color: #ffffff;
background: #202020;
}

#menu li {
/* make the list elements a containing block for the nested lists */
position: relative;
} 

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}



body#home a#homenav,
body#about a#aboutnav,
body#portfolio a#portfolionav,
body#fashion a#fashnav,
body#portrait a#portraitnav,
body#reportage a#repnav,
body#travel a#travnav,
body#contact a#connav {

color: #fff;
background: #666666;
}

li {margin-bottom: 10px}

ul {margin-bottom: 10px}

 

Also why is it that even with align bottom, Home and About always stay stuck together?

 

 

 

hello just add a quick look seems that you have not ended a few tags

 

<li><a href="portfolio.html" title="Link to Portfolio Page">Portfolio</a>

<ul>

 

 

</li> needs to be added and<ul> should be</ul> try that

That doesn't work, if i close the <li> the drop down menu doesn't work, if i close the <ul> it brings the drop down menu buttons to be included in the actual menu

 

hello just add a quick look seems that you have not ended a few tags

 

<li><a href="portfolio.html" title="Link to Portfolio Page">Portfolio</a>

<ul>

 

 

</li> needs to be added and<ul> should be</ul> try that