Improve company productivity with a Business Account.Sign Up

x
?
Solved

My menu disappears. Why?

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

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

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…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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…
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…

595 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