Drop down menu help

I have a basic website in the works. My navigation bar looks a bit primitive, I’d like to add a drop down menu effect. I found a few pages online that show the html and styles to create such a menu, BUT…the problem I’m having is I already have a CSS file full of current styles for everything. I’m getting very confused trying to incorporate the new stuff for the new menu. Could anyone out there take a look and help me out with this??
Josh

You’re going to need to provide more information than that!

However you should be able to copy the CSS for the menu to your existing file without any problems so long as you aren’t using any classes/ids that have identical names in both your CSS and the menu CSS, all you need to do is rename any identical classes/ids for one if them in both the CSS and HTML if there is a conflict.

Do you have a link to the site?

ok, a bit more info
Here is my current html navigation:

<div id="navigation">
   <ul>
 <li><a href="homepage.html">home</a></li>
     <li><a href="painting.html">painting</a></li>
     <li><a href="drawing.html">drawing</a></li>
     <li><a href="bio.html">bio</a></li>
     <li><a href="contact.html">contact</a></li>
   </ul>
 </div> <!--end of navigation div-->

Here it is with the sub-menus I would like to add:

<div id="navigation">
  <ul>
   <li><a href="homepage.html">home</a></li>
   <li><a href="painting.html">painting</a>
 <ul>
   <li><a href="landscapes.html">landscapes</a></li>
   <li><a href="still lifes.html">still lifes</a></li>
 </ul>  
   <li><a href="drawing.html">drawing</a></li>
 <ul>
   <li><a href="figures.html">figures</a></li>
   <li><a href="others.html">others..</a></li>
 </ul>
   <li><a href="bio.html">bio</a></li>
   <li><a href="contact.html">contact</a></li>
  </ul>
 </div> <!--end of navigation div-->

What’s confusing me is the new CSS that comes with the submenus conflicts with what I’ve created so far. How do I style my new submenus to hide behind and drop down behind my current links WITHOUT re-styling everything? I thought adding class selectors would work, ex:
<ul>
<li><a href=“landscapes.html”>landscapes class=“sub” </a></li>

but i know the class is in the wrong spot, how do i do that?

Son of Suckerfish Dropdowns | HTML Dog

^^this is what i was trying to follow

I don’t have it online, I’d have to email you files in a zip for you to take a closer look

To use a class like that, it would go here:

<li><a [COLOR="Red"]class="sub"[/COLOR] href="landscapes.html">landscapes </a></li>

or perhaps better here:

<li [COLOR="Red"]class="sub"[/COLOR]><a href="landscapes.html">landscapes</a></li>

BUT, you don’t need extra classes at all. Instead, you can target those sub items in various ways, as shown below:

ul li li {}
li li {}

How do I style my new submenus to hide behind and drop down behind my current links WITHOUT re-styling everything? I thought adding class selectors would work
Hi,
Your dealing with inheritance here and you will need to override any <li> or <a> styles in the sub-UL if you want them to be different.
Regardless of whether you set a class on them or not they are still inheriting their styles.

Ralph has shown you how to target them using descendant selectors rather than classes.

To hide the sub-UL you will want to set it to position:absolute; to remove it from the normal flow (so it doesn’t push other elements around when it drops). That sub-UL is normally hidden off-screen with a large negative margin, then that margin is set to zero on li:hover ul to reveal the dropdown.

I put together some very simple examples a while back that show the basic concept.

Simple Dropdown #1
Simple Dropdown #2

If you view the page source you will find the complete code. :wink:

EDIT:
I will also point out that you have some errors in your nesting. You did not close the first parent LI and the second sub-UL was not nested at all, only a LI can be the direct descendant of an UL. You can also hook that “navigation” ID directly to the UL and loose the div.

[COLOR=Blue]<ul id="navigation">[/COLOR]
    <li><a href="homepage.html">home</a></li>
    [COLOR=Blue]<li>[/COLOR]<a href="painting.html">painting</a>
        <ul>
            <li><a href="landscapes.html">landscapes</a></li>
            <li><a href="still lifes.html">still lifes</a></li>
        </ul>
    [COLOR=Blue]</li>[/COLOR]
    [COLOR=Blue]<li>[/COLOR]<a href="drawing.html">drawing</a>
        <ul>
            <li><a href="figures.html">figures</a></li>
            <li><a href="others.html">others..</a></li>
        </ul>
    [COLOR=Blue]</li>[/COLOR]
    <li><a href="bio.html">bio</a></li>
    <li><a href="contact.html">contact</a></li>
</ul>

I don’t know why but I’m not getting a dropdown effect. I copied the CSS from the first ex, word for word, into a brand new separate CSS file for a ‘Test’ site. Everything else is identical, the nav bar and everything. Just no drop down.

I copied the CSS from the first ex, word for word, into a brand new separate CSS file for a ‘Test’ site

The CSS would have to match up with the html, you can’t expect CSS to work on html if the element names are not the same.

Please post your revised css/html so we can see what’s going on.

OK for starters, it’s most likely you don’t need the extra div.

your HTML is not structured properly , it shoudl be as follows:


<ul id="navigation">
	<li><a href="homepage.html">home</a></li>
	<li><a href="painting.html">painting</a>
		<ul>
			<li><a href="landscapes.html">landscapes</a></li>
			<li><a href="still lifes.html">still lifes</a></li>
		</ul>
	</li>
	<li><a href="drawing.html">drawing</a>
		<ul>
			<li><a href="figures.html">figures</a></li>
			<li><a href="others.html">others..</a></li>
		</ul>
	</li>
	<li><a href="bio.html">bio</a></li>
	<li><a href="contact.html">contact</a></li>
</ul>

Basically, ,a sub menu is a UL within an LI… so you have to make sure it’s coded that way.
<UL><LI>menu<UL><LI>sub</LI><LI>sub</LI></UL></LI></UL>. Which I believe was what Razur was trying to point out in his Edit

once you fix it either CSS method should work.

Which I believe was what Rayzur was trying to point out in his Edit
That’s right, I took the OP’s html from post#4 and made the corrections in blue.

I copied the CSS from the first ex, word for word…
The point I was trying to make in my last post is that you would have needed to rework your html also if you copied the styles from my 1st example exactly as they were.

In that example I do not have my UL nested in a div, my ID is hooked to the UL itself. Furthermore my ID is named #nav rather than #navigation. That’s why I said you couldn’t expect it to work without making adjustments to the html also.

If you still need help you will need to post your complete nav code (css & html) as there is nothing more we can do without seeing it. :wink:

ok, little late in responding, but here is my HTML:

<body>
<ul id=“nav”>
<li><a href=“homepage.html”>home</a></li>
<li><a href=“painting.html”>painting</a>
<ul>
<li><a href=“landscapes.html”>landscapes</a></li>
</ul>
</li>
<li><a href=“drawing.html”>drawing</a>
<ul>
<li><a href=“figures.html”>figures</a></li>
</ul>
</li>
<li><a href=“bio.html”>bio</a></li>
</ul>
</body>
</html>

And as I said, the CSS is identical to the example(except a change in color but that’s it)

You don’t need CSS nearly as complicated as that! Look at http://nekkidblogger.com/2011/ultra-efficient-css-html-drop-menu-nekkidblogger-menu/

That’s a four level menu with five short structural rules!!

It’s not a very accessible menu, though.

I’m not sure I understand what you mean by that?

In that case, you really shouldn’t making any suggestions for CSS drop-down menus.

A well-designed drop menu will not depend on the user having a mouse and/or eyes. So it should ideally work with keyboard navigation, and also be accessible to someone using an assistive device such as a screen reader.