dropdownmenu design

designet skal laves om, når man fører musen hen over...(hover)

.menupunkt a {
    display : block ;
    width : 100% ;
    line-height : 20px ;
}
.menupunkt a:hover {
    display : block ;
    width : 100% ;
    line-height : 20px ;
    color:red;
    background:black;
    font-weight:bold;
}

kan man så også få hover-farven til at blive der, mens man er i dropdown-menuen??

-- så skal man tænke lidt anderledes, men f.eks.:

<html>
<head>
<title>NOGET</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>


<style type="text/css">
    .menupunkt {
        width : 200px ;
    text-align : center ;
    border-top-width: 1px;   
    border-top-style: solid  ;   
    border-top-color: #FFFFFF;   

    border-bottom-width: 2px;   
    border-bottom-style: solid  ;   
    border-bottom-color: #555555;   

    border-right-width: 2px;   
    border-right-style: solid  ;   
    border-right-color: #555555;   

    border-left-width: 1px;   
    border-left-style: solid  ;   
    border-left-color: #FFFFFF;   
    }


    .menu {
      position: absolute;       
      z-index : 2 ;
      display : none ;
      width : 200px ;
      padding : 3px ;
      border : 1px solid #111111 ;
      background : white ;
    }

    .menupunkt a {
    display : block ;
    width : 100% ;
    line-height : 20px ;
    }
  </style>

  <script type="text/javascript">
  var actElm = null;
    function mover(elm, obj ) {
//alert("Hej");
      var menu = document.getElementById( obj + "menu" ) ;

      var allElms = document.getElementsByTagName("div");

      for (i=0;allElms.length>i;i++){
        if (allElms[i]==menu){
          menu.style.display = "block" ;
        }
        else
        {
          allElms[i].style.display = "none" ;
        }
      }
      if(elm){
        var lnks = document.links;
        for(i=0;lnks.length>i;i++){
          st = lnks[i].style;
          st.color = (lnks[i]==elm)?'red':'blue';
          st.backgroundColor = (lnks[i]==elm)?'black':'white';
          st.fontWeight = (lnks[i]==elm)?'bold':'normal';
        }
        actElm = elm;
      }
    }

    function mout( obj ) {
      elm = document.getElementById( obj ) ;

      menu = document.getElementById( obj + "menu" ) ;

      menu.style.display = "none" ;
     
      if(actElm){
        actElm.style.color = 'blue';
        actElm.style.backgroundColor = 'white';
        actElm.style.fontWeight = 'normal';
      }
    }
  </script>

</head>

<body>
<table>
  <tr>
    <td class="menupunkt"><a href="index.html" class="intro" onMouseOver="mover(this, 'punkt1' )">Stationære</a></td>
    <td class="menupunkt"><a href="index.html" class="intro" onmouseOver="mover(this, 'punkt2' )">Bærbare</a></td>
    <td class="menupunkt"><a href="index.html" class="intro" onmouseOver="mover(this, 'punkt3' )">Link</a></td>
  </tr>
</table>

<div id="punkt1menu" class="menu" style="left : 13px ;" onMouseOver="mover(null, 'punkt1' )"  onMouseOut="mout( 'punkt1' )">Menu 1 her<br><br><br></div>
<div id="punkt2menu" class="menu" style="left : 220px ;" onmouseOver="mover(null, 'punkt2' )"  onMouseOut="mout( 'punkt2' )">Menu 2 her<br><br><br></div>
<div id="punkt3menu" class="menu" style="left : 427px ;" onmouseOver="mover(null, 'punkt3' )"  onMouseOut="mout( 'punkt3' )">Menu 3 her<br><br><br></div>

</body>
</html>

smid lige et svar

Velbekomme '-)

-- og tak for point ;~}