Background Sub menu width 100%

**Independant44** · 23/03/2016, 00h30

Bonsoir à tous et toutes,

Voilà, je cherche tout simplement à créer un menu horizontal (ce qui est fait) et) à avoir les sous menus etc. Ça, c'est ok...
Simplement, je souhaiterais que le fond de ce sous menu entier prenne toute la largeur de l'écran sans bouger mes li...
Est-ce clair ? Si oui, puis-je avoir un coup de main ?

Merci !

Invité · 23/03/2016, 12h00

Bonjour,

on ne peut rien répondre sans voir les codes (CSS + HTML associé).

+ éventuellement une copie d'écran (ou autre) montrant le problème et/ou le résultat souhaité.

**Independant44** · 23/03/2016, 15h11

Hello,

Merci de ta réponse voici donc pour les "screenshot" de l'idée que je souhaiterais;..

Pour le code issu du thème Shopkeeper..

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<header role="banner" class="site-header" id="masthead">
 
        <div class="row">		
        <div class="large-12 columns">
 
 
            <div style="max-width:1680px" class="site-header-wrapper">
 
                <div class="wrapper_header_layout">
 
                    <div class="header_col left_menu">
 
 
                        <nav role="navigation" class="main-navigation default-navigation">  
 
 
 
 
 
 
 <ul class="menu-menu-sb-ouest"><li class="menu-item menu-item-type-custom menu-item-object-custom social-icon facebook" id="shopkeeper-menu-item-757"><a href="http://facebook.com"><i class="icon-2x icon-facebook "></i><span class="fa-hidden">Facebook</span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom social-icon twitter" id="shopkeeper-menu-item-758"><a href="http://twitter.com"><i class="icon-2x icon-twitter "></i><span class="fa-hidden">Twitter</span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom social-icon instagram" id="shopkeeper-menu-item-759"><a href="https://www.instagram.com"><i class="icon-2x icon-instagram "></i><span class="fa-hidden">Instagram</span></a></li>
<li class="mega-menu menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children" id="shopkeeper-menu-item-4487"><a href="#">Marchandises</a>
<ul class="sub-menu  level-0" style="left: -15px;">
	<li class="p-top-moins20 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children" id="shopkeeper-menu-item-750"><a href="#">Collection horizon</a>
	<!-- ICI POUR DROPDOWNMENU--------------------------->
         <ul class="sub-menu  level-1"> 
		<li class="menu-item menu-item-type-custom menu-item-object-custom" id="shopkeeper-menu-item-752"><a href="#">T-shirts</a></li>
		<li class="menu-item menu-item-type-custom menu-item-object-custom" id="shopkeeper-menu-item-753"><a href="#">Sweatshirt</a></li>
		<li class="menu-item menu-item-type-custom menu-item-object-custom" id="shopkeeper-menu-item-754"><a href="#">#</a></li>
	</ul>
</li>
	<li class="p-top-20 menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children" id="shopkeeper-menu-item-755"><a href="#">Collection permanente</a>
	<ul class="sub-menu  level-1">
		<li class="menu-item menu-item-type-custom menu-item-object-custom" id="shopkeeper-menu-item-756"><a href="#">T-shirts</a></li>
		<li class="menu-item menu-item-type-post_type menu-item-object-page" id="shopkeeper-menu-item-2227"><a href="#">Inspirations</a></li>
	</ul>
</li>
</ul>
</li>
<li class="cl-effect-sacrebleu menu-item menu-item-type-post_type menu-item-object-page" id="shopkeeper-menu-item-624"><a href="#">Le Made in France</a></li>
</ul>           
                        </nav><!-- .main-navigation -->
                    </div>
 
                    <div class="header_col branding">
                        <div class="site-branding">
 
 
                                <a rel="home" href="#">
                                    <img alt="# title="Une histoire de famille" src="#" class="site-logo">
                                                                            <img alt="#" title="#" src="#" class="sticky-logo">
                                                                    </a>
 
 
                        </div><!-- .site-branding -->
                    </div>
 
                    <div class="header_col right_menu">
                        <nav role="navigation" class="main-navigation default-navigation">                    
                            <ul class="menu-menu-sb-est"><li class="cl-effect menu-item menu-item-type-post_type menu-item-object-page" id="shopkeeper-menu-item-627"><a href="#">Récit de marins</a></li>
<li class="cl-effect menu-item menu-item-type-post_type menu-item-object-page" id="shopkeeper-menu-item-626"><a href="#">Journal de bord</a></li>
<li class="menu-item menu-item-language menu-item-language-current menu-item-has-children"><a onclick="return false" href="#"><img width="18" height="12" title="Français" alt="fr" src="#" class="iclflag"></a></li><li class="menu-item menu-item-language"><a href="#"><img width="18" height="12" title="English" alt="en" src="#" class="iclflag"></a></li><li id="wpmenucartli" class="wpmenucartli wpmenucart-display-standard menu-item"><a title="View your shopping cart" href="#" class="wpmenucart-contents"><i class="wpmenucart-icon-shopping-cart-0"></i><span class="cartcontents">1 item</span></a></li></ul>    
 
 
                        </nav><!-- .main-navigation -->
                    </div>
 
                </div>           
 
 
                <div class="site-tools ">
                    <ul>
 
 
                                                                                                <li class="shopping-bag-button">
                            <a class="tools_button" href="#">
                                <span class="tools_button_icon">
                                	                                    <img src="#">
                                                                    </span>
                                <span class="shopping_bag_items_number">1</span>
                            </a>
                        </li>
 
 
                        <li class="offcanvas-menu-button hide-for-large-up">
                            <a class="tools_button">
								<span class="menu-button-text">menu</span>
                                <span class="tools_button_icon">
                                	                                    <i class="fa fa-bars"></i>
									                                </span>
                            </a>
                        </li>
 
                    </ul>
                </div>
 
            </div><!--.site-header-wrapper-->
 
            </div><!-- .columns -->
    </div><!-- .row -->
 
</header>

Toujours pas trouvé !

Background Sub menu width 100%

CSS

Vue hybride

Discussions similaires

Partager

Partager