Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

My menu disappears. Why?

Posted on 2015-01-16
3
Medium Priority
?
99 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Enroll in September's Course of the Month

This month’s featured course covers 16 hours of training in installation, management, and deployment of VMware vSphere virtualization environments. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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 Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
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

715 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