[CSS] dynamic pseudo-classes

fwsmail35 <[email protected]> Sun, 04 Mar 2007 15:01:22 +0100
Newsgroups gmane.comp.web.amaya.devel
Message-ID <[email protected]> 
Hello,

I use on my web site a menu without javascript, but using the dynamic 
pseudo-classes hover ( 
http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes ).
I tried it with Amaya but it doesn't work. It must be difficult to add 
support of dynamic properties in Amaya, but I send you a xml file if you 
want to test it.

-- 
Frédéric WANG
[email protected]
http://www.maths-informatique-jeux.com
--
amaya_css_hover.xml (text/xml, 1.7 KB) 
<?xml version="1.0" encoding="iso-8859-15"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type"
  content="application/xhtml+xml; charset=iso-8859-15" />
  <title>Test css : hover</title>
  <meta name="generator" content="Amaya 9.54, see http://www.w3.org/Amaya/" />

<style type="text/css">
#menuDeroulant
{
position:fixed;
font-size:100%;
width:100%;
height:10px;
list-style-type:none;
margin:0;
padding:0;
border:0;
}

#menuDeroulant li
{
float:left;
width:25%;
margin:0;
padding:0;
border:0;
}

#menuDeroulant li:hover > .sousMenu {display: block;}

#menuDeroulant .sousMenu
{
display:none;
list-style-type:none;
margin:0;
padding:0;
border:0;
}

#menuDeroulant .sousMenu li
{
float:none;
margin:0;
padding:0;
width:100%;
}
</style>
</head>

<body>

<ul id="menuDeroulant"> 
  <li>Menu 1
    <ul class="sousMenu">
      <li><a href="#">SousMenu 1</a></li>
      <li><a href="#">SousMenu 2</a></li>
      <li><a href="#">SousMenu 3</a></li>
      <li><a href="#">SousMenu 4</a></li>
    </ul>
  </li>
  <li>Menu 2
    <ul class="sousMenu">
      <li><a href="#">SousMenu 1</a></li>
      <li><a href="#">SousMenu 2</a></li>
      <li><a href="#">SousMenu 3</a></li>
      <li><a href="#">SousMenu 4</a></li>
    </ul>
  </li>
  <li>Menu 3
    <ul class="sousMenu">
      <li><a href="#">SousMenu 1</a></li>
      <li><a href="#">SousMenu 2</a></li>
      <li><a href="#">SousMenu 3</a></li>
      <li><a href="#">SousMenu 4</a></li>
    </ul>
  </li>
  <li>Menu 4
    <ul class="sousMenu">
      <li><a href="#">SousMenu 1</a></li>
      <li><a href="#">SousMenu 2</a></li>
      <li><a href="#">SousMenu 3</a></li>
      <li><a href="#">SousMenu 4</a></li>
    </ul>
  </li>
</ul>

</body>
</html>