html - make submenu wider than main menu -


I have a submenu and I want that when the dropdown menu is out, it has a width of 100% full page . At the moment, if I change the width to 100% then it does the same width as the main menu.

This is my current HTML:

  & lt; Header & gt; & Lt; Div class = "header" & gt; & Lt; Div class = "nav" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "services.html" & gt; Services & lt; / A & gt; & Lt; Ul class = "sub" & gt; & Lt; a href = "services.html # branddesign" & gt; & Lt; Li & gt; & Lt; Img class = "imgcenter" src = "picture / brand-design-circle-blue png" width = "100px" /> & Lt; Br> Brand design & lt; / li & gt; & Lt; / A & gt; & Lt; a href = "services.html # brandonline" & gt; & Lt; Li & gt; & Lt; Img class = "imgcenter" src = "picture / brand-online-division-blue.png" width = "100px" /> & Lt; Br> Brand Online & lt; / li & gt; & Lt; / A & gt; & Lt; a href = "services.html # brandmarking" & gt; & Lt; Li & gt; & Lt; Img class = "imgcenter" src = "picture / brand-marketing-circle-blue .png" width = "100px" /> & Lt; Br> Brand Marketing & lt; / li & gt; & Lt; / A & gt; & Lt; A href = "services.html # Brand Management" & gt; & Lt; Li & gt; & Lt; Img class = "imgcenter" src = "picture / brand-management-circle-blue png" width = "100px" /> & Lt; Br> Brand Management & lt; / li & gt; & Lt; / A & gt; & Lt; / Ul & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; A href = "" & gt; Client & lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; A href = "" & gt; About & lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; A href = "" & gt; Contact us & lt; / A & gt; & Lt; / li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;   

And this CSS:

  .header {status: fixed; Display area; Swim left; Width: 100%; Height: auto; Background color: # 666; Z-index: 99 99; } .nav {status: static; Swim left; Width: 500px; Height: 50px; Margin: 10px 5px; } .nav {text-decoration: none; Color: #FFFFFF; } .nav ul & gt; Li: First-baby {padding-down: 25px; }. Nav a: Hover (text-decoration: none; Color: # 6db6e5; } .nav li {font-family: "eras_demi_itcregular", Ariel, Helvetica; List style: none; Swim left; Margin-right: 50px; }. NAL Li: Hover A: Hover {Padding-Down: 5px; Border bottom: 2px solid # 6db6e5; Color: # 6db6e5; } .nav ul li: hover & gt; Ul {height: 150px; } .nav ul {list-style: none; Status: Completed; Display: Inline-block; Margin-top: 23px; } .nav ul ul {width: 494px; Background: # 7d7c7c; Height: 0 pixels; Hidden flurry; Padding-left: 0; Margin-left: 0; Font-size: 12px; Text align: center; -WebKit-Infection: All .5s ease-in-out; -Mozy-infection: all .5s ease-in-out; -O-Infection: All .5s ease-out-out; Transition: All .5s ease-in-out; } .nav ul ul li {padding: 10px; Margin-left: -1px; Margin-right: 0; Height: 12 9px; } .nav ul ul li: last child {} .nav ul ul li: Hover {background: # 666; } .nav li li {height: 130px; -WebKit-Infection: All .3s ease-in-out; }   

Can anyone tell me how to make it so that the submenu can be more than the main menu?

Try adding it to your CSS:

  UL {width: 100w; Left: 0;           

This is 100% of the viewport width Whether it should be any pixel width

Comments

Popular posts from this blog

Verilog Error: output or inout port "Q" must be connected to a structural net expression -

jasper reports - How to center align barcode using jasperreports and barcode4j -

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -