Help with mulitiple <ul> & <li> tags

hi there peeps i am newbie to this and am slowly getting to grips with it, here is the problem

i have 2 css files one called style and the other called menu
in both files i am using the ul and li tags, to create a list the issue i am getting is that the 1st instance of the ul tag is replacing the 2nd and 3rd instances of these tags with its settings, therefore its not rendering correctly as i would like.
so basically all the UL & LI tags now follow the menu.css i need help getting it right if that is ok i am getting very confused about this any help really appreciated
:slight_smile:

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Oranges</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="menu.css"  />
</head>
<body>
 
<div id="wrap">
 
<div id="header">
  <img src="http://www.sitepoint.com/forums/images/mfoam c-WBG-BT-mfoam (euro Font).png" width="229" height="95" alt="Mfoam Logo" /></div>
<div id="right">
<div id="menu">
<ul>
  <li id="list1"><a href="">Home</a></li>
  <li id="list1"><a href="">menu2</a>
    <ul>
    <li id="list1"><a href="">SUB 1</a></li>
    <li id="list1"><a href="">SUB 2</a></li>
    <li id="list1"><a href="">SUB 3	</a></li>
    </ul>
  </li>
  <li id="list1"><a href="">About Us</a>
    <ul>
    <li id="list1"><a href="">The Team</a></li>
    <li id="list1"><a href="">History</a></li>
    <li id="list1"><a href="">Vision</a></li>
    </ul>
  </li>
  <li id="list1"><a href="">Products</a>
    <ul>
    <li id="list1"><a href="">Cozy Couch</a></li>
    <li id="list1"><a href="">Great Table</a></li>
    <li id="list1"><a href="">Small Chair</a></li>
    <li id="list1"><a href="">Shiny Shelf</a></li>
    <li id="list1"><a href="">Invisible Nothing</a></li>
    </ul>
  </li>
  <li id="list1"><a href="">Contact</a>
    <ul>
    <li id="list1"><a href="">Online</a></li>
    <li id="list1"><a href="">Right Here</a></li>
    <li id="list1"><a href="">Somewhere Else</a></li>
    </ul>
  </li>
</ul>
</div>					
<h1></h1>
<h1>&nbsp;</h1>
<h1>&nbsp;</h1>
<div id="top-images">
  <img src="http://www.sitepoint.com/forums/images/pic2.png" alt="" width="555" height="143" /></div>
<h1><a href="#">Welcome to mfoam</a></h1>
<div class="articles">
start of some blah blah text <a href="http://www.free-css-templates.com/">link</a>Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada 
et, nulla. Donec pretium nibh sed est faucibus suscipit. Nunc nisi. Nullam vehicula. In ipsum lorem, bibendum sed, 
consectetuer et, gravida id, erat. Ut imperdiet, leo vel condimentum faucibus, risus justo feugiat purus, vitae 
congue nulla diam non urna.	 
<br /><br />
<br /><br />
Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada 
et, nulla. Donec pretium nibh sed est faucibus suscipit. Nunc nisi. Nullam vehicula. In ipsum lorem, bibendum sed, 
consectetuer et, gravida id, erat. Ut imperdiet, leo vel condimentum faucibus, risus justo feugiat purus, vitae 
congue nulla diam non urna.
</div>
<h2><a href="#">Title with a link - Example of heading 2</a></h2>
<div class="articles">
Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada 
et, nulla. Donec pretium nibh sed est faucibus suscipit. Nunc nisi. Nullam vehicula. In ipsum lorem, bibendum sed, 
consectetuer et, gravida id, erat. Ut imperdiet, leo vel condimentum faucibus, risus justo feugiat purus, vitae 
congue nulla diam non urna.
</div>
</div>
 
<div id="left"> 
 
<h3>Navigation:</h3>
<ul>
<li id="list2"><a href="#">World Politics</a></li> 
<li id="list2"><a href="#">Europe Sport</a></li> 
<li id="list2"><a href="#">Networking</a></li> 
<li id="list2"><a href="#">Nature - Africa</a></li>
<li id="list2"><a href="#">SuperCool</a></li> 
<li id="list2"><a href="#">Last Category</a></li>
</ul>
 
</div>
 
<div id="left2">
<h4>News:</h4>
<ul>
<li id="list3"><a href="#">January 2007</a></li> 
<li id="list3"><a href="#">February 2007</a></li> 
<li id="list3"><a href="#">March 2007</a></li> 
<li id="list3"><a href="#">April 2007</a></li>
<li id="list3"><a href="#">May 2007</a></li> 
<li id="list3"><a href="#">June 2007</a></li> 
<li id="list3"><a href="#">July 2007</a></li> 
<li id="list3"><a href="#">August 2007</a></li> 
<li id="list3"><a href="#">September 2007</a></li>
<li id="list3"><a href="#">October 2007</a></li>
<li id="list3"><a href="#">November 2007</a></li>
<li id="list3"><a href="#">December 2007</a></li>
</ul>
 
</div>
<div style="clear: both;"> </div>
 
<div id="footer">
<a href="http://www.templatesold.com/" target="_blank">&copy;</a> by blah blah
</div>
</div>
 
 
</body>
</html>

Style.cee

*{ margin: 0; padding: 0; }*
body { 
	font: .8em Arial, Sans-Serif;
	line-height: 1.8em;
	background: #333;
	color: #444; 
	}
a {
	COLOR: #FF7A09;
	text-decoration: none;
	}
a:visited {
	COLOR: #F63;
	text-decoration: none;
}
a:hover {
	COLOR: #999;
	text-decoration: none;
}
h2 { margin: 0 0 10px; 
	padding: 10px 0 3px;
}
h3 {
	padding-left: 10px;
	color: #fff;
	font-size: 1em;
	height: 24px;
	line-height: 24px;
	background-color: #09F;
	background-image: url(images/bg2.jpg);
	background-repeat: repeat-x;
}
h4 {
	padding-left: 10px;
	color: #fff;
	font-size: 1em;
	height: 24px;
	line-height: 24px;
	background-color: #3CF;
	background-image: url(images/bg-blue.jpg);
	background-repeat: repeat-x;
}
ul {  
	padding: 0; 
	margin: 0 0 10px;
}
li { 
	list-style-type: none;
}
p { 
	margin: 5px 0 10px 0;
}
img { 
	border: none;
}
 
#header {
	background: #FE7B09 url(images/bg-blue.jpg) repeat-x;
	height: 100px;
}
#header h1 {
	font-size: 30px;
	font-weight: 100;
	letter-spacing: -1px;
	padding: 22px 0 5px 10px;
}
#header h1 a {
color: #fff;
text-decoration: none;
}
#header h1 a:hover {
color: #000;
text-decoration: none;
}
#header h2 {
color: #eee;
font-size: 19px;
font-weight: 100;
padding: 0 0 0 11px;
letter-spacing: -1px;
line-height: 12px;
}
 
#wrap { padding: 10px 10px 3px 10px; width: 760px; margin:20px auto; background: #fff;}
#left { float: left; width: 180px; background: #FFD8AF; margin-bottom: 10px; margin-top: 20px; border: 1px dotted #FF8B1E;}
#left ul { padding: 5px 10px 10px 10px; margin: 0; }
#right { 
	margin-bottom: 10px;
	float: right;
	width: 550px;
	top:	50pv;
	padding: 0 10px 10px 10px;
	 margin-top: 10px;
}	
#footer { font-size: 11px; text-align: center; border-top: 1px solid #ccc; padding: 10px 5px; }
#left2 {
	float: left;
	width: 180px;
	margin-bottom: 10px;
	margin-top: 20px;
	border: 1px dotted #FF8B1E;
background: #f0f9ff; /* Old browsers */
background: -moz-linear-gradient(top, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f9ff), color-stop(47%,#cbebff), color-stop(100%,#a1dbff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* W3C */
}
.list2
	{
	padding: 0; 
	margin: 0 0 10px;
	}
.list3
	{
	padding: 0; 
	margin: 0 0 10px;
	}

menu.css

	@charset "UTF-8";
	/* CSS Document */
 
 
	ul {
	  font-family: Arial, Verdana;
	  font-size: 14px;
	  margin: 0;
	  padding: 0;
	  list-style: none;
	}
	ul li {
	  display: block;
	  position: relative;
	  float: left;
	}
	li ul { display: none; }
	ul li a {
		display: block;
		text-decoration: none;
		color: #ffffff;
		border-top: 1px solid #ffffff;
		padding: 5px 30px 5px 3	0px;
		margin-left: 1px;
		white-space: nowrap;
		background-color: #7db9e8; /* Old browsers */
	background: -moz-linear-gradient(top, #7db9e8 0%, #207cca 49%, #2989d8 50%, #1e5799 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(49%,#207cca), color-stop(50%,#2989d8), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1E5799',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%); /* W3C */
	}
	ul li a:hover {
		background-color: #03F;
	}
	li:hover ul {
	  display: block;
	  position: absolute;
	}
	li:hover li {
	  float: none;
	  font-size: 11px;
	}
	li:hover a {
		background-color: #00F;
	}
	li:hover li a:hover {
		background-color: #ffb76b; /* Old browsers */
	background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* W3C */
	}

I’m not 100% sure what the problem you’re having is. Are you saying that the styles from menu.css are appearing on all the lists? If so, that’s what you’d expect. You call menu.css after style.css. Therefore, the styles in menu.css will overwrite those in style.css (if they have the same specificity) and you’ll see the styles from menu.css. That’s the expected and proper behaviour.

If your problem is something else, sorry for the misunderstanding.

A quick look, you made .list2 which is a class, but you said id=“list2”. Make replace id with class and that may help some. I will concur with Patrick on what he said.

ok i will explain a little better…

i have created a css menu using the <ul> & <li> tags accross the top using some web colours…
then i tried to create a side menu using a 2nd set of Ul & li but the styling from the menu is now on the left hand list this should be in text format not blocks
have a look here

Oranges

A bit of a quick fix here.
You can only use IDs once on a page, so I’ve changed your list1, 2, 3 IDs to class which you can use multiple times.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Oranges</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="menu.css" />
</head>
<body>


<div id="wrap">

<div id="header">
<img src="images/mfoam c-WBG-BT-mfoam (euro Font).png" width="229" height="95" alt="Mfoam Logo" /></div>
<div id="right">
<div id="menu">
<ul>
<<li class="list1"><a href="">Home</a></li>
<<li class="list1"><a href="">menu2</a>
<ul>
<<li class="list1"><a href="">SUB 1</a></li>
<<li class="list1"><a href="">SUB 2</a></li>
<<li class="list1"><a href="">SUB 3 </a></li>
</ul>
</li>
<<li class="list1"><a href="">About Us</a>
<ul>
<<li class="list1"><a href="">The Team</a></li>
<<li class="list1"><a href="">History</a></li>
<<li class="list1"><a href="">Vision</a></li>
</ul>
</li>
<<li class="list1"><a href="">Products</a>
<ul>
<<li class="list1"><a href="">Cozy Couch</a></li>
<<li class="list1"><a href="">Great Table</a></li>
<<li class="list1"><a href="">Small Chair</a></li>
<<li class="list1"><a href="">Shiny Shelf</a></li>
<<li class="list1"><a href="">Invisible Nothing</a></li>
</ul>
</li>
<<li class="list1"><a href="">Contact</a>
<ul>
<<li class="list1"><a href="">Online</a></li>
<<li class="list1"><a href="">Right Here</a></li>
<<li class="list1"><a href="">Somewhere Else</a></li>
</ul>
</li>
</ul>
</div>
<h1></h1>
<h1>&nbsp;</h1>
<h1>&nbsp;</h1>
<div id="top-images">
<img src="images/pic2.png" alt="" width="555" height="143" /></div>
<h1><a href="#">Welcome to mfoam</a></h1>
<div class="articles">
start of some blah blah text <a href="http://www.free-css-templates.com/">link</a>Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada
et, nulla. Donec pretium nibh sed est faucibus suscipit. Nunc nisi. Nullam vehicula. In ipsum lorem, bibendum sed,
consectetuer et, gravida id, erat. Ut imperdiet, leo vel condimentum faucibus, risus justo feugiat purus, vitae
congue nulla diam non urna.
<br /><br />
<br /><br />
Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada
et, nulla. Donec pretium nibh sed est faucibus suscipit. Nunc nisi. Nullam vehicula. In ipsum lorem, bibendum sed,
consectetuer et, gravida id, erat. Ut imperdiet, leo vel condimentum faucibus, risus justo feugiat purus, vitae
congue nulla diam non urna.
</div>
<h2><a href="#">Title with a link - Example of heading 2</a></h2>
<div class="articles">
Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada
et, nulla. Donec pretium nibh sed est faucibus suscipit. Nunc nisi. Nullam vehicula. In ipsum lorem, bibendum sed,
consectetuer et, gravida id, erat. Ut imperdiet, leo vel condimentum faucibus, risus justo feugiat purus, vitae
congue nulla diam non urna.
</div>
</div>

<div id="left">

<h3>Navigation/h3>
<ul>
<li class="list2"><a href="#">World Politics</a></li>
<li class="list2"><a href="#">Europe Sport</a></li>
<li class="list2"><a href="#">Networking</a></li>
<li class="list2"><a href="#">Nature - Africa</a></li>
<li class="list2"><a href="#">SuperCool</a></li>
<li class="list2"><a href="#">Last Category</a></li>
</ul>

</div>

<div id="left2">
<h4>News/h4>
<ul>
<li class="list3"><a href="#">January 2007</a></li>
<li class="list3"><a href="#">February 2007</a></li>
<li class="list3"><a href="#">March 2007</a></li>
<li class="list3"><a href="#">April 2007</a></li>
<li class="list3"><a href="#">May 2007</a></li>
<li class="list3"><a href="#">June 2007</a></li>
<li class="list3"><a href="#">July 2007</a></li>
<li class="list3"><a href="#">August 2007</a></li>
<li class="list3"><a href="#">September 2007</a></li>
<li class="list3"><a href="#">October 2007</a></li>
<li class="list3"><a href="#">November 2007</a></li>
<li class="list3"><a href="#">December 2007</a></li>
</ul>

</div>
<div style="clear: both;"> </div>

<div id="footer">
<a href="http://www.templatesold.com/" target="_blank">&copy;</a> by blah blah
</div>
</div>


</body>
</html>

In Menu.css I’ve added the class to your ul li, ul li a and ul li hover which separates your main menu from the others. It all looks a bit untidy now, but you have the opportunity to style them…don’t forget they are classes now… however you wish.

@charset "UTF-8";
/* CSS Document */


ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li.list1 {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li.list1 a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 30px 5px 3 0px;
margin-left: 1px;
white-space: nowrap;
background-color: #7db9e8; /* Old browsers */
background: -moz-linear-gradient(top, #7db9e8 0%, #207cca 49%, #2989d8 50%, #1e5799 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(49%,#207cca), color-stop(50%,#2989d8), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%); /* IE10+ */
filter: progidXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1E5799',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8 50%,#1e5799 100%); /* W3C */
}
ul li.list1 a:hover {
background-color: #03F;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a {
background-color: #00F;
}
li:hover li a:hover {
background-color: #ffb76b; /* Old browsers */
background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* IE10+ */
filter: progidXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* W3C */
}

thanks that got it i think i understand now!
so when i define the class i need the put the .“Class name” at the end of the UL LI tag on the css to point to the same class name on the HTML is that correct

:slight_smile:

That’s about it.
Good luck