No replies
neojohan
neojohan's picture
Offline
newbie
Last seen: 10 years 23 weeks ago
Timezone: GMT+8
Joined: 2009-02-09
Posts: 3
Points: 2

Here is the link of the site I'm working right now. http://www.mensjewelrysite.com/

The drop-down at the About tab displays underneath the slideshow. I've tried removing the slide show still it display underneath.

Here is the html code

<ul>
        <li><a href="index.html" title="Home">home</a></li>
        <li class="alt"><a href="about.html" title="About">about</a>
          <ul>
            <li><a href="about.html" title="About">about</a></li>
            <li><a href="product.html" title="Product Lines">product lines</a></li>
            <li><a href="artwork_design.html" title="Artwork and Design">artwork and design</a></li>
            <li><a href="affiliate_program.html" title="Affiliate Program">affiliate program</a></li>
            <li><a href="process.html" title="Process">process</a></li>
            <li><a href="faqs.html" title="FAQs">FAQs</a></li>
          </ul>
        </li>
        <li><a href="class_ring.html" title="Class Ring">class ring</a></li>
        <li class="alt"><a href="championship_ring.html" title="Championship Ring">championship ring</a></li>
        <li><a href="military_ring.html" title="Military Ring">military ring</a></li>
        <li class="alt"><a href="fashion_jewelry.html" title="Fashion Jewelry">fashion jewelry</a></li>
        <li><a href="medical_jewelry.html" title="Medical Jewelry">medical jewelry</a></li>
        <li class="alt"><a href="mens_jewelry.html" title="Men's Jewelry">men's jewelry</a></li>
        <li><a href="puzzle_ring.html" title="Puzzle Ring">puzzle ring</a></li>
        <li class="alt"><a href="skull_ring.html" title="Skull Ring">skull ring</a></li>
        <li><a href="spinning_ring.html" title="Spinning Ring">spinning ring</a></li>
        <li class="alt"><a href="stamped_rings.html" title="Stamped Ring">stamped ring</a></li>
        <li><a href="wedding_rings.html" title="Wedding Ring">wedding ring</a></li>
        <li class="alt"><a href="contact.html" title="Contact Us">contact us</a></li>
      </ul>

The CSS

#nav ul {
	margin: 3px 0 10px;
}
#nav li {
	border-bottom: 1px solid #d9d9d9;
	position: relative;
}
#nav li:first-child {
	border-top: 1px solid #d9d9d9;
}
#nav li.sub {
	padding-left: 10px;
}
#nav li a {
	background: #ede6c8 url(../images/nav_bg.gif) no-repeat 174px center;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	color: #080b0d;
	display: inline-block;
	font: normal 0.75em Verdana;
	height: 15px;
	padding: 5px 13px;
	text-decoration: none;
	text-transform: capitalize;
	width: 169px;
}
* html #nav li a {
	margin-bottom: -4px;
}
*:first-child+html #nav li a {
	margin-bottom: -4px;
}
#nav li.alt a {
	background-color: #fff;
}
#nav li.alt a:hover, #nav li a:hover, #nav li a.active, #nav li:hover a {
	background: url(../images/nav_ro.gif) no-repeat 0 0;
	color: #fff;
}
#nav li:hover li a {
	background: #fff url(../images/nav_bg.gif) no-repeat 174px center;
	color: #080b0d;
}
#nav ul ul {
	position: absolute;
	top: -1px;
	left: 195px;
	z-index: 200;
	margin-top: 0;
}
* html #nav ul ul {
	position: relative;
	left: 195px;
	top: 0;
	z-index: 200;
}
#nav ul ul li {
	border-left: 1px solid #d9d9d9;
	border-right: 1px solid #d9d9d9;
	position: relative;
}

And the JavaScript I used,

function mainmenu(){
$(" #nav ul ul ").css({display: "none"}); // Opera Fix
$(" #nav ul li").hover(function(){
		$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(0);
		},function(){
		$(this).find('ul:first').css({visibility: "hidden"});
		});
}
$(document).ready(function(){					
	mainmenu();
});