CODEWITHSUNDEEP
htmlcss
dstN
dstN

Reputation: 332

How to get auto-height from position: absolute element?

I have a menu with a deepness of 3. I want to have the 2nd layer left, and the 3rd layer right in a dropdown.

The 3rd layer needs to be absolute positioned otherwise it won't fit to the left of the 2nd layer, but while positioning absolute the height won't go with the absolute-positioned <ul>. It only reaches the two 2nd layer-<li>-height.

Snippet:

#main_navigation {
  background-color: #006600;
  position: relative;
  height: 35px;
  font-size: 10px;
}
#main_navigation ul {
  list-style-type: none;
}
#main_navigation>nav>ul>li {
  background: none;
  float: none;
  display: inline-block;
  margin-right: -3px;
  line-height: inherit;
  border-left: 1px solid #6bb36b;
  position: static;
}
#main_navigation>nav>ul>li>a {
  color: #fff;
  text-decoration: none;
  font-size: 1.5em;
  background-color: transparent;
  display: inline-block;
  float: none;
  padding: 10px;
  padding-top: 8px;
  padding-bottom: 9px;
  transition: background-color ease-in-out 0.46s;
  font-weight: bold; 
}
#main_navigation>nav>ul>li:hover>a, #main_navigation #navigation>ul>li:focus>a {
  background-color: #6bb36b;
  transition: background-color ease-in-out 0.35s;
  text-decoration: none;
  font-weight: bold;
}
#main_navigation>nav>ul>li.dropdown_parent>ul.dropdown {
  top: 300%;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  display: block;
  width: 100%;
  margin-top: 0;
  background: none;
  background-color: #006600;
  position: absolute;
  left: 0;
  padding: 0;
  box-shadow: 0px 5px 12px 0px #333;
  border-top: 2px solid #6bb36b;
  border-bottom: 2px solid #081a08;
  transition: all ease-out 0.45s;
}
#main_navigation>nav>ul>li.dropdown_parent:hover>ul.dropdown, #main_navigation>nav>ul>li.dropdown_parent:focus>ul.dropdown {
  top: 35px;
  z-index: 1000;
  opacity: 1;
  visibility: visible;
  transition: all ease-in 0.35s;
}
#main_navigation>nav>ul>li.dropdown_parent>ul.dropdown>li.parent {
  width: 50%;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  position: relative;
}
#main_navigation>nav>ul>li.dropdown_parent>ul.dropdown>li.parent>ul.child {
  position: absolute;
  width: 100%;
  top: 0;
  left: 100%;
  padding: 0;
}
#main_navigation>#navigation>ul>li.dropdown_parent>ul.dropdown>li.parent a:not(.childtrigger) {
  font-size: 15px;
  display: block;
  padding: 10px;
  color: #fff;
  margin-right: 50px;
  text-decoration: none;
  transition: all ease-in-out 0.3s;
}
#main_navigation>#navigation>ul>li.dropdown_parent>ul.dropdown>li.parent a:not(.childtrigger):hover, #main_navigation>#navigation>ul>li.dropdown_parent>ul.dropdown>li>li.parent a:not(.childtrigger):focus, #main_navigation>#navigation>ul>li.dropdown_parent>ul.dropdown>li.parent.active a:not(.childtrigger) {
  background-color: #6bb36b;
  transition: all ease-in-out 0.3s;
}
#main_navigation>#navigation>ul>li.dropdown_parent>ul.dropdown>li.parent a.childtrigger {
  background: rgba(3, 2, 1, 0);
  width: 50px;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  cursor: pointer;
  transition: all ease-in-out 0.3s;
}
#main_navigation>#navigation>ul>li.dropdown_parent>ul.dropdown>li.parent a.childtrigger:after {
  content: "";
  border: 2px solid transparent;
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 23px;
  border-top: none;
  border-left: none;
  border-color: #fff;
  transition: all ease-in-out 0.3s;
}
#main_navigation>#navigation>ul>li.dropdown_parent>ul.dropdown>li.parent a.childtrigger:hover, #main_navigation>#navigation>ul>li.dropdown_parent>ul.dropdown>li.parent a.childtrigger:focus {
  background-color: #6bb36b;
  transition: all ease-in-out 0.3s;
}
#main_navigation>#navigation>ul>li.dropdown_parent>ul.dropdown>li.parent a.childtrigger:hover:after, #main_navigation>#navigation>ul>li.dropdown_parent>ul.dropdown>li.parent a.childtrigger:focus:after {
  border-color: #fff;
  transition: all ease-in-out 0.3s;
}
<div id="main_navigation">
  <nav id="navigation">
    <ul>
      <li><a href="#">Home</a></li>
      <li class="dropdown_parent active">
        <a href="#">Dropdown</a>
        <ul class="dropdown">
          <li class="parent">
            <a class="childtrigger"></a>
            <a href="#">Submenuparent</a>
            <ul class="child">
              <li><a href="#">Bla</a></li>
              <li><a href="#">Bla</a></li>
              <li><a href="#">Bla</a></li>
              <li><a href="#">Bla</a></li>
              <li><a href="#">Bla</a></li>
              <li><a href="#">Bla</a></li>
            </ul>
          </li>
          <li class="parent">
            <a class="childtrigger"></a>
            <a href="#">Submenuparent 2</a>
            <ul class="child">
              <li><a href="#">Bla 2</a></li>
              <li><a href="#">Bla 2</a></li>
              <li><a href="#">Bla 2</a></li>
              <li><a href="#">Bla 2</a></li>
              <li><a href="#">Bla 2</a></li>
              <li><a href="#">Bla 2</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

And the fiddle: https://jsfiddle.net/u5gwqzfo/

This is how it should look like: https://i.sstatic.net/hR0Y4.jpg

Many thanks in advance!

Upvotes: 0

Views: 3367

Answers (1)

NeilWkz
NeilWkz

Reputation: 245

You can't size the .parent with the absolutely positioned .child as absolute positioning removes the element from the box model.

If you're tied to this markup structure you can use javascript to set the height of the .dropdown to be the same as the height of the .child

(I used jquery)

something like :

$(".parent").hover(function() {
    x = $(this).find(".child").height();
$(this).parent('.dropdown').css({
    'height': x + 'px'
   });
 }, function() {
  $(this).parent('.dropdown').css({
    'height': 'auto'
  });
});

I here's (a very janky) pen to demonstrate what I mean. http://codepen.io/NeilWkz/pen/YWwpgJ

Upvotes: 1

Related Questions