Solved

My menu disappears. Why?

Posted on 2015-01-16
3
89 Views
Last Modified: 2015-01-16
The attached graphic shows you what I've got. It seems like I had this figured out at one point, but I forget now.

Bottom line, I need to move my "list of links" down 12px. When I do that, I get what I need aesthetically, but my menu disappears when I do that.

Here's my CSS:

.navcontainer {
margin:auto;
width:1300px;
height:29px;
position:relative;
z-index:6;
}

.navcontainer ul {
position: absolute;
padding:0;
margin: 0px;
list-style-type:none;

}

/*here's my list characteristics as far how things are displayed and how they're "floated" */
.navcontainer ul li {
position: relative;
display: block;
float: left;
margin-left:35px;
z-index:10;
}

.navcontainer ul li a {
text-decoration: none;
display: block;
padding-right: 0px;
}

/* this command tells my li's within the first tier of ul's to bust out with a pulldown menu */
.navcontainer ul li:hover > ul 
{
display: block;
}

/* now we're getting jiggy with it by establishing the rules for the actual pulldown menu */
.navcontainer ul ul {
display: none;
background: none;
margin-top: 0px;
padding-top: 0;
width: 225px;
position: absolute;
background-color: #ffffff;
border-style:solid;
border-width: thin;
border-color:#cccccc;
line-height:35px;
height:auto;
z-index:100;
}

Open in new window


When I change "margin-top" under ".navcontainer ul ul," I get what I need, but the menu itself disappears when I go to mouse over the "Alabama and Georgia" link.

How can I move my menu down and still be able to click on the links?
menu-progblem.jpg
0
Comment
Question by:brucegust
  • 2
3 Comments
 
LVL 2

Accepted Solution

by:
Elxn earned 500 total points
ID: 40553557
Its hard to tell without seeing the URL of your page.  But maybe try:
.navcontainer ul ul {
..code...
}
.navcontainer ul ul:hover {
      display: block;
}

You might need to put that hover code under your first ul ul declaration, as i did.  And of course just leave your code the same for the first ul ul style.  I just put "..code..." there because i was too lazy to put your actual code in there.  :)
0
 

Author Comment

by:brucegust
ID: 40553733
Elxn! I figured it out!

The reason my stuff was disappearing is because the height of the link / button area that triggered the display of the menu was only 12 px high. When I adjusted the top margin of the menu, there was now a gap between the area of the link and the menu itself. So I changed the height of the link area (not the size of the button or the link itself, just the "square footage" of the area of the link) and once I did that, all was well.

Here:

a.regions {
display:inline-block; /**** important ****/
margin-top:2px;
margin-left:25px;
width:51px;
height:27px; /* changed this from 12 to 27 to increase the "square footage" */
background-image:url(../images/button_regions.png);
background-repeat:no-repeat;
}

...and

.navcontainer ul ul {
display: none;
background: none;
margin-top: 0px; /*changed this back to 0 and the sun was shining once again */
padding-top: 0;
width: 225px;
position: absolute;
background-color: #ffffff;
border-style:solid;
border-width: thin;
border-color:#cccccc;
line-height:35px;
height:auto;
z-index:100;
}

Thanks for you input! After I tried your solution and it didn't work, I went out to google looking for something else, that's what prompted the "square footage" idea.
0
 
LVL 2

Expert Comment

by:Elxn
ID: 40553779
That's great man.  Its always cool to figure out an issue like that.  Yeah maybe next time post a link to your page---  Sorry my suggestion didn't work but I couldn't see your HTML, etc.; so I didn't put too much time into trying to figure out the problem.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now