Solved

My menu disappears. Why?

Posted on 2015-01-16
3
95 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
A simple Float not working. 5 25
Bottom border change 5 18
css selector 1 21
Easy css question moving title underneath an image 4 16
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

820 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