新手 求大神知道html中的问题

 <ul class="demo1">
<li><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
这是一个简单的导航栏
然后我添加样式
<style type="text/css">
ul,li{
     list-style:none;   
     margin:0px;
     padding: 0px;
    }
    a{
        color:#06F
        text-decoration:none;
        }
.demo li{
      background-color: rgba(238,238,238,1);    
      -webkit-transition:all 0.3s ease-in-out 0s;
      -moz-transition:all 0.3s ease-in-out 0s;
      transition:all 0.3s ease-in-out 0s;
      padding-left:1%;  
      height:50px;
      min-height: 50px; 
      width: 0;
      font-family:"Arial";
      font-size: 20px;
    }
.demo li a{
        width:50%;  
        height: 50px;
        line-height:50px;
        padding-left:5px;
        positin:absolute;
    }
.demo li:hover{
      background-color: rgba(238,238,238,1);    
      -website-transition:all 0.3s ease-in-out 0s;
      -moz-transition:all 0.3s ease-in-out 0s;
      -o-transition:all 0.3s ease-in-out 0s;
      -ms-transition:all 0.3s ease-out-in 0s;
      transition: all 0.3s ease-in-out 0s;  
      width:50%;
    }       
</style>

怎么将两个代码写在一起 然后在浏览器上显示 我直接放在一起 把样式放在head中，然后body是导航栏，浏览器上只显示了导航栏 没有样式

你样式里面是demo，ul加的class是demo1。。。

 <ul class="demo">
    <li><a href="#">Home</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm
l1-transitional.dtd">
<html>
<meta charset="utf8"></meta>
<style type="text/css">
ul,li{
     list-style:none;   
     margin: 0px;
     padding: 0px;
    }
    a{
        color:#06F
        text-decoration:none;
        }
.demo li{
      background-color: rgba(238,238,238,1);    
      -webkit-transition:all 0.3s ease-in-out 0s;
      -moz-transition:all 0.3s ease-in-out 0s;
      transition:all 0.3s ease-in-out 0s;
      padding-left:1%;  
      height:50px;
      min-height: 50px; 
      width: 0;
      font-family:"Arial";
      font-size: 20px;
    }
.demo li a{
        width:50%;  
        height: 50px;
        line-height:50px;
        padding-left:5px;
        positin:absolute;
    }
.demo li:hover{
      background-color: rgba(238,238,238,1);    
      -website-transition:all 0.3s ease-in-out 0s;
      -moz-transition:all 0.3s ease-in-out 0s;
      -o-transition:all 0.3s ease-in-out 0s;
      -ms-transition:all 0.3s ease-out-in 0s;
      transition: all 0.3s ease-in-out 0s;  
      width:50%;
    }       
</style>
<body>
    <ul class="demo">
    <li><a href="#">Home</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm
l1-transitional.dtd">

ul,li{ list-style:none; margin: 0px; padding: 0px; } a{ color:#06F text-decoration:none; } .demo li{ background-color: rgba(238,238,238,1); -webkit-transition:all 0.3s ease-in-out 0s; -moz-transition:all 0.3s ease-in-out 0s; transition:all 0.3s ease-in-out 0s; padding-left:1%; height:50px; min-height: 50px; width: 0; font-family:"Arial"; font-size: 20px; } .demo li a{ width:50%; height: 50px; line-height:50px; padding-left:5px; positin:absolute; } .demo li:hover{ background-color: rgba(238,238,238,1); -website-transition:all 0.3s ease-in-out 0s; -moz-transition:all 0.3s ease-in-out 0s; -o-transition:all 0.3s ease-in-out 0s; -ms-transition:all 0.3s ease-out-in 0s; transition: all 0.3s ease-in-out 0s; width:50%; }




样式中的demo这个写错了，你的类定义是demo1