asked on

CSS Menu Overlapping Issue

I have a css list navigation thing on my website, the problem is that each list item in my submenu is overlapping, so all five items are showing on the same line.

CSS and Markup are attached, as is a screenshot of the issue.

CSS:

#main-nav a {
  position: absolute;
  height: 45px;
  width: 100px;
  top: 131px;
  text-decoration: none;
  }

#main-nav a i { visibility: hidden; }

a#join { left: 245px; }
a#freebooks { left: 350px; }
a#company { left: 460px; }
a#contact { left: 560px; }
a#shop { left: 670px; }

ul#main-nav { font-family: sans-serif; }

ul#main-nav a
{
font-weight: bold;
text-decoration: none;
}

ul#main-nav, ul#main-nav ul, ul#main-nav li
{
margin: 0px;
padding: 0px;
list-style-type: none;
}

ul#main-nav li { float: left; }


ul#subnavlist1 { display: none; }
ul#subnavlist1 li { float: none; }

ul#subnavlist1 li a
{
padding: 0px;
margin: 0px;
}

ul#main-nav li:hover ul#subnavlist1
{
display: block;
position: absolute;
  left:245px;
  top: 10px;
font-size: 8pt;
padding-top: 5px;
}

ul#main-nav li:hover ul#subnavlist1 li a
{
  display: block;
width: 15em;
border: none;
padding: 2px;
}

ul#main-nav li:hover ul#subnavlist1 li a:before { content: " >> "; }


HTML:
<ul id="main-nav">
  <li><a href="http://usbornekidsbooks.net/join/" title="Join Usborne Books!" id="join"><i>Join</i></a>
  <ul id="subnavlist1">
   <li><a href="/earning-potential/">Earning Potential</a></li>
   <li><a href="/build-a-business/">Build a Business</a></li>
   <li><a href="/rewards/">Rewards</a></li>
   <li><a href="/start-now/">Start Now!</a></li>
  </ul>
 </li>
  <li><a href="http://usbornekidsbooks.net/free-books/" title="Earn Free Books!" id="freebooks"><i>Free Books</i></a>
  <ul id="subnavlist2">
   <li><a href="#">For Your Family</a></li>
   <li><a href="#">For Your School</a></li>
   <li><a href="#">As a Fundraiser</a></li>
   <li><a href="#">As a Charitable Contribuition</a></li>
  </ul>
 </li>
  <li><a href="/company/" title="About the Company" id="company"><i>Company</i></a></li>
  <li><a href="/contact/" title="Contact your Consultant" id="contact"><i>Contact</i></a></li>
  <li><a href="http://www.myubam.com/ecommerce/main.asp?sid=G3705&gid=95673289" title="Shop Now!" id="shop"><i>Shop</i></a></li>
</ul>

Open in new window

weirdlist.JPG

Jose-Valencia

Hello,

I am not quite sure if I do understand your problem. But here is something you can look at and decide if this is something you were looking for. When you mentioned sub-menu I understood the following.

http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.htm

Let me know if this works for you.

sandeshj

Hi,
Well if you do not want it to overlap, just remove the "position: absolute;" and it will not overlap.

wilson1000

Absolute position is needed to align it correctly (if the menu has a floating sub-menu).

I would suggest applying a line- height value on your list items (

), check to see if you have an explicite value restricting the height of the

submenu, remove any float you have on your list items as these natively act as block elements and/or

wilson1000

... Looks like HTML works here :o)

let's leave it there for now, let me know how you get on

Damien

ASKER CERTIFIED SOLUTION

wilson1000

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

RyansMommy

ASKER

Okay, the reason that the main menu is absolutely positioned by anchors is because I used the tutorial here: http://www.alistapart.com/articles/imagemap/ to make an "image map" sort of thing using css.

I am not sure how to get rid of the absolute positioning of those elements and still have each of the "buttons" work the way they're supposed to.

My actual website is http://www.usbornekidsbooks.net if you want to see it in action. :)

RyansMommy

ASKER

I've sort of hacked it up to fix it by adding anchors and more absolute positioning to the subnav links.

I know that's not the correct way to accomplish what I'm trying to accomplish, but my head is turning to mush.

Wilson, I'm giving you the points because your posts were the most helpful to me. :)

If you want to give a shot at figuring out how to code the image map with the drop downs without using a ton of absolute positioning, I would really appreciate it. But for now, this will do. :)

Thanks for your help!

RyansMommy

ASKER

Thanks!