hankknight
asked on
My CSS menu is JUMPY on child items
Hello.
I use a very nice and simple CSS drop-down menu system.
I have two versions, and both are buggy
The first one "jumps" when you hover over child-items.
The second one does NOT jump, but it displays a thick white left border on all child items.
I want my menu to look like the first, but I don't want it to be jumpy!
I will post the two menus below (as comments)
Any ideas?
Thanks!
I use a very nice and simple CSS drop-down menu system.
I have two versions, and both are buggy
The first one "jumps" when you hover over child-items.
The second one does NOT jump, but it displays a thick white left border on all child items.
I want my menu to look like the first, but I don't want it to be jumpy!
I will post the two menus below (as comments)
Any ideas?
Thanks!
ASKER
This one has an annoying white left border on the left.
(thanks, MP)
https://www.experts-exchange.com/questions/21895508/Dropdown-links-jump-on-hover.html
-------------------------- ---------- ---------- ---------- ------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en">
<head>
<title>Suckerfish Dropdown</title>
<style type="text/css">
body {
font: 78%/1.5 arial, helvetica, serif;
background: white;
text-align: center;
padding: 0;
margin: 2em;
}
#container {
width: 64em;
background: #F4ECD9;
text-align: left;
border: 1px solid #eda;
margin: 0 auto;
}
#nav, #nav ul {
float: left;
width: 64em;
list-style: none;
line-height: 1;
background: white;
font-weight: bold;
padding: 0;
border: solid #eda;
border-width: 1px 0;
margin: 0 0 1em 0;
}
#nav a {
display: block;
width: 10em;
w\idth: 6em;
color: #7C6240;
text-decoration: none;
padding: 0.25em 2em;
}
#nav a.daddy {
background: url(images/rightarrow2.gif ) center right no-repeat;
}
#nav li {
float: left;
padding: 0;
width: 10em;
cursor: default;
margin-bottom: .15em;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
border-width: 1px 1px 0 0;
border-color: #7D6340;
margin: 0 55px 0 0;
padding-bottom:9px;;
background: url(images/ddbg3.gif) bottom left no-repeat;
}
#nav li li {
padding-right: 1em;
width: 13em
}
#nav li ul a {
width: 13em;
w\idth: 9em;
border: 5px solid #fff;
border-width: 0 0 0 5px;
}
#nav li ul ul {
margin: -1.75em 0 0 14em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li li a:hover {
padding-left: -7px;
border: 15px solid #7d6040;
border-width: 0 0 0 5px;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
background: #eda;
}
#content {
clear: left;
}
#content a {
color: #7C6240;
}
#content a:hover {
text-decoration: none;
}
</style>
<script type="text/javascript"><!- -//--><![C DATA[//><! --
sfHover = function() {
var sfEls = document.getElementById("n av").getEl ementsByTa gName("LI" );
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=funct ion() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=functi on() {
this.className=this.classN ame.replac e(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload ", sfHover);
//--><!]]></script>
</head>
<body>
<h1><img src="images/logo2.gif" width="262" height="103" alt="the Suckerfish" alt="zzzzz" /></h1>
<div id="container">
<hr />
<p id="smurf">Welcome to the universe of Perciformes - perch-like fish that include the world famous <strong>Suckerfish</strong ></p>
<ul id="nav">
<li><a href="home.html" title="Lorum Ispum is an independent management..." >Home</a></li>
<li><a href="about_us.html" title="Lorum Ispum is a Consultant with 18 years of..." class="daddy">About Us</a>
<ul>
<li><a href="business_philosophy. html" title="A reputation built upon an approach to..." >Business Philosophy</a></li>
<li><a href="commitment.html" title="To offer a timely service to all..." class="daddy">Commitment</ a>
<ul>
<li><a href="value_proposition.ht ml" title="The following benefits are available to clients :..." >Value Proposition</a></li>
<li><a href="what_to_expect.html" title="1) Independent product having access..." >What to Expect</a></li>
</ul></li>
<li><a href="code_of_ethics.html" title="In our ever-changings..." class="daddy">Code of Ethics</a>
<ul>
<li><a href="law.html" title="What the law..." >The Law</a></li>
</ul></li>
</ul></li>
<li><a href="planning.html" title="Remember, time can be your ally..." class="daddy">Planning</a>
<ul>
<li><a href="your_net.html" title="Print this by using..." >Your Net</a></li>
</ul></li>
<li><a href="service_-26_products .html" title="It could be said that: Show clients..." class="daddy">Products</a>
<ul>
<li><a href="professional_service s.html" title="If you are..." class="daddy">Services</a>
<ul>
<li><a href="process.html" title="Evaluate, assess, adjust, set goals, construct,..." >Process</a></li>
</ul></li>
<li><a href="oplan.html" title="Your company cornerstone of your future..." class="daddy">Planning</a>
<ul>
<li><a href="checklist.html" title="Not an event. It can't..." >Checklist</a></li>
</ul></li>
<li><a href="solutions.html" title="Lorum Ispum is an Account Representative ..." >Solutions</a></li>
</ul></li>
<li><a href="news_-26_seminars.ht ml" title="Public and Corporate..." class="daddy">Seminars</a>
<ul>
<li><a href="publications.html" title="Winter 2006 ..." class="daddy">Publications </a>
<ul>
<li><a href="books.html" title="Read ..." >Books</a></li>
</ul></li>
</ul></li>
<li><a href="contact_us.html" title="Do you have a customized plan that..." >Contact</a></li>
</ul>
<div id="content">
<p>Hello. You have found an example page for <strong>Suckerfish Dropdowns</strong>. Under the hood you will find some nice structured HTML, a smattering of CSS and a teensy bit of JavaScript (that's just 12 lines of it). It's lightweight, it's accessible, it's cross-compatible.</p>
<p>Suckerfish Dropdowns are brought to you by <a href="/ptg/">Patrick Griffiths</a>, <a href="http://www.danwebb.net/">Dan Webb</a> and the letter C. To find out more about Suckerfish Dropdowns, check out the <a href="/articles/suckerfish /dropdowns /">article in HTML Dog</a>. To find out more about perch-like fishes, <a href="http://www.google.com/search?q=perciformes">give Google a try</a>.</p>
<p>Something else that might (possibly) be of interest (maybe) is that this page has an <a href="http://www.alistapart.com/articles/elastic/">elastic layout</a>. Try increasing your browser's text size setting and watch that layout grow! It's just like those toys that expand when you put them in water. Only without the water. And with more HTML. And CSS. Oh forget it. It's not really like them at all.</p>
</div>
</div>
</body>
</html>
(thanks, MP)
https://www.experts-exchange.com/questions/21895508/Dropdown-links-jump-on-hover.html
--------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en">
<head>
<title>Suckerfish Dropdown</title>
<style type="text/css">
body {
font: 78%/1.5 arial, helvetica, serif;
background: white;
text-align: center;
padding: 0;
margin: 2em;
}
#container {
width: 64em;
background: #F4ECD9;
text-align: left;
border: 1px solid #eda;
margin: 0 auto;
}
#nav, #nav ul {
float: left;
width: 64em;
list-style: none;
line-height: 1;
background: white;
font-weight: bold;
padding: 0;
border: solid #eda;
border-width: 1px 0;
margin: 0 0 1em 0;
}
#nav a {
display: block;
width: 10em;
w\idth: 6em;
color: #7C6240;
text-decoration: none;
padding: 0.25em 2em;
}
#nav a.daddy {
background: url(images/rightarrow2.gif
}
#nav li {
float: left;
padding: 0;
width: 10em;
cursor: default;
margin-bottom: .15em;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
border-width: 1px 1px 0 0;
border-color: #7D6340;
margin: 0 55px 0 0;
padding-bottom:9px;;
background: url(images/ddbg3.gif) bottom left no-repeat;
}
#nav li li {
padding-right: 1em;
width: 13em
}
#nav li ul a {
width: 13em;
w\idth: 9em;
border: 5px solid #fff;
border-width: 0 0 0 5px;
}
#nav li ul ul {
margin: -1.75em 0 0 14em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li li a:hover {
padding-left: -7px;
border: 15px solid #7d6040;
border-width: 0 0 0 5px;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
background: #eda;
}
#content {
clear: left;
}
#content a {
color: #7C6240;
}
#content a:hover {
text-decoration: none;
}
</style>
<script type="text/javascript"><!-
sfHover = function() {
var sfEls = document.getElementById("n
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=funct
this.className+=" sfhover";
}
sfEls[i].onmouseout=functi
this.className=this.classN
}
}
}
if (window.attachEvent) window.attachEvent("onload
//--><!]]></script>
</head>
<body>
<h1><img src="images/logo2.gif" width="262" height="103" alt="the Suckerfish" alt="zzzzz" /></h1>
<div id="container">
<hr />
<p id="smurf">Welcome to the universe of Perciformes - perch-like fish that include the world famous <strong>Suckerfish</strong
<ul id="nav">
<li><a href="home.html" title="Lorum Ispum is an independent management..." >Home</a></li>
<li><a href="about_us.html" title="Lorum Ispum is a Consultant with 18 years of..." class="daddy">About Us</a>
<ul>
<li><a href="business_philosophy.
<li><a href="commitment.html" title="To offer a timely service to all..." class="daddy">Commitment</
<ul>
<li><a href="value_proposition.ht
<li><a href="what_to_expect.html"
</ul></li>
<li><a href="code_of_ethics.html"
<ul>
<li><a href="law.html" title="What the law..." >The Law</a></li>
</ul></li>
</ul></li>
<li><a href="planning.html" title="Remember, time can be your ally..." class="daddy">Planning</a>
<ul>
<li><a href="your_net.html" title="Print this by using..." >Your Net</a></li>
</ul></li>
<li><a href="service_-26_products
<ul>
<li><a href="professional_service
<ul>
<li><a href="process.html" title="Evaluate, assess, adjust, set goals, construct,..." >Process</a></li>
</ul></li>
<li><a href="oplan.html" title="Your company cornerstone of your future..." class="daddy">Planning</a>
<ul>
<li><a href="checklist.html" title="Not an event. It can't..." >Checklist</a></li>
</ul></li>
<li><a href="solutions.html" title="Lorum Ispum is an Account Representative ..." >Solutions</a></li>
</ul></li>
<li><a href="news_-26_seminars.ht
<ul>
<li><a href="publications.html" title="Winter 2006 ..." class="daddy">Publications
<ul>
<li><a href="books.html" title="Read ..." >Books</a></li>
</ul></li>
</ul></li>
<li><a href="contact_us.html" title="Do you have a customized plan that..." >Contact</a></li>
</ul>
<div id="content">
<p>Hello. You have found an example page for <strong>Suckerfish Dropdowns</strong>. Under the hood you will find some nice structured HTML, a smattering of CSS and a teensy bit of JavaScript (that's just 12 lines of it). It's lightweight, it's accessible, it's cross-compatible.</p>
<p>Suckerfish Dropdowns are brought to you by <a href="/ptg/">Patrick Griffiths</a>, <a href="http://www.danwebb.net/">Dan Webb</a> and the letter C. To find out more about Suckerfish Dropdowns, check out the <a href="/articles/suckerfish
<p>Something else that might (possibly) be of interest (maybe) is that this page has an <a href="http://www.alistapart.com/articles/elastic/">elastic layout</a>. Try increasing your browser's text size setting and watch that layout grow! It's just like those toys that expand when you put them in water. Only without the water. And with more HTML. And CSS. Oh forget it. It's not really like them at all.</p>
</div>
</div>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for the interesting link! It is very cool, but I have to use that menu, because I can ONLY change the CSS code in this case NOT the HTML code at all.
:-)
Thank You,
_____Jags.
Thank You,
_____Jags.
ASKER
--------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en">
<head>
<title>Suckerfish Dropdown</title>
<style type="text/css">
body {
font: 78%/1.5 arial, helvetica, serif;
background: white;
text-align: center;
padding: 0;
margin: 2em;
}
#container {
width: 64em;
background: #F4ECD9;
text-align: left;
border: 1px solid #eda;
margin: 0 auto;
}
#nav, #nav ul {
float: left;
width: 64em;
list-style: none;
line-height: 1;
background: white;
font-weight: bold;
padding: 0;
border: solid #eda;
border-width: 1px 0;
margin: 0 0 1em 0;
}
#nav a {
display: block;
width: 10em;
w\idth: 6em;
color: #7C6240;
text-decoration: none;
padding: 0.25em 2em;
}
#nav a.daddy {
background: url(images/rightarrow2.gif
}
#nav li {
float: left;
padding: 0;
width: 10em;
cursor: default;
margin-bottom: .15em;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
border-width: 1px 1px 0 0;
border-color: #7D6340;
margin: 0 55px 0 0;
padding-bottom:9px;;
background: url(images/ddbg3.gif) bottom left no-repeat;
}
#nav li li {
padding-right: 1em;
width: 13em
}
#nav li ul a {
width: 13em;
w\idth: 9em;
}
#nav li ul ul {
margin: -1.75em 0 0 14em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li li a:hover {
padding-left: -7px;
border: 15px solid #7d6040;
border-width: 0 0 0 5px;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
background: #eda;
}
#content {
clear: left;
}
#content a {
color: #7C6240;
}
#content a:hover {
text-decoration: none;
}
</style>
<script type="text/javascript"><!-
sfHover = function() {
var sfEls = document.getElementById("n
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=funct
this.className+=" sfhover";
}
sfEls[i].onmouseout=functi
this.className=this.classN
}
}
}
if (window.attachEvent) window.attachEvent("onload
//--><!]]></script>
</head>
<body>
<h1><img src="images/logo2.gif" width="262" height="103" alt="the Suckerfish" alt="zzzzz" /></h1>
<div id="container">
<hr />
<p id="smurf">Welcome to the universe of Perciformes - perch-like fish that include the world famous <strong>Suckerfish</strong
<ul id="nav">
<li><a href="home.html" title="Lorum Ispum is an independent management..." >Home</a></li>
<li><a href="about_us.html" title="Lorum Ispum is a Consultant with 18 years of..." class="daddy">About Us</a>
<ul>
<li><a href="business_philosophy.
<li><a href="commitment.html" title="To offer a timely service to all..." class="daddy">Commitment</
<ul>
<li><a href="value_proposition.ht
<li><a href="what_to_expect.html"
</ul></li>
<li><a href="code_of_ethics.html"
<ul>
<li><a href="law.html" title="What the law..." >The Law</a></li>
</ul></li>
</ul></li>
<li><a href="planning.html" title="Remember, time can be your ally..." class="daddy">Planning</a>
<ul>
<li><a href="your_net.html" title="Print this by using..." >Your Net</a></li>
</ul></li>
<li><a href="service_-26_products
<ul>
<li><a href="professional_service
<ul>
<li><a href="process.html" title="Evaluate, assess, adjust, set goals, construct,..." >Process</a></li>
</ul></li>
<li><a href="oplan.html" title="Your company cornerstone of your future..." class="daddy">Planning</a>
<ul>
<li><a href="checklist.html" title="Not an event. It can't..." >Checklist</a></li>
</ul></li>
<li><a href="solutions.html" title="Lorum Ispum is an Account Representative ..." >Solutions</a></li>
</ul></li>
<li><a href="news_-26_seminars.ht
<ul>
<li><a href="publications.html" title="Winter 2006 ..." class="daddy">Publications
<ul>
<li><a href="books.html" title="Read ..." >Books</a></li>
</ul></li>
</ul></li>
<li><a href="contact_us.html" title="Do you have a customized plan that..." >Contact</a></li>
</ul>
<div id="content">
<p>Hello. You have found an example page for <strong>Suckerfish Dropdowns</strong>. Under the hood you will find some nice structured HTML, a smattering of CSS and a teensy bit of JavaScript (that's just 12 lines of it). It's lightweight, it's accessible, it's cross-compatible.</p>
<p>Suckerfish Dropdowns are brought to you by <a href="/ptg/">Patrick Griffiths</a>, <a href="http://www.danwebb.net/">Dan Webb</a> and the letter C. To find out more about Suckerfish Dropdowns, check out the <a href="/articles/suckerfish
<p>Something else that might (possibly) be of interest (maybe) is that this page has an <a href="http://www.alistapart.com/articles/elastic/">elastic layout</a>. Try increasing your browser's text size setting and watch that layout grow! It's just like those toys that expand when you put them in water. Only without the water. And with more HTML. And CSS. Oh forget it. It's not really like them at all.</p>
</div>
</div>
</body>
</html>