2

Hello I am trying to add sub-menu inside a menu in right position in HTML. But I am facing an issue in terms of the positioning. I tried to fix that by using full ul and li tags, instead. But still I am facing many issues in terms of sizing, so I decided to go back for an old way. The example is in the link. I am sure I have to change class, but I am almost running out of ideas. So please help me, brothers. Here is the Link.

Salek
  • 449
  • 1
  • 10
  • 19
isslam akkilah
  • 418
  • 1
  • 11
  • 23

5 Answers5

0

For the sub menus dropdown add the css

.sub_mebu.dropdown-content{left:100%;}
Anu
  • 54
  • 6
0

for submenu

CSS

.dropdown-content .dropdown-content
{
  left:100%;
}

Hope this helps.

Roopendra
  • 7,674
  • 16
  • 65
  • 92
Chandra Shekhar
  • 3,550
  • 2
  • 14
  • 22
  • yes it's write but it dose no function as full sub menu like relative to the menu also leave gap and it's show up with the hover of the nav menu not the drop list – isslam akkilah Jul 03 '17 at 11:02
0

Just add another css rule, that is

.dropdown li.dropdown {
    display: inline-block;
    float:right;
}

hope it helps working fiddle

Shaminder Singh
  • 1,283
  • 2
  • 18
  • 31
  • yes it's write but it dose no function as full sub menu like relative to the menu also leave gap and it's show up with the hover of the nav menu not the drop list – isslam akkilah Jul 03 '17 at 11:04
0

Please add this code with dropdown and sub menu deropdown

demo link here https://jsfiddle.net/JentiDabhi/5hmgv8h4/

HTML

<ul class="nav-list"> 
                <li class="li-list"><a href="#Home" class="active">Home</a></li>

                <li class="li-list dropdown">
                    <a href="javascript:void(0)" class="dropbtn">Scoreboard</a>
                    <ul class="dropdown-content">
                     <li class="li-list dropdown">
                        <a href="javascript:void(0)" class="dropbtn-sub">Europe continent</a>
                                 <ul class="dropdown-content">
                                    <a href="#">Deep Menu 2</a>
                                    <a href="#">Deep Menu 2</a>
                                 </ul>
                            </li>

                         <li class="li-list"><a href="#">South continent</a></li>
                        <li class="li-list"> <a href="#">Asia continent</a></li>
                         <li class="li-list"><a href="#">Africa continent</a></li>
                         <li class="li-list"><a href="#">Australia continent</a></li>
                         <li class="li-list"><a href="#" id="bottom">North continent</a></li>
                    </ul>
                 </li>
                <li class="dropdown">
                    <a href="javascript:void(0)" class="dropbtn">Communities</a>
                    <div class="dropdown-content">
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                        <a href="#">Link 3</a>
                    </div>
                 </li>

            </ul>

CSS

.nav-list{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.li-list{
     float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    padding: 9px 12px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #f7ffba;
    color:red;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #333;
    width: 160px;

    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    padding: 0;
}
.dropdown-content li{
  list-style: none;
  width: 100%;
  display: inline-block;
}
.dropdown-content a {
    color: black;
    padding: 4px 6px;
    text-decoration: none;
    display: block;
    text-align: left;
    border-bottom: 1px dotted #f7ffba;
    /*position:relative;*/
}

.dropdown-content a:hover {background-color: #f7ffba}

.dropdown:hover > .dropdown-content ,
.dropdown-content .dropdown:hover > .dropdown-content {
    display: block;
}
.dropdown-content .dropdown > .dropdown-content{
  left: 100%;
  top: 0;
}
Jenti Dabhi
  • 870
  • 5
  • 11
0

You're using too many unnecessary html tags. Check my pen https://codepen.io/ery/pen/JJvdQX for more simple dropdown menu. Hope it helps

/* LEVEL 0 */
.nav ul {
  text-align: left; 
  margin: 0; 
  padding: 0;
}
.nav li {
  display: inline-block; 
  position: relative; 
  list-style: none;
}
.nav li > a {
  display: block;
  line-height: 32px;
  background: #666;
  color: #FFF;
  padding: 0 16px;
  text-decoration: none;
}
.nav li:hover > a {
  background: #333;
}

/* LEVEL 1 */

.nav ul ul {
  position: absolute;
  width: 160px;
  left: 0;
  top: 32px; /* same value with line 13 */
  background: #333;
}

.nav li li {display: list-item}
.nav li li a {background: transparent;}
.nav li li a:hover {background: #999; }

/* LEVEL 2 */
.nav ul ul ul {
  top: 0;
  left: 160px; /* same value with line 28 */
}

/* Dropdown triggers */
.nav ul ul, .nav ul li:hover ul ul, .nav ul ul li:hover ul ul {display: none;}
.nav ul li:hover ul, .nav ul ul li:hover ul, .nav ul ul ul li:hover ul {display: block;}
<div class="nav">
  <ul>
    <li><a href="#">menu 01</a>
      <ul>
        <li><a href="#">submenu 01</a>
          <ul>
            <li><a href="#">sub-submenu 01</a></li>
            <li><a href="#">sub-submenu 02</a></li>
          </ul>
        </li>
        <li><a href="#">submenu 02</a></li>
        <li><a href="#">submenu 03</a></li>
      </ul>
    </li>
    <li><a href="#">menu 02</a></li>
    <li><a href="#">menu 03</a></li>
    <li><a href="#">menu 04</a></li>
  </ul>
</div>
Ahmad Syukaery
  • 51
  • 2