PDA

View Full Version : Dropdown Menus Problem



nickHiebert
Jul 27th, 2010, 06:05 PM
Hi,

Here is the site: http://bit.ly/dnzFFe

When you rollover the nav links across the top the drop down menus appear under About, Class Info, A Typical Lesson and Media/Updates.

I just want to reposition the dropdown menus so they line up with the nav links on the top. I can't seem to move them over at all. And it's kind of driving me nuts.

Any help at all would be great thanks!

btw, I'm using Firefox.

optimus203
Jul 27th, 2010, 09:42 PM
Try this out. Edited code (listed below) to make it more symantic and changed look of menu a little. Help with code from this book (http://www.cssmastery.com/).

Just replace the code in the appropriate sections from below and should work. If you need me to post full code, let me know.



CSS
/*NAV*/

#navbar {
background: #0054A6; clear: both; height: 35px; width:100%; }

ul.nav, ul.nav ul {
margin: 0;
padding: 0;
width:100%;
list-style-type: none;
float: left;
border: 1px solid #486B02;
background-color: #8BD400;
}

ul.nav li {
float: left;
width: 10em;
text-align:center;
}

ul.nav li ul {
position: absolute;
width: 10em;
left: -999em;
margin-left: -1px;
}

.nav li:hover ul {
left: auto;
}

ul.nav a {
display: block;
color: #2B3F00;
text-decoration: none;
padding:5px;
border-right: 1px solid #486B02;
border-left: 1px solid #E4FFD3;
}

ul.nav li li a {
border-top: 1px solid #E4FFD3;
border-bottom: 1px solid #486B02;
border-left: 0;
border-right: 0;
}

ul.nav li:last-child a {
border-right: 0;
border-bottom: 0;
}

ul a:hover,
ul a:focus {
color: #E4FFD3;
background-color: #6DA203;
}


/*BODY*/


HTML
<div id="navbar">
<ul class="nav">
<li><a href="/">Home</a></li>

<li><a href="#">About</a>
<ul>
<li><a href="/the-teacher.html">The Teacher</a></li>
<li><a href="/goal-of-early-childhood-music.html">Goal</a></li>
</ul>
</li>

<li><a href="#">Class Info</a>
<ul>
<li><a href="/take-home-materials.html">Materials</a></li>
<li><a href="/class-times-and-fees.html">Times and Fees</a></li>
</ul>
</li>

<li><a href="#">A Typical Lesson</a>
<ul>
<li><a href="/a-typical-lesson-birth-to-age-4.html">Birth to Age 4</a></li>
<li><a href="/a-typical-lesson-jk-sk-grade-1.html">JK/SK/Grade 1</a></li>
</ul>
</li>

<li><a href="#">Media/Updates</a>
<ul>
<li><a href="/pictures.html">Pictures</a></li>
<li><a href="/music-downloads.html">Music Downloads</a></li>
<li><a href="http://feeds.feedburner.com/missnancymusic" onclick="window.open('http://feeds.feedburner.com/missnancymusic'); return false;">RSS</a></li>
</ul>
</li>

<li><a href="/studio-location.html">Studio Location</a></li>

<li><a class="navitem6" href="/contact.php">Contact</a></li>

</ul>
</div><!-- end navbar-->

nickHiebert
Jul 28th, 2010, 06:17 PM
Try this out. Edited code (listed below) to make it more symantic and changed look of menu a little. Help with code from this book (http://www.cssmastery.com/).

Just replace the code in the appropriate sections from below and should work. If you need me to post full code, let me know.



CSS
/*NAV*/

#navbar {
background: #0054A6; clear: both; height: 35px; width:100%; }

ul.nav, ul.nav ul {
margin: 0;
padding: 0;
width:100%;
list-style-type: none;
float: left;
border: 1px solid #486B02;
background-color: #8BD400;
}

ul.nav li {
float: left;
width: 10em;
text-align:center;
}

ul.nav li ul {
position: absolute;
width: 10em;
left: -999em;
margin-left: -1px;
}

.nav li:hover ul {
left: auto;
}

ul.nav a {
display: block;
color: #2B3F00;
text-decoration: none;
padding:5px;
border-right: 1px solid #486B02;
border-left: 1px solid #E4FFD3;
}

ul.nav li li a {
border-top: 1px solid #E4FFD3;
border-bottom: 1px solid #486B02;
border-left: 0;
border-right: 0;
}

ul.nav li:last-child a {
border-right: 0;
border-bottom: 0;
}

ul a:hover,
ul a:focus {
color: #E4FFD3;
background-color: #6DA203;
}


/*BODY*/


HTML
<div id="navbar">
<ul class="nav">
<li><a href="/">Home</a></li>

<li><a href="#">About</a>
<ul>
<li><a href="/the-teacher.html">The Teacher</a></li>
<li><a href="/goal-of-early-childhood-music.html">Goal</a></li>
</ul>
</li>

<li><a href="#">Class Info</a>
<ul>
<li><a href="/take-home-materials.html">Materials</a></li>
<li><a href="/class-times-and-fees.html">Times and Fees</a></li>
</ul>
</li>

<li><a href="#">A Typical Lesson</a>
<ul>
<li><a href="/a-typical-lesson-birth-to-age-4.html">Birth to Age 4</a></li>
<li><a href="/a-typical-lesson-jk-sk-grade-1.html">JK/SK/Grade 1</a></li>
</ul>
</li>

<li><a href="#">Media/Updates</a>
<ul>
<li><a href="/pictures.html">Pictures</a></li>
<li><a href="/music-downloads.html">Music Downloads</a></li>
<li><a href="http://feeds.feedburner.com/missnancymusic" onclick="window.open('http://feeds.feedburner.com/missnancymusic'); return false;">RSS</a></li>
</ul>
</li>

<li><a href="/studio-location.html">Studio Location</a></li>

<li><a class="navitem6" href="/contact.php">Contact</a></li>

</ul>
</div><!-- end navbar-->



Thanks I'll give that a shot.

nickHiebert
Jul 28th, 2010, 06:26 PM
Well this is in the site as well if you didn't know:

<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

Will your code effect it? That's making the drop down menus work.

SB65
Jul 28th, 2010, 07:24 PM
The sfHover is just there for IE6, which doesn't support :hover except on <a> elements. It provides a javascript solution for the absence of the :hover. The css is driving your dropdowns.

The problem with your existing css is that the <li> elements have a width of 10em defined via:


#navbar li {
float:left;
width:10em;
}

Fine, but that width is insufficient to contain the <a> element within it, which all have widths of 130px plus margins. You've then got a different class for each <a> element in the menu with an increasing left margin, I think in order to compensate for the original problem.

So, the <li> is increasingly displaced from the <a> element across the page, and so the dropdown is (increasingly) too far left, although it is correctly aligned with the <li>. Hence, if you sort out the widths, and remove all the unnecessary left margins, everything should work.

Haven't tried optimus203's code, but looks like that's trying to address the problem.

optimus203
Jul 29th, 2010, 12:46 AM
Well this is in the site as well if you didn't know:

<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

Will your code effect it? That's making the drop down menus work.

The code I gave does not utilize that Javascript at all. Its a standalone, CSS only, dropdown menu.

SB65
Jul 29th, 2010, 01:09 AM
The code I gave does not utilize that Javascript at all. Its a standalone, CSS only, dropdown menu.

Yes, but it'll still need something like that to work in IE6, if indeed the OP is concerned about IE6.

jimhill
Jul 29th, 2010, 02:18 AM
Go here for info on sfHover. http://www.htmldog.com/articles/suckerfish/dropdowns/

nickHiebert
Aug 8th, 2010, 07:05 PM
It's still not working in IE6. This the code I currently have in my css file. Regarding the drop down menus.



ul.nav, ul.nav ul {
margin: 0;
padding: 0;
width:100%;
list-style-type: none;
float: left;
border: 1px solid #486B02;
background-color: #0054A6;
}

ul.nav li {
float: left;
width: 10em;
text-align:center;
}

ul.nav li ul {
position: absolute;
width: 10em;
left: -999em;
margin-left: -1px;
}

/*ie6*/
.nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

/*ul, #nav li.sfhover ul { left: auto; }*/

#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}

/*end ie6*/
ul.nav a {
display: block;
color: #FFF;
text-decoration: none;
padding:5px;
border-right: 1px solid #486B02;
border-left: 1px solid #E4FFD3;
}

ul.nav li li a {
border-top: 1px solid #E4FFD3;
border-bottom: 1px solid #486B02;
border-left: 0;
border-right: 0;
}

ul.nav li:last-child a {
border-right: 1px solid #E4FFD3;
border-bottom: 0;
}

ul a:hover,
ul a:focus {
color: #FFF;
background-color: #339900;
}


I'm just not sure what would make it work in IE6.

Thanks.