قائمة عمودية وأفقية ب CSS

Vertical lists CSS

body{
    direction: rtl;
}
#menu{
  width: 200px;
  background: #f9f9f9; 
}
#menu ul{
  list-style: none;
  padding: 0px ;
  margin: 0px ;
}
#menu ul li{ }

#menu ul li a{
  display: block; 
  color:#777;
  text-decoration: none;
  border-left: 1px solid #F1F1F1;
  text-align: center;
  padding: 7px;
}
#menu ul li a:hover{
  background: #FFF;
  color:#f80 ;
  border-top: 4px solid #F80; 
}

 Horizontal lists CSS

#navbar{
    height: 33px;
    background: #f9f9f9;
    }
#navbar ul{
    list-style: none;
    padding: 0px;
    margin:0px;
    }
#navbar ul li{
    float:left
    }
#navbar ul li a{
    margin-right:7px;
    text-decoration: none;
    background: #f9f9f9 ;
    padding: 5px;
    display: block;
    width: 50px;
    color:#f50;
    border-bottom: 4px solid #f1f1f1;
    text-align: center;
    }
#navbar ul li a:hover{
    color: #888;
    background: #fff;
    border-bottom: 4px solid #ccc; 
    }
/*http://css.maxdesign.com.au/listutorial/horizontal_master.htm#*/