Hiya, I'm struggling with my CSS menu for a site. I'm working from, and trying to build on, the code at Project Seven (<!-- m --><a class="postlink" href="http://www.projectseven.com/tutorials/css_menus/list_01/index.htm">http://www.projectseven.com/tutorials/c ... /index.htm</a><!-- m -->) for CSS layouts and rollover menus. But I've come to a bit of a problem, and I'm not sure if this belongs in the CSS or Javascript forum, so my apologies if I've put it in the wrong place.
I'm trying to get a submenu to drop down when you mouseover the main menu item... Eg:
(no mouseover)
Home
Features
Competitions
(features mousedover)
Home
Features
- Link 1
- Link 2
- Link 3
Competitions
I thought I could hide the submenus by setting display: none; and then somehow change the submenu's display to inline when the mouse goes over the features item. The display: none; works fine, but is the latter part possible in CSS, or is that where the javascript comes in?
Cheers
AdTechnically, you should be able to do it without javascript. But one little problem called Internet Explorer comes into the picture. So you may need to use javascript.
<div id="nav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"url">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"url">Features</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"url">Link 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"url">Link 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"url">Link 3</a></li>
</ul>
</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"url">Competitions</a></li>
</ul>
</div>
The corresponding CSS:
#nav ul, #nav li {list-style: none; margin: 0; padding: 0}
#nav li {position: relative; top: 0; left: 0}
/* positioning the li so that nested list is
positioned relative to this parent li */
#nav li ul {display: none}
#nav li:hover ul {display: block; background: #ccc;
position: absolute; left: 75px; top: 10px; z-index: 10}This will not work in IE because IE doesn't allow hover for arbitrary elements. The modification:
...
<li onmouseover="dispmenu('Fsubmenu')" onmouseout
="hidemenu('Fsubmenu')"><a href=http://www.webdeveloper.com/forum/archive/index.php/"url">Features</a>
<ul id="Fsubmenu" style="display: none">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"url">Link 1</a></li>
...
(I have shown only the modified part... other parts remain the same)
And add javascripts:
<script type="text/javascript"><!--
function dispmenu(mname) {
document.getElementById(mname).style.display = 'block';
}
function hidemenu(mname) {
document.getElementById(mname).style.display = 'none';
}(Note that we still keep the styles that we originally used in #nav li:hover ul, but we use them with #nav li ul instead)
Note: Javascript-based code is untested.Cheers for that, it was a great help in getting me where I needed to go. It wasn't just IE which didn't play ball on the pure CSS solution, Safari didn't display the sub-menu either, but plays ball with the javascript.
I guessed it was possible in CSS with hover (like I guessed that PC IE wouldn't like the result), but it's my first time in using CSS for layout, and it was a bit scary, and everything I tried just didn't work!
I've done a few tweaks to the styles you gave (making the sub-menu appear inline with the rest of the list, forcing the other links below to shuffle down to make room), just got rid of the positioning and displayed it inline and it seems to work a treat. It's working in Safari, PC IE, and in Firebird, so job's a good 'un.
I'm trying to get a submenu to drop down when you mouseover the main menu item... Eg:
(no mouseover)
Home
Features
Competitions
(features mousedover)
Home
Features
- Link 1
- Link 2
- Link 3
Competitions
I thought I could hide the submenus by setting display: none; and then somehow change the submenu's display to inline when the mouse goes over the features item. The display: none; works fine, but is the latter part possible in CSS, or is that where the javascript comes in?
Cheers
AdTechnically, you should be able to do it without javascript. But one little problem called Internet Explorer comes into the picture. So you may need to use javascript.
<div id="nav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"url">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"url">Features</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"url">Link 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"url">Link 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"url">Link 3</a></li>
</ul>
</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"url">Competitions</a></li>
</ul>
</div>
The corresponding CSS:
#nav ul, #nav li {list-style: none; margin: 0; padding: 0}
#nav li {position: relative; top: 0; left: 0}
/* positioning the li so that nested list is
positioned relative to this parent li */
#nav li ul {display: none}
#nav li:hover ul {display: block; background: #ccc;
position: absolute; left: 75px; top: 10px; z-index: 10}This will not work in IE because IE doesn't allow hover for arbitrary elements. The modification:
...
<li onmouseover="dispmenu('Fsubmenu')" onmouseout
="hidemenu('Fsubmenu')"><a href=http://www.webdeveloper.com/forum/archive/index.php/"url">Features</a>
<ul id="Fsubmenu" style="display: none">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"url">Link 1</a></li>
...
(I have shown only the modified part... other parts remain the same)
And add javascripts:
<script type="text/javascript"><!--
function dispmenu(mname) {
document.getElementById(mname).style.display = 'block';
}
function hidemenu(mname) {
document.getElementById(mname).style.display = 'none';
}(Note that we still keep the styles that we originally used in #nav li:hover ul, but we use them with #nav li ul instead)
Note: Javascript-based code is untested.Cheers for that, it was a great help in getting me where I needed to go. It wasn't just IE which didn't play ball on the pure CSS solution, Safari didn't display the sub-menu either, but plays ball with the javascript.
I guessed it was possible in CSS with hover (like I guessed that PC IE wouldn't like the result), but it's my first time in using CSS for layout, and it was a bit scary, and everything I tried just didn't work!
I've done a few tweaks to the styles you gave (making the sub-menu appear inline with the rest of the list, forcing the other links below to shuffle down to make room), just got rid of the positioning and displayed it inline and it seems to work a treat. It's working in Safari, PC IE, and in Firebird, so job's a good 'un.