Home/ Questions/Q 595739
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T16:05:44+00:00

All, <html> <ul class=menu> <li> <a href=>Header</a> <ul class=submenu> <li><img src=/> Link 1</li> <li><img

  • 0

All,

<html>

<ul class="menu">
<li>
 <a href="">Header</a>
 <ul class="submenu">
    <li><img src=""/> Link 1</li>
    <li><img src=""/> Link 2</li>
 </ul>
 </li>
 </ul>
 </html>

Can the code be changed such that link1 and link2 will appear on mouse over….

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    With CSS or with JS?

    Here with CSS:

    <html>
  <head>
    <style type="text/css">
      li:hover > ul {
        display:block;
      }
      .submenu {
        display:none;
      }
    </style>
  </head>
  <body>
    <ul class="menu">
      <li>
        <a href="">Header</a>
        <ul class="submenu">
          <li><img src=""/> Link 1</li>
          <li><img src=""/> Link 2</li>
        </ul>
      </li>
    </ul>
  </body>
</html>

    But this probably does not work in IE6 and lower (thanks Andy E) as the don’t allow the :hover pseudo selector with other selectors than a.

    There are better approaches but as your question is not very specific, this is my solution.

    Edit:
    This would be

    li a:hover + ul {
    display:block;
}

    Reference.

    Be aware that this might not work with every browser. But you’ll find plenty information which CSS elements are supported by which browser in the internet.

    • 0