Navigation Menu - Making Drop Down Links Invisible & Visible On Mouseover? - CSS-Tricks

This topic is empty.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts

July 14, 2012 at 9:23 pm #38915

Participant

I’ve modified a navigation menu and added links for the drop down. How do I hide them and make them visible on mouseover?

#navigation {

width: 100%;

margin-left:-10px;

height: 30px;

position: relative;

padding: 5px;

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

text-transform: uppercase;

font-size: 22px;

background-color: #2864c4;

border-top: 2px solid #ffffff;

border-bottom: 2px solid #ffffff;

}



#navigation ul {

padding: 0;

list-style: none;

}



#navigation li {

list-style: none;

display: block;

float: left;

width: 160px;

height: 28px;

padding-top:3px;

text-align: center;

border-left: 1px solid #ffffff;

border-right: 1px solid #ffffff;

}



#navigation li:first-child {

border-left: 2px solid #ffffff;

margin-left: 25%;

}



#navigation li:last-child {

border-right: 2px solid #ffffff;

margin-right:-30%;

}



#navigation li a {

color: #fff;

text-decoration: none;

display:block;

width:160px;

margin-top:-1px;

}



/*hide drop down links?*/

#navigation li ul {

visibility: hidden;

position: absolute;

}



#navigation li a:hover {

background-color:#000000;

border: 0;

visibility: visible;/*display drop down links?*/

}



#navigation li .active {

color: #066;

}

July 14, 2012 at 9:42 pm #106107

Senff

Participant

Technically, what you’re doing is almost OK, except that you shouldn’t make them invisible by default and then visible on hover. Any item set to invisible still takes up space on the page, and can be interacted with — it just can’t be seen. When you set it to display:none, it will not be part of the page. It’s not there, and it can’t be interacted with (even though it’s still in the code).

Give the #menu li ul the property display:none; by default and then give it display:block when you hover over the LI that contains it. So, in essence:

#menu li ul {

display:none;

}



#menu li:hover ul {

display:block;

}

Of course there's a lot more to it, but that's basically the idea.

Instead of display:none; and display:block;, some people position the submenu UL absolutely -- about -99999px by default (so it's off-screen) and then at 0 on hover.

July 14, 2012 at 9:51 pm #106109

MBM

Participant

Thanks. I initially pasted code from the wrong menu. I’ve make the changes you suggested but the drop down items are still visible.

#navigation {

width: 100%;

margin-left:-10px;

height: 30px;

position: relative;

padding: 5px;

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

text-transform: uppercase;

font-size: 22px;

background-color: #2864c4;

border-top: 2px solid #ffffff;

border-bottom: 2px solid #ffffff;

}



#navigation ul {

padding: 0;

list-style: none;

}



#navigation li {

list-style: none;

display: block;

float: left;

width: 160px;

height: 28px;

padding-top:3px;

text-align: center;

border-left: 1px solid #ffffff;

border-right: 1px solid #ffffff;

}



#navigation li:first-child {

border-left: 2px solid #ffffff;

margin-left: 25%;

}



#navigation li:last-child {

border-right: 2px solid #ffffff;

margin-right:-30%;

}



#navigation li a {

color: #fff;

text-decoration: none;

display:block;

width:160px;

margin-top:-1px;

}



/*hide drop down links?*/

#navigation li ul {

display:none;

position: absolute;

}



#navigation li a:hover {

background-color:#000000;

border: 0;

}



#menu li:hover ul {

display:block;

}



#navigation li .active {

color: #066;

}

July 14, 2012 at 9:59 pm #106112

Senff

Participant

Would need to see the HTML code of the menu as well. You’re using this structure, it should be fine:



Item 1


Item 2



Item 2a


Item 2b


Item 2c






Item 3

Make sure that the submenu UL is wrapped within the LI (closing the LI before the submenu starts is a common mistake).

July 14, 2012 at 10:22 pm #106114

MBM

Participant

http://mbmitservices.co.uk/MMA/index.html





Home


Clubs


Events


Fighter Profiles


Videos

BJJ


Judo


MMA


Techniques




Contact

I had the wrong name in the tag :



#menu li:hover ul {

Should be :



#navigation li:hover ul {

It’s working now but the styling is a mess.



/*drop down styling*/

#navigation li:hover ul {

display:block;

background-color: #2864c4;

width:160px;

margin-left:0px;

padding:0px;

float:left;

}

Any idea why the first link in the drop down isn’t in line with the other links? How do I position the links? Adjusting the margins isn’t working.

July 14, 2012 at 10:35 pm #106116

Senff

Participant

That’s because of there’s a left margin of 25% on #navigation li:first-child.

Easy to override that for your submenu with:

#navigation li ul li:first-child {

margin-left: 0;

}

July 14, 2012 at 11:16 pm #106120

MBM

Participant

The problem is I’m using a full width menu. I added margin-left: 25% to position the links in line with the header. If I remove margin-left 25% the links float to the left. When I add a bottom border to the last child element the border bleeds over to the next link (contact), it’s 2 pixels instead of 1. I also want a 2 pixel left and right border on all drop down links. I’ve uploaded the code so you can see for yourself. I’m getting coding dyslexia!

http://mbmitservices.co.uk/MMA/index.html

/*Navigation styling */

#navigation {

width: 100%;

margin-left:-10px;

height: 30px;

position: relative;

padding: 5px;

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

text-transform: uppercase;

font-size: 22px;

background-color: #2864c4;

border-top: 2px solid #ffffff;

border-bottom: 2px solid #ffffff;

}



#navigation ul {

padding: 0;

list-style: none;

}



#navigation li {

list-style: none;

display: block;

float: left;

width: 160px;

height: 28px;

padding-top:3px;

text-align: center;

background-color: #2864c4;

border-left: 1px solid #ffffff;

border-right: 1px solid #ffffff;

}



#navigation li:first-child {

margin-top:3px;

/*margin-left: 25%;*/

}





#navigation li:last-child {

border-bottom:2px solid #ffffff;

padding-bottom:3px;

}



#navigation li a {

color: #fff;

text-decoration: none;

display:block;

width:160px;

margin-top:-1px;

}



/*hide drop down links*/

#navigation li ul {

display:none;

position: absolute;

}



#navigation li a:hover {

background-color:#000000;

border: 0;

}



/*drop down styling*/

#navigation li:hover ul {

position:aboslute;

display:block;

width:160px;

margin-left:-1px;

padding-top:5px;

float:left;

text-align:left;

border:0;

}

July 15, 2012 at 3:08 pm #106153

MBM

Participant

#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;

}

Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The forum ‘CSS’ is closed to new topics and replies.