troubleshooting Question

CSS Menu Overlapping Issue

Avatar of RyansMommy
RyansMommy asked on
8 Comments1 Solution816 ViewsLast Modified:
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.


#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;
  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: " >> "; }

<ul id="main-nav">
  <li><a href="" 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>
  <li><a href="" 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>
  <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="" title="Shop Now!" id="shop"><i>Shop</i></a></li>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 8 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 8 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros