• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 216
  • Last Modified:

Navigation Bar Problem with CSS

I have a simple navigation bar with a basic dropdown menu. My issue is when the drop down menu pops down it moves all of the text on the page.  How do I get this text to stay and the drop down menu to overlap my data.  Also if I added more drop down menus to the other links I would need those to do the same. You can see the site here: http://doeringdesign.com/MrBid2/ and have the files attached. The PNG files (fire, water, wind) go into a folder called images, if needed.

Thanks in advance!
style.css
0
sparker1970
Asked:
sparker1970
1 Solution
 
Julian HansenCommented:
Add position absolute to line 93 of styles.css
#menu ul ul {
  overflow: hidden;
  padding: 0 45px;
  position:  absolute;
}

Open in new window

0
 
RartemassService Desk AnalystCommented:
It looks fine to me in Chrome and IE 9.

To ensure everything is OK you can do as julianH suggests, and also add a z-index value. If you use a high number such as 100 you have plenty of space beneath that for all other elements. This only works on positioned elements so to have the correct layout you will need to add positioning to any element that the menu overlaps.

http://www.w3schools.com/cssref/pr_pos_z-index.asp
0
 
GaryCommented:
I've requested that this question be closed as follows:

Accepted answer: 500 points for julianH's comment #a40022647

for the following reason:

This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0
 
sparker1970Author Commented:
I apologize for the time it took me to respond. I have been out of the office for a few weeks and just getting caught up on a number of issues. This solution worked perfectly and I was able to use the code you posted almost verbatim.
0
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

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now