Problem using different css in differnet parts of page

foggers

Hi,
just messing about with css and have hit a bit of a snag. I am using css and unordered list for my horizontal dropdown navidation menu at the top of the page but the whole thing is getting applied to the rest of the page aswell. I have tiried several ways around this using the auld interweb for some tutorial but can't seem to work it out. I have modified this, that and the other within the code but can't get it exactly right. It's the lists <ul><li> in the main body of the page that are the problem just to be clear.

The css file is below....

#menu{
position:relative;
z-index:1;
top:0;
left:0;
padding:2px;
margin:0px;
list-style:none;
}

#menu1{
position:relative;
z-index:1;
top:0;
left:0;
padding:2px;
margin:0px;
list-style:none;
}



li ul{
position:relative;
display:none;
padding:2px;
margin:0px;
list-style:none;
}
li{
position:relative;
background-color:#ffffff;
border:1px solid black;
padding:2px;
margin:0px;
color:#000000;
}
.subMenu{
background-repeat:no-repeat;
}
.click{
background-color:#fa551a;
color:#fffab5;
}
.click ul{
display:block;
}
.hover, ul li a:hover{
cursor:pointer;
background-color:#fa551a;
color:#FFFAB5;
}
li ul li.hover, li ul li.hover a:hover{
background-color:#fa7d50;
}
li a{
width:100%;
}
li a, li ul li a, li.hover ul li a{
text-decoration:none;
color:#000000;
}
li.hover a, li ul li.hover a{
color:#fffab5;
text-decoration:underline;
}


and a portion of the html file is here...........

<ul id="menu" class="dbMenu onMouse">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About us</a></li>

<li><a href="link2.html">link2</a>
<ul>


<li><a href="link2a.html">link2a</a></li>
<li><a href="link2b.html">link2b</a></li>

</ul>
</li>

<li><a href="Tester.html">tester/a>
<ul>
<li><a href="Contact.html">Contact</a>
</ul>
</li>



<li><a href="Location.html">Location</a></li>
</ul>


This also utilises a dbmenu.js file also.

This is a page about the code for the menus
http://www.boggusweb.com/web/javascript/dbMenu3/

I'd imagine it's a fairly simple fix for soemone in the know. Would be greatful for any assistance rendered.

Thanks in advance.

tricky D

Would be a lot easier if you'd post a full example URL to show how it affects the rest of the page.

Also get firebug and use that to do some checking your validation

louie

first you are assigning CSS style to the ul & li tags without a reference div id='id here' which in turn will apply for the entire webpage where ul & li exist.

if you have a div id container holding the top menu (let's say div id='top_menu') then your css should be:

#top_menu li ul{
position:relative;
display:none;
padding:2px;
margin:0px;
list-style:none;
}
#top_menu li{
position:relative;
background-color:#ffffff;
border:1px solid black;
padding:2px;
margin:0px;
color:#000000;
}

and so on.

foggers

Hi Louie, that sounded like it would work alright. Tried adding the #top_menu in the css file where I thought it shoud be added and then adding to the html file. Kinda worked but made my drop down menu push the rest of the page down when I hovered over it. The bulleted list worked although there was a coloured background on the list when I hovered over it too.

I don't have the facility to show ye online what is happening. I have zipped up the necessary files and they are here for your inspection. I have left them in the original format that I posted originally.

Cheers.

lil_lisa

You're missing a <\li> closing tag, make sure all your tags close out and are laid out correctly.

foggers

Lil Lisa, spotted that alright, had updates the code in the zip file I posted.

Anyways, I'm fairly close to getting it working now. The menus work properly and the lists after the menu part look ok now except for whn you hover over them. They seem to be bulling the hover effect from the menu still. I have attached the code at the point I am at now. Just unzip into a dir and open index.html and mouse over the unordered list beneath the manin menu.

Forgot to mention that when I add the <div id="dropdown"></div> before/after the menu, the menu disappears altogether. The list beneath it remails but the hover issue is still there.

Thanks.

louie

In the global.css file delete all the css style that starts wih #menu and your problem will be solved.

foggers

louie wrote: »

In the global.css file delete all the css style that starts wih #menu and your problem will be solved.

Louie,
that worked a treat. Thanks very much for your assisstance and to everyone who threw in their two cents aswell.

Cheers.