Breaking Up UL's and LI's in 2 different style sheets ..

Hey All,

Minor problem .. I have 2 style sheets being used on a page. One is the main style sheet with 95% of the page elements included. Another is one specifically for a dropdown menu. It looks like this:

ul {
margin: 0;
padding: 0;
list-style: none;
width: 140px;
/* this bottom border finishes off the main drop down (if using a border */
/*border-bottom: 1px solid #93591A;*/
}

nav {
/*
if you're looking for the "nav" id from the
ul tag, it's in the javascript, not the css
*/
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 139px; /* 1 px less width of ul */
width: 155px;
top: 0;
display: none;
border-bottom: 1px solid #93591A;
}

ul li a {
display: block;
text-decoration: none;
color: #000;
padding: 5px;
border: 1px solid #93591A;
border-bottom: 0;
background-color: #D6C49E;
}

ul li a:hover {
color: #93591A;
}

li:hover ul, li.over ul {
display: block;
}

a.noBorder {
border: 0px;
color: #000000;
background-color: transparent;
}

/* fix ie hack / hide from ie mac */
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }


So I obviously have ul and li tags in the main stylesheet to handle normal instances not including the drop down menu.

What's the best way to differentiate these two? I'm trying to keep things clean, but I'm not sure the best way to go about doing this ..

Thanks!

Give an id to the nav menu and then go from there, so only your drop down menu styles will apply to the proper list instead of all lists.

Hmm .. have an example handy?

umm an example? Its pretty simple actually.
<ul id="nav">
<li>blah</li>
<li>blah</li>
<li>blah</li>
</ul>

#nav li {
your CSS
}
#nav li a {
your CSS
}

Ah that .. I thought you meant defining something in one spot for everything ..

The above is what I figured .. thanks ..

Alright .. this isn't working .. I declare classes for all UL and LI elements, but when I have both CSS files declared above in the file, it's still grabbing the basic UL and LI attributes from the other style sheet. What gives? Any suggestions?

Here's the HTML:

<ul class="dropDown" id="nav">
<li class="dropDown"><a href="#" class="noBorder">test</a>
<ul class="dropDown">
<li class="dropDown"><a href="#" class="dropDown">test</a></li>
<li class="dropDown"><a href="#">test</a></li>
<li class="dropDown"><a href="#">test</a></li>
<li class="dropDown"><a href="#">test</a></li>
<li class="dropDown"><a href="#">test</a></li>
<li class="dropDown"><a href="#">test</a></li>
</ul>
</li>
</ul>

You'll have to redeclare any properties that you have in the default ul li styles. And why on earth would you give a class to every thing?

You'll have to redeclare any properties that you have in the default ul li styles. And why on earth would you give a class to every thing?

I wouldn't. I want the basic UL and LI tags to have their set of properties, and then specific properties for the UL and LI tags within a "dropdown" class.

Can you show us a link to your page please? Your default styles are being applied to your navigation as well because you haven't declared them there. You can lose the default ul li styles all together and just give a class to the ul lis that you want to have a certain formatting.

Instead of giving a class to all those list items why not use this:


<ul id="nav">
<li class="father"><a href="#">test</a>
<ul>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</li>
</ul>

#nav {
}

#nav ul {
}

#nav li {
}

.father {
}

.father a {
}

.father ul {
}

.father ul li {
}

.father ul li a {
}


Use that as a frame work to build your CSS.

I figured it out guys .. thanks for the help ..