28173 sujets

CSS et mise en forme, CSS3

Affichage menu dans widget

Bonjour, je suis très heureux de trouver un forum comme le vôtre qui pourrait sans doute m'aider à trouver une solution...

Alors voila je suis entrain de faire un intranet pour notre société et je rencontre un problème pour l'une des widget.
J'ai crée un menu avec deux sous menu (catégorie), le problème est que lorsque l'on passe sur le premier menu l'autre s'ouvre mais se retrouve bloqué dans le cadre de ma widget... et donc on ne peut voir ce qu'il se passe après et faire un choix.
Voici un printscreen de ce qu'il se passe :

http://img15.hostingpics.net/pics/731836widget2.jpg

et voici le code que j'ai utilisé :


CSS :

/* Some stylesheet reset */
#cssmenu  > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	line-height: 1;
}

/* The container */
#cssmenu  > ul {
	display: block;
	position: relative;
	width: 150px;
}

	/* The list elements which contain the links */
	#cssmenu  > ul li {
		display: block;
                position: relative;
		margin: 0;
		padding: 0;
		width: 150px;	
	}

		/* General link styling */
		#cssmenu  > ul li a {
			/* Layout */
			display: block;
			position: relative;
			margin: 0;
			border-top: 1px dotted #3a3a3a;
			border-bottom: 1px dotted #1b1b1b;
			padding: 11px 20px;
			width: 110px;

			/* Typography */
			font-family: Helvetica, Arial, sans-serif;
			color: #d8d8d8;
			text-decoration: none;
			text-transform: uppercase;
			text-shadow: 0 1px 1px #000;
			font-size: 10px;
			font-weight: 300;			

			/* Background & effects */
			background: #282828;
		}

		/* Rounded corners for the first link of the menu/submenus */
		#cssmenu  > ul li:first-child>a {
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
			border-top: 0;
		}

		/* Rounded corners for the last link of the menu/submenus */
		#cssmenu  > ul li:last-child>a {
			border-bottom-left-radius: 4px;
			border-bottom-right-radius: 4px;
			border-bottom: 0;
		}


		/* The hover state of the menu/submenu links */
		#cssmenu  > ul li>a:hover, #cssmenu  > ul li:hover>a {
			color: #fff;
			text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
			background: #54cdf1;
			background: -webkit-linear-gradient(bottom, #54cdf1, #74d7f3);
			background: -ms-linear-gradient(bottom, #54cdf1, #74d7f3); 
			background: -moz-linear-gradient(bottom, #54cdf1, #74d7f3);
			background: -o-linear-gradient(bottom, #54cdf1, #74d7f3);
			border-color: transparent;
		}

		/* The arrow indicating a submenu */
		#cssmenu  > ul .has-sub>a::after {
			content: '';
			position: absolute;
			top: 16px;
			right: 10px;
			width: 0px;
			height: 0px;

			/* Creating the arrow using borders */
			border: 4px solid transparent;
			border-left: 4px solid #d8d8d8; 
		}

		/* The same arrow, but with a darker color, to create the shadow effect */
		#cssmenu  > ul .has-sub>a::before {
			content: '';
			position: absolute;
			top: 17px;
			right: 10px;
			width: 0px;
			height: 0px;

			/* Creating the arrow using borders */
			border: 4px solid transparent;
			border-left: 4px solid #000;
		}

		/* Changing the color of the arrow on hover */
		#cssmenu  > ul li>a:hover::after, #cssmenu  > ul li:hover>a::after {
			border-left: 4px solid #fff;
		}

		#cssmenu  > ul li>a:hover::before, #cssmenu  > ul li:hover>a::before {
			border-left: 4px solid rgba(0, 0, 0, .3);
		}

	
		/* THE SUBMENUS */
		#cssmenu  > ul ul {
			position: absolute;
			left: 150px;
			top: -9999px;
			padding-left: 5px;
			opacity: 0;
			/* The fade effect, created using an opacity transition */
			-webkit-transition: opacity .3s ease-in;
			-moz-transition: opacity .3s ease-in;
			-o-transition: opacity .3s ease-in;
			-ms-transition: opacity .3s ease-in;
		}

		/* Showing the submenu when the user is hovering the parent link */
		#cssmenu  > ul li:hover>ul {
			top: 0px;
			opacity: 1;
		}



CODE HTML :

<div id='cssmenu'>
<ul>
   <li><a href='forum.php'><span>Listing Shops</span></a></li>
   <li class='has-sub'><a href='forumdisplay.php?1-YourCall-Shop'><span>YourCall Store</span></a>
      <ul>
         <li class='has-sub'><a href='forumdisplay.php?2-YourCall-FR'><span>YourCall FR</span></a>
            <ul>
               <li><a href='showthread.php?27-1602-YourCall-Nivelles'><span>1602 - Nivelles</span></a></li>
               <li><a href='showthread.php?25-1604-YourCall-Charleroi'><span>1604 - Charleroi</span></a></li>
               <li><a href='showthread.php?24-1605-YourCall-Tournai'><span>1605 - Tournai</span></a></li>
               <li><a href='showthread.php?21-1609-YourCall-Binche'><span>1609 - Binche</span></a></li>
               <li><a href='showthread.php?20-1610-YourCall-Courcelles'><span>1610 - Courcelles</span></a></li>
               <li><a href='showthread.php?18-1613-YourCall-Liège-Saint-Lambert'><span>1613 - St-Lambert</span></a></li>
               <li><a href='showthread.php?17-1614-YourCall-Messancy'><span>1614 - Messancy</span></a></li>
               <li><a href='showthread.php?15-1617-YourCall-Wavre'><span>1617 - Wavre</span></a></li>
               <li><a href='showthread.php?11-1621-YourCall-Namur'><span>1621 - Namur</span></a></li>
               <li><a href='showthread.php?9-1623-YourCall-Mons'><span>1623 - Mons</span></a></li>
               <li class='last'><a href='showthread.php?7-1625-YourCall-Bruxelles-City2'><span>1625 - City2</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='forumdisplay.php?6-YourCall-NL'><span>YourCall NL</span></a>
            <ul>
               <li><a href='showthread.php?28-1601-YourCall-Leuven'><span>1601 - Leuven</span></a></li>
               <li><a href='showthread.php?26-1603-YourCall-Gent'><span>1603 - Gent</span></a></li>
               <li><a href='showthread.php?23-1606-YourCall-Keiser'><span>1606 - Keiser</span></a></li>
               <li><a href='showthread.php?22-1608-YourCall-Turnhout'><span>1608 - Turnhout</span></a></li>
               <li><a href='showthread.php?19-1611-YourCall-Tongeren'><span>1611 - Tongeren</span></a></li>
               <li><a href='showthread.php?16-1616-YourCall-Hasselt'><span>1616 - Hasselt</span></a></li>
               <li><a href='showthread.php?14-1618-YourCall-Lier'><span>1618 - Lier</span></a></li>
               <li><a href='showthread.php?13-1619-YourCall-Herentals'><span>1619 - Herentals</span></a></li>
               <li><a href='showthread.php?12-1620-YourCall-Oostende'><span>1620 - Oostende</span></a></li>
               <li><a href='showthread.php?10-1622-YourCall-Halle'><span>1622 - Halle</span></a></li>
               <li><a href='showthread.php?8-1624-YourCall-Aarschot'><span>1624 - Aarschot</span></a></li>
               <li class='last'><a href='showthread.php?6-1626-YourCall-Mechelen'><span>1626 - Mechelen</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li class='has-sub last'><a href='forumdisplay.php?8-Carrefour-SIS'><span>Carrefour Store</span></a>
      <ul>
         <li class='has-sub'><a href='forumdisplay.php?9-Carrefour-FR'><span>Carrefour FR</span></a>
            <ul>
               <li><a href='showthread.php?60-1501-Carrefour-Herstal'><span>1501 - Herstal</span></a></li>
               <li><a href='showthread.php?58-1503-Carrefour-Mont-St-Jean'><span>1503 - Mont-St-Jean</span></a></li>
               <li><a href='showthread.php?57-1504-Carrefour-Soignies'><span>1504 - Soignies</span></a></li>
               <li><a href='showthread.php?56-1505-Carrefour-St-Agatha-Berchem'><span>1505 - St-Agatha Berchem</span></a></li>
               <li><a href='showthread.php?54-1507-Carrefour-Mons-Grand-Prés'><span>1507 - Mons Gd-Prés</span></a></li>
               <li><a href='showthread.php?53-1508-Carrefour-Kraainem'><span>1508 - Kraainem</span></a></li>
               <li><a href='showthread.php?49-1512-Carrefour-Evère'><span>1512 - Evère</span></a></li>
               <li><a href='showthread.php?48-1513-Carrefour-Wépion'><span>1513 - Wepion</span></a></li>
               <li><a href='showthread.php?47-1514-Carrefour-Auderghem'><span>1514 - Auderghem</span></a></li>
               <li><a href='showthread.php?46-1515-Carrefour-Bièrges'><span>1515 - Bièrges</span></a></li>
               <li><a href='showthread.php?45-1516-Carrefour-Jambes'><span>1516 - Jambes</span></a></li>
               <li><a href='showthread.php?42-1519-Carrefour-Boncelles'><span>1519 - Boncelles</span></a></li>
               <li><a href='showthread.php?41-1520-Carrefour-Belle-Ile-(Angleur)'><span>1520 - Belle-Ile</span></a></li>
               <li><a href='showthread.php?39-1522-Carrefour-Froyennes'><span>1522 - Froyennes</span></a></li>
               <li><a href='showthread.php?38-1523-Carrefour-Bomerée'><span>1523 - Bomerée</span></a></li>
               <li><a href='showthread.php?37-1524-Carrefour-Marche-en-Famenne'><span>1524 - Marche</span></a></li>
               <li><a href='showthread.php?36-1525-Carrefour-Drogenbos'><span>1525 - Drogenbos</span></a></li>
               <li><a href='showthread.php?32-1530-Carrefour-Flémalle'><span>1530 - Flemalle</span></a></li>
               <li><a href='showthread.php?31-1532-Carrefour-Ans'><span>1532 - Ans</span></a></li>
               <li><a href='showthread.php?30-1533-Carrefour-Fléron'><span>1533 - Fleron</span></a></li>
               <li class='last'><a href='showthread.php?29-1534-Carrefour-Gosselies'><span>1534 - Gosselies</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='forumdisplay.php?10-Carrefour-NL'><span>Carrefour NL</span></a>
            <ul>
               <li><a href='showthread.php?59-1502-Carrefour-Oostakker'><span>1502 - Oostakker</span></a></li>
               <li><a href='showthread.php?55-1506-Carrefour-Ninove'><span>1506 - Ninove</span></a></li>
               <li><a href='showthread.php?52-1509-Carrefour-Burcht'><span>1509 - Burcht</span></a></li>
               <li><a href='showthread.php?51-1510-Carrefour-Kuringen'><span>1510 - Kuringen</span></a></li>
               <li><a href='showthread.php?50-1511-Carrefour-Brugge'><span>1511 - Brugge</span></a></li>
               <li><a href='showthread.php?44-1517-Carrefour-Schoten'><span>1517 - Schoten</span></a></li>
               <li><a href='showthread.php?43-1518-Carrefour-Turnhout'><span>1518 - Turnhout</span></a></li>
               <li><a href='showthread.php?40-1521-Carrefour-Lier'><span>1521 - Lier</span></a></li>
               <li><a href='showthread.php?35-1526-Carrefour-Korbeek-Lo'><span>1526 - Korbeek - Lo</span></a></li>
               <li><a href='showthread.php?34-1527-Carrefour-Zemst'><span>1527 - Zemst</span></a></li>
               <li class='last'><a href='showthread.php?33-1528-Carrefour-St-Denijs-Westrem'><span>1528 - St-Denijs-Westrem</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
</div>


Je viens d'essayer en mettant absolute pour la valeur du container et la cela fonctionne comme ici :

http://img15.hostingpics.net/pics/160028widget3.jpg

mais évidement mon menu n'est plus situé dans ma widget correctement...

Merci d'avance pour votre aide...
Modifié par Marrooi (02 Jul 2013 - 14:55)
Merci pour ta réponse mais je pense en fait que le soucis vient de la widget qui est intégré dans le style de vbulletin dans la class ".cms_widget" et qui elle utilise un overflow hidden...

Je ne sais pas comment faire pour forcer mon code à passer ca sinon les autres widget que j'ai risque de toute être modifier et ce n'est pas mon but, il ne faut que cela ne s'applique que pour celle la...!!!
maintenant est-ce qu'il ne serait pas possible de crée un template unique pour cette widget et que j'utiliserais rien que pour placé ses éléments ???
Sujet clos
Aller à