Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.
Course Of The Month
8 days, 5 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Navigation button mouseover effect pops above nav bar
Posted on 2013-01-04
Stupid question. How do I get the blue mousever effect to display above nav bar? The nav bar div tag seems to be blocking it from going above.
html
http://nsitedesigns.com/nsitedesigns/cbrf/test.html
screenshot
http://screencast.com/t/pmCFtkT7PoI
html
http://nsitedesigns.com/nsitedesigns/cbrf/test.html
screenshot
http://screencast.com/t/pmCFtkT7PoI
[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
-
5
4
2- +1
12 Comments
Set the nav bar div to relative the other the absolute and use a the position top to set how far above you want it
Active 5 days ago
Set the nav bar div to relative the other the absolute and use a the position top to set how far above you want it
What do you mean "the other the absolute"
What do you mean "the other the absolute"
Active 5 days ago
COBOLdinnie
I did what you suggested but it didn't work. The div tag isn't letting the nav blue bar extend UP beyond the div tag, it is pushing the blue extention DOWN and the text is moving down with it. Do I need to increase the height of the div?
I did what you suggested but it didn't work. The div tag isn't letting the nav blue bar extend UP beyond the div tag, it is pushing the blue extention DOWN and the text is moving down with it. Do I need to increase the height of the div?
Yeah it looks like with that transitional doctype, it will need the height increased as well for the #nav li a:hover rule... or you could try setting line-height to a larger value.
Also try setting z-index:10 to make sure it stays on top.
Cd&
Also try setting z-index:10 to make sure it stays on top.
Cd&
Active 1 day ago
Since browsers are not using "quirks mode", the doctype is not the issue here. (Though I consider XHTML 1.0 Transitional to be fairly obsolete.)
There are two issues here. The first is that "#nav" has "overflow:hidden" which will hide the top of the links, since you want them to extend beyond the top of the bar. To keep "#nav" from collapsing to 0 height, you can float it and give it 100% width instead.
The second thing is that increasing the top padding alone will only shift the link down. If you want the top to move up to account for the increase in top padding, you need to use a negative top margin. (And to avoid problems in older versions of IE, it's best to give "position:relative" to elements with a negative margin.)
There are two issues here. The first is that "#nav" has "overflow:hidden" which will hide the top of the links, since you want them to extend beyond the top of the bar. To keep "#nav" from collapsing to 0 height, you can float it and give it 100% width instead.
The second thing is that increasing the top padding alone will only shift the link down. If you want the top to move up to account for the increase in top padding, you need to use a negative top margin. (And to avoid problems in older versions of IE, it's best to give "position:relative" to elements with a negative margin.)
#nav li a {
color:#fff;
font-weight:bold;
display:block;
padding:4px 18px 3px 18px;
text-decoration:none;
position: relative;
}
#nav li a:hover {
color: #fff;
background-color: #809eb2;
padding: 9px 18px 3px;
margin-top: -5px;
}
Active 5 days ago
Kravmir,
I tried your solution and it worked on the main nav bar. However, when I tried to bump it up to -8px on the margin-top for the #nav li a:hover it showed part of the main nav bar on the bottom margin. In other words, the mouseover moved up but so did the bottom of the mouseover button. Any idea how to fix that?
In addition, my drop downs now have this same effect applied, namely a large top margin. I went into #nav li:hover ul {display:block;} and put a margin-top of 0px but that didn't fix it so I took it back out.
Here is link to test document.
http://nsitedesigns.com/nsitedesigns/cbrf/test1.html
p.s. Is Dreamweaver CS4 THAT outdated that I should be worried?
I tried your solution and it worked on the main nav bar. However, when I tried to bump it up to -8px on the margin-top for the #nav li a:hover it showed part of the main nav bar on the bottom margin. In other words, the mouseover moved up but so did the bottom of the mouseover button. Any idea how to fix that?
In addition, my drop downs now have this same effect applied, namely a large top margin. I went into #nav li:hover ul {display:block;} and put a margin-top of 0px but that didn't fix it so I took it back out.
Here is link to test document.
http://nsitedesigns.com/nsitedesigns/cbrf/test1.html
p.s. Is Dreamweaver CS4 THAT outdated that I should be worried?
Active 1 day ago
To increase the negative top margin, you would need to increase the top padding as well. So in this case the padding would be "padding: 12px 18px 3px".
The margin was not given to <ul>s; it was given to <a>s. Add this new rule to your stylesheet:
The margin was not given to <ul>s; it was given to <a>s. Add this new rule to your stylesheet:
#nav li ul li a:hover {
margin-top: 0;
padding: 4px 18px 3px;
}
Active 5 days ago
Kravmir,
You stated, "... I consider XHTML 1.0 Transitional to be fairly obsolete." What would you suggest?
I will try modifying the code you recommended shortly.
You stated, "... I consider XHTML 1.0 Transitional to be fairly obsolete." What would you suggest?
I will try modifying the code you recommended shortly.
Active 1 day ago
I recommend the HTML5 doctype, regardless of how many new HTML5 features you intend to use at present.
<!DOCTYPE html>
Active 5 days ago
Thanks.
Maybe this is another question, if so, let me know.
I understand you recommend I not use the following which automatically comes up when I open a new page in Dreamweaver CS4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I don't understand what I replace? Does all this get replaced with <!DOCTYPE html>
Maybe this is another question, if so, let me know.
I understand you recommend I not use the following which automatically comes up when I open a new page in Dreamweaver CS4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I don't understand what I replace? Does all this get replaced with <!DOCTYPE html>
Featured Post
The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.
See if your editor made the list.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
- Web Development
- Ransomware
- Cybersecurity
- Security
- Monitis
- Web Servers
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property
Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page.
Reference your jQuery libraries: (CODE)
Include your new external js/jQuery file: (CODE)
Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Earn Certification
HTML5 Specialist - Certification
Free withPremium
Course of the Month8 days, 5 hours left to enroll
617 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.