28172 sujets

CSS et mise en forme, CSS3

[Résolu] Bordures Menu CSS

Salut à tous,

Je sèche un peu sur un tout petite problème d'affichage de mon menu.

Voici mon menu actuel:

http://hfr-rehost.net/http://self/pic/7d9d5efe66f56a6b32f6caf7a566065e8a8d4dda.gif

Et je voudrais que les bordures se présentent comme ceci:

http://hfr-rehost.net/http://self/pic/6f11a431f58cdeff485caf48d7d9a9154f8bd1e0.gif

Comment y parvenir ? J'ai essayé de jouer sur le z-index de mes différents éléments li et ul avec une bordure blanche en bas, mais apparemment ça ne fonctionne pas (ou alors j'ai merdé Smiley rolleyes )

Voici le code de mon menu:

<div class="menuF">
        <ul>
            <li class="borderMenu"><a href="#">Menu 1</a>
                <ul>
                    <li><a href="" target="_blank"><img src="image.png" border="0" align="absmiddle" />&nbsp;&nbsp;Lien 1</a></li>
                    <li><a href="" target="_blank"><img src="image.png" border="0" align="absmiddle" />&nbsp;&nbsp;Lien 2</a></li>
                    <li><a href="" target="_blank"><img src="image.png" border="0" align="absmiddle" />&nbsp;&nbsp;Lien 3</a></li>
                    <li><a href="" target="_blank"><img src="image.png" border="0" align="absmiddle" />&nbsp;&nbsp;Lien 4</a></li>
                </ul>
            </li>
            <li class="borderMenu"><a href="#">Menu 2</a>
                <ul>
                    <li><a href="" target="_blank"><img src="image.png" border="0" align="absmiddle" />&nbsp;&nbsp;Lien 1</a></li>
                    <li><a href="" target="_blank"><img src="image.png" border="0" align="absmiddle" />&nbsp;&nbsp;Lien 2</a></li>
                    <li><a href="" target="_blank"><img src="image.png" border="0" align="absmiddle" />&nbsp;&nbsp;Lien 3</a></li>
                    <li><a href="" target="_blank"><img src="image.png" border="0" align="absmiddle" />&nbsp;&nbsp;Lien 4</a></li>
                </ul>
            </li>
            <li class="borderMenu"><a href="#">Menu 3</a>
                <ul>
                  <li><a href="" target="_blank"><img src="image.png" border="0" align="absmiddle" />&nbsp;&nbsp;Lien 1</a></li>
                    <li><a href="" target="_blank"><img src="image.png" border="0" align="absmiddle" />&nbsp;&nbsp;Lien 2</a></li>
                    <li><a href="" target="_blank"><img src="image.png" border="0" align="absmiddle" />&nbsp;&nbsp;Lien 3</a></li>
                    <li><a href="" target="_blank"><img src="image.png" border="0" align="absmiddle" />&nbsp;&nbsp;Lien 4</a></li>
                </ul>
            </li>
            <li class="borderMenu"><a href="#">Menu 4</a>
                <ul>
                  <li><a href="" target="_blank"><img src="image.png" border="0" align="absmiddle" />&nbsp;&nbsp;Lien 1</a></li>
                    <li><a href="" target="_blank"><img src="image.png" border="0" align="absmiddle" />&nbsp;&nbsp;Lien 2</a></li>
                    <li><a href="" target="_blank"><img src="image.png" border="0" align="absmiddle" />&nbsp;&nbsp;Lien 3</a></li>
                    <li><a href="" target="_blank"><img src="image.png" border="0" align="absmiddle" />&nbsp;&nbsp;Lien 4</a></li>
                </ul>
            </li>
        </ul>
    </div>


Et la feuille de style.


.menuF {
	margin:5px 0px 0px 0px;
	padding:0px;
	float:left;
}
.menuF ul {
	background:#E4E4E4;
	height:25px;
	list-style:none;
	margin:0;
	padding:0;
}
.menuF li {
	float:left;
	padding:0px;
}
.menuF li.borderMenu {
	border:1px solid #E4E4E4;
}
.menuF li.borderMenu:hover {
	border-top:1px solid #000;
	border-left:1px solid #000;
	border-right:1px solid #000;
	border-bottom:1px solid #f36;
}
.menuF li a {
	background:#E4E4E4 url(../images/sep.png) right no-repeat;
	color:#666;
	display:block;
	line-height:25px;
	margin:0px;
	padding:0px 10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	text-align:center;
}
.menuF li a:hover,.menuF ul li:hover a {
	background:#fff;
	color:#000;
	text-decoration:none;
}
.menuF li ul {
	background:#FFF;
	display:none;
	height:auto;
	padding:5px 5px;
	margin-left:-1px;
	margin-top:-1px;
	position:absolute;
	z-index:200;
	width:200px;
	box-shadow:3px 3px 2px #555;
	border:1px solid #000;
}
.menuF li:hover ul {
	display:block;
}
.menuF li li {
	display:block;
	float:none;
	margin:0px;
	padding:0px;
	width:200px;
}
.menuF li ul a {
	display:block;
	margin:0px;
	padding:0px 0px 0px 5px;
	text-align:left;
	font-weight:normal;
}
.menuF li ul a:hover, .menuF li ul li:hover a {
	background:#1484C8;
	color:#ffffff;
	margin:0px;
	padding:0px 0px 0px 5px;
}



Si quelqu'un avait une piste...

En vous remerciant d'avance
Modifié par samlon (10 May 2012 - 14:16)
En mettant une bordure blanche au menu de base ca ne fonctionne pas?

.menuF li.borderMenu:hover {
	border-top:1px solid #000;
	border-left:1px solid #000;
	border-right:1px solid #000;
	border-bottom:1px solid #fff;
}

Modifié par Naemesis (10 May 2012 - 11:01)
Plutôt :

.menuF li.borderMenu:hover {
	border-top:1px solid #000;
	border-left:1px solid #000;
	border-right:1px solid #000;
	border-bottom:1px solid #fff;
        z-index:5;
}
Ce ce que j'avais essayé, mais si je recule le menu déroulant (lien 1, lien 2,...) il se place sous mes autres div de la page.
Et si je mets un z-index supérieur à l'élément au dessus (Menu 1, Menu2,..) rien ne change:

.menuF li ul {
	background:#FFF;
	display:none;
	height:auto;
	padding:5px 5px;
	margin-left:-1px;
	margin-top:0px;
	position:absolute;
	z-index:200;
	width:200px;
	box-shadow:3px 3px 2px #555;
	border:1px solid #000;
}


.menuF li.borderMenu:hover {

	border-top:1px solid #000;

	border-left:1px solid #000;

	border-right:1px solid #000;

	border-bottom:1px solid #fff;

        z-index:250;

}
Je pense que ça vient du fait que le ul appartient au li.
Peut-être devrais-tu appliquer tes styles de li.borderMenu sur tes a plutôt que sur les li.
Et en augmantant la taille de la bordure inferieure ?

.menuF li.borderMenu:hover {
	border-top:1px solid #000;
	border-left:1px solid #000;
	border-right:1px solid #000;
	border-bottom:2px solid #fff;
        z-index:5;
}

Modifié par Naemesis (10 May 2012 - 11:51)
@Gothor:

Pas con, ça fonctionne presque avec ces changements:



.menuF li a.borderMenu {
	border:1px solid #E4E4E4;
	position:relative;
}
.menuF li a.borderMenu:hover {
	border-top:1px solid #000;
	border-left:1px solid #000;
	border-right:1px solid #000;
	border-bottom:1px solid #fff;
	z-index:15;
}


Par contre la bordure disparaît quand je déplace la souris sur le sous-menu
Peut-être en mettant ton a après ton ul et avec un code comme ceci...
.menuF li ul:hover + a.borderMenu {
	border-top:1px solid #000;
	border-left:1px solid #000;
	border-right:1px solid #000;
	border-bottom:1px solid #fff;
	z-index:15;
}

Modifié par Gothor (10 May 2012 - 12:08)
Bonjour,

<a> et <ul> sont au même niveau (adjacent), il suffit que <a> recouvre d'1 px <ul> sur hover pour qu'une partie de la bordure disparaisse.

Pour placer <a> au dessus de <ul>.
.menuF li a:hover,.menuF ul li:hover a {
	background:#fff;
	color:#000;
	text-decoration:none;
position:relative;
z-index:201; /* z-index de ul + 1 */
}


Reste a gerer le decalage de 1px si le line-height n'a pas deja fait le travail.

++
Oui je viens de trouver mon erreur, c'était bien 

.menuF li:hover a.borderMenu


Merci pour votre aide à tous.
Modifié par samlon (10 May 2012 - 14:16)
Sujet clos
Aller à