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

Question

 <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是导航栏，浏览器上只显示了导航栏 没有样式

Answer 1

你样式里面是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>