Why when I do width 50% for 2 <li> inside <ul> with width 100%, there is not space for both of them?

1770 views html
-2

I have a nav with 2 lines of subnav (green and orange). Each subcategory () has width 100%. And for

  • inside I try to give 33.333% or 50%(depends on 3 or 2
  • inside) Each category changes background on red on hover. Why when I do width 50% for 2
  • or 33.333% for 3
  • inside with width 100%, there is not space for both of them and they go down? I don't have a paddings or margin. Can you help me to find the reason?`

       
    
    /*
      ******************
      * HEADER
      ******************
      */
    
    .navtop .selected {
      color: rgb(241, 72, 72);
      font-weight: 700;
    }
    
    .navtop a {
      text-decoration: none;
      color: #808080;
      width: 100%;
      height: 100%;
      display: inline-block;
    }
    
    .menu-link,
    label {
      display: none;
    }
    
    @media (min-width: 768px) {
      #header {
        width: 100%;
        height: 66px;
        position: fixed;
        top: 0;
        background: white;
        z-index: 4;
        line-height: 66px;
      }
      .logo-black {
        float: left;
        margin-left: 15px;
      }
      .navtop {
        float: right;
      }
      .first-line-nav,
      .second-line-nav,
      .third-line-nav {
        display: inline-block;
      }
      .first-line-nav {
        padding-right: 15px;
        height: 100%;
        cursor: pointer;
      }
      .second-line-nav {
        width: 30%;
      }
      .third-line-nav {
        width: 49%;
      }
      .second-line-nav,
      .third-line-nav {
        line-height: 132px;
        text-align: center;
      }
      .navtop>ul>li>ul {
        position: absolute;
        top: 66px;
        left: 0px;
        right: 0px;
        width: 100%;
        height: 132px;
        transform: scale(1, 0);
        transition: transform 0.2s;
        background: green;
        opacity: 0.99;
      }
      .navtop li:hover>ul {
        transform: scale(1, 1);
      }
      .navtop ul ul ul {
        position: absolute;
        top: 132px;
        left: 0;
        right: 0;
        transform: scale(1, 0);
        transition: transform 0.2s;
        height: 132px;
        background: orange;
        opacity: 0.99;
      }
      nav ul ul li {
        text-transform: uppercase;
      }
      nav ul li ul li a:hover {
        background: rgb(241, 72, 72);
      }
      nav ul li ul li:hover>a {
        color: white;
      }
      .navtop>ul>li>ul>li>ul>li:hover .navtop>ul>li>ul>li {
        background: white;
        color: #808080;
      }
    }
    
    @media (max-width: 767px) {
      header {
        width: 100%;
        height: 66px;
        position: fixed;
        top: 0;
        background: white;
        z-index: 4;
        clear: both;
      }
      .logo-black {
        margin-top: 20px;
        padding-left: 25px;
        height: 30px;
        float: left;
      }
      .navtop {
        width: 100%;
        height: 550px;
        background: white;
        margin-top: 66px;
        display: none;
      }
      .navtop li {
        margin-left: 30px;
        line-height: 1.9;
      }
      .navtop ul li ul li::before {
        content: "- ";
      }
      .menu-link~.icon-menu {
        font-size: 24px;
        display: block;
        float: right;
        margin-top: 2%;
        padding-right: 2%;
      }
      .menu-link~.icon-cross {
        display: none;
      }
      .menu-link:checked~.icon-menu {
        display: none;
      }
      .menu-link:checked~.icon-cross {
        display: block;
        font-size: 24px;
        float: right;
        padding-right: 2%;
        margin-top: 2%;
      }
      .menu-link:checked~.navtop {
        display: block;
      }
      .icon-menu:hover,
      .icon-cross:hover {
        color: rgb(241, 72, 72);
      }
    }
    <header id="header">
    
    
      <nav class="navtop">
        <ul>
          <li class="first-line-nav">
            <a href="#" class="selected">Home</a>
          </li>
          <li class="first-line-nav">
            <a href="#">Our Solutions</a>
            <ul>
              <li class="second-line-nav">
                <a>EL CLOUD</a>
                <ul>
                  <li class="third-line-nav">
                    <a href="#">EI
                                            <sup>X</sup>
                                        </a>
                  </li>
                  <li class="third-line-nav">
                    <a href="#">EI MIND</a>
                  </li>
                </ul>
              </li>
              <li class="second-line-nav">
                <a>EL MIDDLEWARE</a>
                <ul>
                  <li class="third-line-nav">
                    <a href="#">ANDROID</a>
                  </li>
                  <li class="third-line-nav">
                    <a href="#">COMIGO WHATCHAPP
                                            <sup>TM</sup>
                                            APPLICATION</a>
                  </li>
                </ul>
              </li>
  • answered question

    1 Answer

    3

    You should set a id to call them on click i think your code is not running. if i am not wrong please show some pictures that

    posted this

    Have an answer?

    JD

    Please login first before posting an answer.