Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

My menu disappears. Why?

Posted on 2015-01-16
3
Medium Priority
?
100 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 2000 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Suggested Courses

972 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