fredag 20 december 2013

Example on simple menu in html

<!DOCTYPE HTML>
<html>
<head>
<title>menuExample</title>

<style>
.ulNav a {
   text-decoration: none;
   color: black;
   font-size: 11px;
}  
.ulNav a:hover {
   color: whitesmoke;
   background-color: #777777;
}        
.ulNav {
   margin-left: 1px;
   float: left;
}  
.ulNav li
{
   list-style: none;
   margin-right: 0.1em;
   padding: 0 0 0 0;
}  
.ulNav li:hover ul {
   display: block;
   background-color: whitesmoke;
   border: 1px solid black;
}
.ulNav li {
   float: left;
   padding: 0 0.6em;
}    
.ulNav li a, a:hover {
   text-decoration: none;
}  
.ulNav li li {
  float: none;
  margin-left: -44px;
  margin-top: 2px;
}
.ulNavLevel2 {
  display: none;
  position: absolute;  
}
</style>

</head>
<body>
 
   <ul class="ulNav">
     <li>
      <a href="#">Order</a>
      <ul class="ulNavLevel2">
        <li><a href="../Row1.aspx">Row1</a></li>
        <li><a href="../Row2.aspx">Row2</a></li>
        <li><a href="../Row3.aspx">Row3</a></li>
      </ul>
    </li>    
   
    <li>
      <a href="../Customer.aspx">Customer</a>
    </li>
  </ul>


</body>
</html>

Inga kommentarer:

Skicka en kommentar