top





How can i fix this ? The sub-nav. is hiding, its on behind of the slider . Help please .
If the problem is in the CSS, please help me .
Here's my CSS code :

Code:
ul.topnav {
  list-style: none;
  padding: 0 20px;
  margin: 0;
  float: left;
  width: 968px ;
  background: #222;
  font-size: 1.2em;
  background: url(http://i53.tinypic.com/fk1r7l.gif) repeat-x;
}
ul.topnav li {
  float: left;
  margin: 0;
  padding: 0 15px 0 0;
  position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
  padding: 10px 5px;
  color: #fff;
  display: !important;
  text-decoration: none;
  float: left;
}
ul.topnav li a:hover{
  background: url(http://i51.tinypic.com/hs74w1.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
  width: 17px ;
  height: 35px;
  float: left;
  background: url(http://i55.tinypic.com/jq3hno.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
  list-style: none;
  position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
  left: 0; top: 35px;
  background: #333;
  margin: 0; padding: 0;
  display: none;
  float: left;
  width: 170px ;
  border: 1px solid #111;
}
ul.topnav li ul.subnav li{
  margin: 0; padding: 0;
  border-top: 1px solid #252525; /*--Create bevel effect--*/
  border-bottom: 1px solid #444; /*--Create bevel effect--*/
  clear: both;
  width: 170px ;
}
html ul.topnav li ul.subnav li a {
  float: left;
  width: 145px ;
  background: #333 url(http://i54.tinypic.com/2qamloo.gif) no-repeat 10px center;
  padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
  background: #222 url(http://i54.tinypic.com/2qamloo.gif) no-repeat 10px center;
}

Probably because the slider is prioir to the subnav.
Try orderning in the css with z-index
Or either give me the css of the slider to see what is the problem there

Here's my CSS in my slider

Code:
#slider {
  position:relative;
    width:578px;
    height:246px;
    margin-left:190px;
  background:url(http://i22.servimg.com/u/f22/15/42/72/40/loadin10.gif) no-repeat 50% 50%;
}
#slider img {
  position:absolute;
  top:0px;
  left:0px;
  display:none;
}
#slider a {
  border:0;
  display:block;
}

.nivo-controlNav {
  position:absolute;
  left:260px;
  bottom:-42px;
}
.nivo-controlNav a {
  display:block;
  width:22px;
  height:22px;
  background:url() no-repeat;
  text-indent:-9999px;
  border:0;
  margin-right:3px;
  float:left;
}
.nivo-controlNav a.active {
  background-position:0 -22px;
}

.nivo-directionNav a {
  display:block;
  width:30px;
  height:30px;
  background:url(http://i22.servimg.com/u/f22/16/52/61/30/arrows10.png) no-repeat;
  text-indent:-9999px;
  border:0;
}
a.nivo-nextNav {
  background-position:-30px 0;
  right:15px;
}
a.nivo-prevNav {
  left:15px;
}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
}

/* The Nivo Slider styles */
.nivoSlider {
  position:relative;
}
.nivoSlider img {
  position:absolute;
  top:0px;
  left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  margin:0;
  z-index:6;
  display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
  display:block;
  position:absolute;
  z-index:5;
  height:100%;
}
.nivo-box {
  display:block;
  position:absolute;
  z-index:5;
}
/* Caption styles */
.nivo-caption {
  position:absolute;
  left:0px;
  bottom:0px;
  background:#000;
  color:#fff;
  opacity:0.8; /* Overridden by captionOpacity setting */
  width:100%;
  z-index:8;
}
.nivo-caption p {
  padding:5px;
  margin:0;
}
.nivo-caption a {
  display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
  position:absolute;
  top:45%;
  z-index:9;
  cursor:pointer;
}
.nivo-prevNav {
  left:0px;
}
.nivo-nextNav {
  right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
  position:relative;
  z-index:9;
  cursor:pointer;
}
.nivo-controlNav a.active {
  font-weight:bold;
}

Btw, thanks in advance :-)

It's either you add the z-index class of the drop down to something higher than the slider or decrease the z-index of the slider to something less than the drop down.

I already add something like
z-index:99;

in the navigation css but still no luck .

Maybe you should try checking the source of how Gangstar did the positioning here. Wink

Can you link me to your site?
I might be able to find it better with chrome element viewer

Sure, here .
http://pinoy-forum.forumotion.net/

At the left your navigation goes all the way to the edge. At the right it stops at the content end.
Center it and make it the same width as your content.

I can't see the problem cause of this, my screen is to wide