UL LI issues

http://www.rawathletics.com/press.html

I already have ul and li tags being used for the top menu. I want to now add links under each month, but I cannot get the link lists to align properly; they are not staying inside the p class "story".

Help would be appreciated. Thanks

 

edit:

what's the best way to get the links as a list, and to line up right under the month names?

 

Just put each link <a> tag into <li> tag.

 

doesn't work like that because I already have li defined to be used for my top menu...

 

use divs

 

Hah, love all these responses where nobody bothered to understand the problem or look at the code...

You are styling the LI 'flat', which hits all of them on the page - which is NOT how one should hit a menu. That's what you HAVE a ID on the UL for.

Instead of:

#navcontainertop ul
{
padding: 0;
margin: 0;
list-style-type: none;
background-color: #FFF;
color: #000;
width: 100%;
font: bold 90% arial, helvetica, sans-serif;
text-align: center;
}
li { display: inline; }

li a
{
text-decoration: none;
background-color: #fff;
color: #000;
padding: .2em 1em;
border-right: 1px solid #fff;
}

li a:hover
{
background-color: #fff;
color: #000;
}

Code (markup):

Should be more like

#navlist {
	list-style:none;
	width:100%;
	padding:0;
	margin:0;
	text-align:center;
	font:bold 90%/120% arial,helvetica,sans-serif;
	color:#000;
	background:#FFF;
}

#navlist li {
	display:inline;
}

#navlist a {
/*
	added inline-block since by the specifications top/bottom padding
	cannot be applied to an inline-level element
*/
	display:-moz-inline-block;
	display:-moz-inline-box;
	display:inline-block;
	padding:0.2em 1em;
	text-decoration:none;
	color:#000;
	background:#FFF;
	border-right:1px solid #FFF;
}

/*
	deleted your :hover state - if the hover is going to be the same, 
	don't waste time declaring it. Only declare states when they
	are DIFFERENT. If you are going to declare a hover, be sure
	to target :active and :focus for people NOT using the mouse
*/

Code (markup):

target off of the parent ID, that's what you have one for!

Some formatting would probably also help you NOT make a lot of the common mistakes you have, and really your markup needs tons of help since you open LI more than once (so your active state should not be applied), you have a paragraph (#story) wrapping non paragraph elements (like a h1 and h2 - that's DIV's job!), etc, etc, etc... Remember the rule of thumb, if you have P inside P, you are probably screwing up.

 

agree .... we can set many styles into different UL(List).

like #navlist { some code }
#navlist li {some code }
#navlist li a { }
etc.

and the html will be like this:
<ul id="navlist">
<li> <a>...</a> </li>
</ul>

also we can put <div> inside li also.