Place div child of ul ul element occupying 100% of page width

Question

Place div child of ul ul element occupying 100% of page width

Navigation

#1 by (0 votes)

1

The problem is this: I have a div that is the daughter of a li element of an ul that does not start in the corner of the page. There are two subproblems:

1 - I need to be able to expand this div so that it fills the entire width of the page with resolution.

2 - I need it to always take up the width when I scroll.

Structure:

Estrutura:
     <ul class="main-menu">
     	<li class="menu-item nossos-hoteis">
	   <a class="menu-link" href=""><span>Nossos Hotéis</span></a>
	      <div class="submenu">
     	</li>
     </ul>

CSS:

/ * submenu * /

display: none;
position: absolute;
width: 872px;
height: 500px;
padding: 20px 30px;

/ * main-menu * /

.main-nav .main-menu {
   display: none;
   list-style: none;
   padding: 0;
   margin: 0;
}

/ * menu-item * /

.main-nav .main-menu>.menu-item {
   display: table-cell;
   height: inherit;
   position: relative;
   text-align: center;
   padding: 0 15px;
}

The solution I was trying so far was too gambiarrada that was to put the div with the width of the screen in JQUERY and set left negative to depend on resolution range. Resolve, solve 1 but I think that maybe there may be a better solution even because when I scroll on the screen because it is being defined a manual left the div stops occupying the entire screen.

javascript jquery css div front-end

asked by anonymous 10.11.2017 / 00:03

1 answer

Global vector with variable length - programming in C [closed] Error trying to insert data into Mysql database [duplicate]

score 0 · Answer 1

From what I understand of your question you want the div submenu to occupy the full width of the preview window, correct? I did quite simply, without JavaScript / jQuery, with the following css:

.submenu {
    position: absolute;  
    width: calc(100vw + 15px);
    left: -15px;
}

I've switched to submenu that it starts at less than 15px (% with% of padding ) and that it occupies one hundred percent of ul (width of view window) plus 15px moved. You can see how it was in an example below:

.submenu {
  position: absolute;  
  width: calc(100vw + 15px);
  left: -15px;
  
  /* Apenas para ser visto */
  height: 100px;
  background: navy;
}

<ul class="main-menu">
  <li class="menu-item nossos-hoteis">
	   <a class="menu-link" href=""><span>Nossos Hotéis</span></a>
	   <div class="submenu"></div>
  </li>
</ul>