Re: Navigation Menu – Making Drop Down Links Invisible & Visible On Mouseover?

[MBM]

#navwrap created all sorts of problems but I managed to resolve the full width positioning issue via :

http://www.css-lab.com/demos/nav/inline-block/x-brwsr-node-fix.html

#navigation {

display:table;/* Webkit Fix */

width:100%;/* set width to stop FF from wrapping li's*/

text-align:center; /* center list items*/

word-spacing:-0.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/

margin-left:-10px;

list-style:none;

background:#2864c4;

font-family: 'PT Sans Narrow', sans-serif;

text-transform: uppercase;

font-size: 22px;

border-top: 2px solid #ffffff;

border-bottom: 2px solid #ffffff;

}



#navigation li {

list-style: none;

width: 160px;

height: 28px;

padding-top:3px;

text-align: center;

background-color: #2864c4;

border-left: 1px solid #ffffff;

border-right: 1px solid #ffffff;

display:-moz-inline-box; /* FF2 and K-Meleon */

display:inline-block;

word-spacing:0; /* reset from parent ul*/

}

I have one minor issue. I have 7 drop down links. When the slider scrolls to the 3rd slide, a youtube video, the 7th link isn’t visible even thought I have set the z index to 2.

#navigation li:hover ul {

position:aboslute;

display:block;

width:160px;

margin-left:-1px;

padding-top:3px;

float:left;

text-align:left;

border-bottom:2px solid #ffffff;

z-index:2;

}