Positioning of the DIVs

I had this question after viewing jQuery DIV box colors and sizes.

Two issues left:
  The enclosing box height is too much (padding?).
  The enclosing box needs to be directly below the top level link whereas now it is diagonally down and to the right.
LVL 1
Howard BashSenior Software EngineerAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
Then just remove the
left: 0;
From the .sub-menu class (line 17 of css). I deliberately put that in to make the menus all left aligned.

What you can do is make the hover colour for the top menu different to indicate something like this.
.item:hover > a {
  background: red;
  color: white;
}

Open in new window

Updated sample here
0
 
zephyr_hex (Megan)DeveloperCommented:
Can you please post a screenshot which shows your divs?
0
 
Howard BashSenior Software EngineerAuthor Commented:
DIVs with current placement and arrow indicating desired positon.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Julian HansenCommented:
I would recommend changing your markup as the way you have it currently is not conducive to the layout that you want.

Any particular reason you are using div's and not <ul>?

It sounds like you are wanting a horizontal menu drop down with panel sub-menus.
0
 
Julian HansenCommented:
Following on from the above post - here is an example of the type of menu I think you are wanting

http://code.tutsplus.com/tutorials/how-to-build-a-kick-butt-css3-mega-drop-down-menu--net-15129

Please confirm.
0
 
Howard BashSenior Software EngineerAuthor Commented:
That menu looks nice.  But,  the reason that I want to use the DIVs (if possible) is for using this menu on a SharePoint site.  I want to replace the current NAV menus with this DIV structure.
0
 
Julian HansenCommented:
I still don't understand if you are replacing the existing menus anyway why you can't use an <ul><li> approach.
To do it your way you have to create a container for your top menu items
<div class="menu-container">
    <div class="menu">
          <a href="#">Menu Item 1</a>
    </div>
    <div class="menu">
          <a href="#">Menu Item 1</a>
    </div>
</div>

Open in new window


Then for your submenu links you have to have  a container for your dropdowns
<div class="menu-container">
   <div class="sub-menu" style="display: none">
      ...
   </div>
   <div class="sub-menu" style="display: none">
      ...
   </div>
   ...
</div>

Open in new window

This is going to change your CSS and JavaScript in terms of how you handle the hover.
Is this in line with what you are wanting?
0
 
Howard BashSenior Software EngineerAuthor Commented:
Not clear on your example.  Are the ",,," sections the ul,li sections for each "top link"?  Also,  in my DIV container there is a DIV for just the TOP Level Menu Item and a DIV containing it's subordinate links.  If you can show me a small example using your structure/css/javascript,  I can better know if it is okay for my purposes.
0
 
Julian HansenCommented:
The ... was for you to fill in your code.

The problem with your solution - and with my suggestion above - is that we want the sub-menu to stay open when we hover over it. With both these solutions hovering over the parent should result in the child being hidden as soon as the mouse moves off the parent - so the sub-menu needs to be a child of the top link.
Here is a quick and dirty (does not require JavaScript / jQuery)
CSS
.menu-container {
  position: relative;
}
.menu-container .item {
  float: left;
  padding: 0 15px;
}
.menu-container:after {
  display: table;
  content: " ";
  clear: both;
}
.sub-menu {
  background: #fff;
  border: 1px solid black;
  display: none;
  left: 0;
  position: absolute;
}
.item:hover .sub-menu {
  display: block;
}

Open in new window

HTML
  <div class="container">
    <h5>Author: Julian Hansen, September 2016</h5>
    <div class="menu-container">
      <div class="item">
        <a href="http://www.w3schools.com/js/default.asp">1-JavaScript Tutorial</a>
          <div class="sub-menu">
            <div class="col_1_1" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">2-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">3-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">4-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->
          
            <div class="col_1_2" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">5-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">6-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">7-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->

            <div class="col_1_3" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">8-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">9-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">10-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->

            <div class="col_1_4" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">11-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">12-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">13-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->

            <div class="col_1_5" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">14-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">15-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">16-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->

            <div class="col_1_6" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">17-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">18-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">19-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->
          </div>
          
      </div>
      <div class="item">
        <a href="http://www.w3schools.com/js/default.asp">20-JavaScript Tutorial</a><br/>
           
          <div class="sub-menu">
            <div class="col_2_1" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">21-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">22-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">23-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->
            
            <div class="col_2_2" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">24-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">25-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">26-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->

            <div class="col_2_3" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">27-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">28-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">29-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->

            <div class="col_2_4" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">30-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">31-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">32-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->

            <div class="col_2_5" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">33-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">34-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">35-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->

            <div class="col_2_6" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">36-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">37-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">38-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->
          </div>
        </div>
    </div>

Open in new window

Working sample here
0
 
Howard BashSenior Software EngineerAuthor Commented:
Very cool.  Thanks.  However,  there is an issue in that the dropdowns all appear at the same position and there is no visual sense which of the top level items we are seeing.
0
 
Howard BashSenior Software EngineerAuthor Commented:
Excellent!  Thank you sir!!!
0
 
Howard BashSenior Software EngineerAuthor Commented:
Excellent help.  Quick and clean!
0
 
Julian HansenCommented:
You are welcome.
0
All Courses

From novice to tech pro — start learning today.