modification style bouton déconnexion

codeigniter/application/views/layout/header.php

@@ -17,15 +17,16 @@
 	<ul>
 	  <li><strong>Music APP</strong></li>
 	</ul>
-	<ul>
+	<ul class="option">
 	  <li><?=anchor('albums','Albums');?></li>
           <li><?=anchor('artistes','Artistes');?></li>
-    <?php if ($this->session->userdata('pseudo')) : // Vérifier si l'utilisateur est connecté ?>
+              <li><?=anchor('playlist','Playlist');?></li>
+<?php if ($this->session->userdata('pseudo')) : /* Vérifier si l'utilisateur est connecté */ ?>
               
-              <li class="deroulant"><?= $this->session->userdata('pseudo'); ?></li>
+              <li class="deroulant"><a><?= $this->session->userdata('pseudo'); ?></a>
                   <ul class="sous">
      
-     <li><?= anchor('deconnexion', 'Se déconnecter'); ?></li>
+     <li class="menu"><a href="#"><?= anchor('deconnexion', 'Se déconnecter'); ?></a></li>
          </ul>
          </li>
         <?php else : ?>

codeigniter/assets/style.css

@@ -34,24 +34,46 @@ main.container {
     margin-top: 60px;
 }
 
-.container ul {
-    left: 0;
-}
 
-.container li {
-    margin-right : 20px;
+.option {
+    margin-right : 20px!important;
 }
 
 .sous {
     display: none;
-    box-shadow: 0px 1px 2px;
-    background-color: white;
+    box-shadow: 0px 1px 2px #CCC;
+    background-color: #b4ccf0;
+    position: absolute;
 }
 
 nav > ul li:hover .sous{
-    display: block;
+    display: block ;
 }
+
+.deroulant a {
+    text-decoration: none;
+    color:white;
+}
+
+.deroulant > a::after {
+    content:"  ▼";
+    font-size: 15px;
     
+}
+
+.sous a:hover{
+    color: blue;
+    border-bottom: 2px solid gray;
+}
+
+
+
+		    
+
+
+
+
+
 section.connexion {
     display: flex;
     justify-content: space-between;