28172 sujets

CSS et mise en forme, CSS3

Supprimer une bordure bleu lors d'un clic

Salut tout le monde,

je suis en train de faire un menu déroulant qui se déroule au clic, le souci c'est que lorsque la liste se déroule, un encadré bleu apparait ! je n'arrive pas à le retirer malgrés tout les essais que j'ai fais !

Merci si l'on peut m'aider !

voici le code html et css avec aperçu :

http://codepen.io/anon/pen/Fofze

sinon sans apercu :

<div id="navigation">
    <ul>
       <li id="home"><a href="#">Home</a></li>
      
        <li id="rubrique" tabindex="0"><a>Rubrique</a>
                <ul>
                   <li><a href="#">Item</a></li>
                   <li><a href="#">Item</a></li>
                   <li><a href="#">Item</a></li>
                   <li><a href="#">Item</a></li>
                   <li><a href="#">Item</a></li>
                   <li><a href="#">Item</a></li>
                </ul>
        </li> 

     </ul>
 </div>



#navigation{list-style:none; max-width: 640px; height:auto;font-size:12px;font-family:Arial, Verdana;font-weight:normal;display: block;}
#navigation ul  {padding : 0; margin : 0; list-style : none; max-width: 640px;}
#navigation ul ul  {padding : 0; margin : 0; list-style : none; max-width: 640px;}

#navigation a{font-weight:bold;text-decoration:none;}
#navigation li{line-height:26px;border-bottom:0px;}
* html #navigation li{line-height:26px;height:26px;}
*:first-child+html #navigation li{line-height:26px;height:26px;}

#navigation li a{display:block;padding-left:10px; font-weight:bold;}

li#home a{background-color:#F60; color:#fff; display:block;padding-left:10px;color:#fff;font-weight:bold;}
li#home a:hover{background:#F93; color:#fff;}

li#rubrique a{background-color:#636; color:#fff;}
li#rubrique li a{background-color:#fff; color:#333333;}
li#rubrique a:hover{background:#AC5B5B;}
li#rubrique li a:hover{background:#AC5B5B; color: #fff;}

 
#navigation ul {
 list-style-type:none;
 }
#navigation ul li ul {
 display:none;
 margin-left:0;
 margin-bottom:9px;
 padding-left:0px;
 }
 #navigation ul {
 margin-left:0;
 margin-bottom:9px;
 }
#navigation ul li:focus ul {
 display:block;
 }
li[tabindex]>a {pointer-events:none;}
li[tabindex]:before {
  content:'MENU';
  float:right;
  padding-right:0.5em;
  font-weight:bold;
  color:white;
  font-size:120%;
  line-height:26px;
}
li:focus {pointer-events:none;} /* referme le menu */
li:focus ul li a {pointer-events:auto;} /* maintient l'interaction des liens de sous menu avec la souris*/

Modifié par soinf (10 Aug 2014 - 19:18)
Sujet clos
Aller à