Nav menyusi ochilmaydi va formatlash muammolarini keltirib chiqarmaydi (HTML + CSS)

I'm trying to make a simple drop down nav menu with HTML and CSS. When I add the drop down list in, my menu goes onto two lines instead of one, and the menu doesn't appear upon hover. jsfiddle: https://jsfiddle.net/qbwyLzqj/

Xatoimning qaerdaligini ko'rmayapman.

.menu li {
  padding: 10px;
}

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.navigation {
      width: 80%;
      margin: 0 auto;
    }
    
    .menu {
      display: inline-block;
      width: 70%;
      text-align: center;
    }
    
    .menu a {
      text-decoration: none;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
    }
    
    #menu-item-1,
    #menu-item-2,
    #menu-item-3,
    #menu-item-4,
    #menu-item-5,
    #menu-item-6 {
      display: inline-block;
    }
    
    .menu li {
      padding: 10px;
    }
    
    .menu li a:hover {
      color: grey;
    }
    
    .sub-menu-2 li {
      display: none;
    }
    
    .menu li:hover .sub-menu-2 li {
      display: block;
    }
 
    
    
</div> </div>

1
Pastki menyuda "ko'proq ma'lumot" ustidan yurish kerakmi?
qo'shib qo'ydi muallif DevMoutarde, manba
Pastki menyuda "ko'proq ma'lumot" ustidan yurish kerakmi?
qo'shib qo'ydi muallif DevMoutarde, manba
Pastki menyu-2 noto'g'ri o'rnatilgan.
  • Qo'shimcha ma'lumot
  • Xizmat
  • Xizmatlar
  • savollar
  • qo'shib qo'ydi muallif Mers, manba
    Pastki menyu-2 noto'g'ri o'rnatilgan.
  • Qo'shimcha ma'lumot
  • Xizmat
  • Xizmatlar
  • savollar
  • qo'shib qo'ydi muallif Mers, manba
    Pastki menyu-2 noto'g'ri o'rnatilgan.
  • Qo'shimcha ma'lumot
  • Xizmat
  • Xizmatlar
  • savollar
  • qo'shib qo'ydi muallif Mers, manba
    Ha, uzr so'rayman!
    qo'shib qo'ydi muallif Dana Nicole, manba
    Ha, uzr so'rayman!
    qo'shib qo'ydi muallif Dana Nicole, manba

    33 javoblar

    Ushbu jsfiddle harakat qilib ko'ring:

    HTMLni o'zgartirish

    
    

    Qo'shish CSS

    .sub-menu-2 {
      position: absolute;
      background: #fff;
    }
    

    jsfiddle

    1
    qo'shib qo'ydi

    Ushbu jsfiddle harakat qilib ko'ring:

    HTMLni o'zgartirish

    
    

    Qo'shish CSS

    .sub-menu-2 {
      position: absolute;
      background: #fff;
    }
    

    jsfiddle

    1
    qo'shib qo'ydi

    Ushbu jsfiddle harakat qilib ko'ring:

    HTMLni o'zgartirish

    
    

    Qo'shish CSS

    .sub-menu-2 {
      position: absolute;
      background: #fff;
    }
    

    jsfiddle

    1
    qo'shib qo'ydi

    Ushbu jsfiddle harakat qilib ko'ring:

    HTMLni o'zgartirish

    
    

    Qo'shish CSS

    .sub-menu-2 {
      position: absolute;
      background: #fff;
    }
    

    jsfiddle

    1
    qo'shib qo'ydi

    Sizning "menyu-item-2" ni o'zgartiring,

      
    
    

    va bu CSS kodingizni qo'shing

        .sub-menu-2 {
          position: absolute;
          background: #fff;
         }
    
    0
    qo'shib qo'ydi

    Sizning "menyu-item-2" ni o'zgartiring,

      
    
    

    va bu CSS kodingizni qo'shing

        .sub-menu-2 {
          position: absolute;
          background: #fff;
         }
    
    0
    qo'shib qo'ydi

    Sizning "menyu-item-2" ni o'zgartiring,

      
    
    

    va bu CSS kodingizni qo'shing

        .sub-menu-2 {
          position: absolute;
          background: #fff;
         }
    
    0
    qo'shib qo'ydi

    Sizning "menyu-item-2" ni o'zgartiring,

      
    
    

    va bu CSS kodingizni qo'shing

        .sub-menu-2 {
          position: absolute;
          background: #fff;
         }
    
    0
    qo'shib qo'ydi

    Siz shunga o'xshash biror narsani sinashingiz mumkin ...

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    .navigation {
      width: 80%;
      margin: 0 auto;
    }
    .menu {
      display: inline-block;
      width: 100%;
      text-align: center;
      list-style-type: none;
      padding: 0px; 
      margin: 0px;
      display: flex;
      justify-content: center;
    }
    .menu a {
      text-decoration: none;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
    }
    .menu li {
      padding: 10px;
    }
    #menu-item-2 {
      position: relative;
      white-space: nowrap;
    }
    .sub-menu-2 {
      list-style-type: none; 
      padding: 0px;
      margin: 0px;
    }
    .sub-menu-2 li {
      display: none;
      padding: 0px; 
      margin: 0px;
      width: 100%;
    }
    .menu li:hover .sub-menu-2 li {
      display: block;
    }
    
    
    </div> </div>

    0
    qo'shib qo'ydi

    Siz shunga o'xshash biror narsani sinashingiz mumkin ...

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    .navigation {
      width: 80%;
      margin: 0 auto;
    }
    .menu {
      display: inline-block;
      width: 100%;
      text-align: center;
      list-style-type: none;
      padding: 0px; 
      margin: 0px;
      display: flex;
      justify-content: center;
    }
    .menu a {
      text-decoration: none;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
    }
    .menu li {
      padding: 10px;
    }
    #menu-item-2 {
      position: relative;
      white-space: nowrap;
    }
    .sub-menu-2 {
      list-style-type: none; 
      padding: 0px;
      margin: 0px;
    }
    .sub-menu-2 li {
      display: none;
      padding: 0px; 
      margin: 0px;
      width: 100%;
    }
    .menu li:hover .sub-menu-2 li {
      display: block;
    }
    
    
    </div> </div>

    0
    qo'shib qo'ydi

    Siz shunga o'xshash biror narsani sinashingiz mumkin ...

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    .navigation {
      width: 80%;
      margin: 0 auto;
    }
    .menu {
      display: inline-block;
      width: 100%;
      text-align: center;
      list-style-type: none;
      padding: 0px; 
      margin: 0px;
      display: flex;
      justify-content: center;
    }
    .menu a {
      text-decoration: none;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
    }
    .menu li {
      padding: 10px;
    }
    #menu-item-2 {
      position: relative;
      white-space: nowrap;
    }
    .sub-menu-2 {
      list-style-type: none; 
      padding: 0px;
      margin: 0px;
    }
    .sub-menu-2 li {
      display: none;
      padding: 0px; 
      margin: 0px;
      width: 100%;
    }
    .menu li:hover .sub-menu-2 li {
      display: block;
    }
    
    
    </div> </div>

    0
    qo'shib qo'ydi

    Siz shunga o'xshash biror narsani sinashingiz mumkin ...

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    .navigation {
      width: 80%;
      margin: 0 auto;
    }
    .menu {
      display: inline-block;
      width: 100%;
      text-align: center;
      list-style-type: none;
      padding: 0px; 
      margin: 0px;
      display: flex;
      justify-content: center;
    }
    .menu a {
      text-decoration: none;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
    }
    .menu li {
      padding: 10px;
    }
    #menu-item-2 {
      position: relative;
      white-space: nowrap;
    }
    .sub-menu-2 {
      list-style-type: none; 
      padding: 0px;
      margin: 0px;
    }
    .sub-menu-2 li {
      display: none;
      padding: 0px; 
      margin: 0px;
      width: 100%;
    }
    .menu li:hover .sub-menu-2 li {
      display: block;
    }
    
    
    </div> </div>

    0
    qo'shib qo'ydi
    1. Place the dropdown ul inside the li
    2. Use positioning to prevent the dropdown menu from affecting the rest of the list items

    fiddle

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    .navigation {
      width: 100%;
      margin: 0 auto;
    }
    
    .menu {
      display: inline-block;
      width: 70%;
      text-align: center;
    }
    
    .menu a {
      text-decoration: none;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
    }
    
    #menu-item-1,
    #menu-item-2,
    #menu-item-3,
    #menu-item-4,
    #menu-item-5,
    #menu-item-6 {
      display: inline-block;
    }
    
    .menu li {
      padding: 10px;
    }
    
    .menu li a:hover {
      color: grey;
    }
    
    #menu-item-2 {
      position: relative;
    }
    
    .sub-menu-2 {
      display: none;
      position: absolute;
      list-style: none;
      text-align: left;
      margin: 0;
      padding: 0;
    }
    
    .sub-menu-2 li {
      padding: 10px 0;
    }
    
    .menu li:hover .sub-menu-2 {
      display: block;
    }
    <!-- nav -->
    
    </div> </div>

    0
    qo'shib qo'ydi
    1. Place the dropdown ul inside the li
    2. Use positioning to prevent the dropdown menu from affecting the rest of the list items

    fiddle

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    .navigation {
      width: 100%;
      margin: 0 auto;
    }
    
    .menu {
      display: inline-block;
      width: 70%;
      text-align: center;
    }
    
    .menu a {
      text-decoration: none;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
    }
    
    #menu-item-1,
    #menu-item-2,
    #menu-item-3,
    #menu-item-4,
    #menu-item-5,
    #menu-item-6 {
      display: inline-block;
    }
    
    .menu li {
      padding: 10px;
    }
    
    .menu li a:hover {
      color: grey;
    }
    
    #menu-item-2 {
      position: relative;
    }
    
    .sub-menu-2 {
      display: none;
      position: absolute;
      list-style: none;
      text-align: left;
      margin: 0;
      padding: 0;
    }
    
    .sub-menu-2 li {
      padding: 10px 0;
    }
    
    .menu li:hover .sub-menu-2 {
      display: block;
    }
    <!-- nav -->
    
    </div> </div>

    0
    qo'shib qo'ydi
    1. Place the dropdown ul inside the li
    2. Use positioning to prevent the dropdown menu from affecting the rest of the list items

    fiddle

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    .navigation {
      width: 100%;
      margin: 0 auto;
    }
    
    .menu {
      display: inline-block;
      width: 70%;
      text-align: center;
    }
    
    .menu a {
      text-decoration: none;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
    }
    
    #menu-item-1,
    #menu-item-2,
    #menu-item-3,
    #menu-item-4,
    #menu-item-5,
    #menu-item-6 {
      display: inline-block;
    }
    
    .menu li {
      padding: 10px;
    }
    
    .menu li a:hover {
      color: grey;
    }
    
    #menu-item-2 {
      position: relative;
    }
    
    .sub-menu-2 {
      display: none;
      position: absolute;
      list-style: none;
      text-align: left;
      margin: 0;
      padding: 0;
    }
    
    .sub-menu-2 li {
      padding: 10px 0;
    }
    
    .menu li:hover .sub-menu-2 {
      display: block;
    }
    <!-- nav -->
    
    </div> </div>

    0
    qo'shib qo'ydi

    Iltimos, quyidagi kodni ko'ring.

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    .navigation {
      width: 80%;
      margin: 0 auto;
    }
    
    .menu {
      display: inline-block;
      width: 70%;
      text-align: center;
    }
    
    .menu a {
      text-decoration: none;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
    }
    
    #menu-item-1,
    #menu-item-2,
    #menu-item-3,
    #menu-item-4,
    #menu-item-5,
    #menu-item-6 {
      display: inline-block;
    }
    
    .menu li {
      padding: 10px;
      position: relative;
    }
    
    .menu li a:hover {
      color: grey;
    }
    
    .sub-menu-2 {
      display: none;
      list-style: none;
      position: absolute;
      top: 100%;
      left: 0;
      padding: 0;
      margin: 0;
    }
    
    .menu li:hover .sub-menu-2 {
      display: block;
    }
    
    
    </div> </div>

    0
    qo'shib qo'ydi

    Iltimos, quyidagi kodni ko'ring.

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    .navigation {
      width: 80%;
      margin: 0 auto;
    }
    
    .menu {
      display: inline-block;
      width: 70%;
      text-align: center;
    }
    
    .menu a {
      text-decoration: none;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
    }
    
    #menu-item-1,
    #menu-item-2,
    #menu-item-3,
    #menu-item-4,
    #menu-item-5,
    #menu-item-6 {
      display: inline-block;
    }
    
    .menu li {
      padding: 10px;
      position: relative;
    }
    
    .menu li a:hover {
      color: grey;
    }
    
    .sub-menu-2 {
      display: none;
      list-style: none;
      position: absolute;
      top: 100%;
      left: 0;
      padding: 0;
      margin: 0;
    }
    
    .menu li:hover .sub-menu-2 {
      display: block;
    }
    
    
    </div> </div>

    0
    qo'shib qo'ydi

    Iltimos, quyidagi kodni ko'ring.

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    .navigation {
      width: 80%;
      margin: 0 auto;
    }
    
    .menu {
      display: inline-block;
      width: 70%;
      text-align: center;
    }
    
    .menu a {
      text-decoration: none;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
    }
    
    #menu-item-1,
    #menu-item-2,
    #menu-item-3,
    #menu-item-4,
    #menu-item-5,
    #menu-item-6 {
      display: inline-block;
    }
    
    .menu li {
      padding: 10px;
      position: relative;
    }
    
    .menu li a:hover {
      color: grey;
    }
    
    .sub-menu-2 {
      display: none;
      list-style: none;
      position: absolute;
      top: 100%;
      left: 0;
      padding: 0;
      margin: 0;
    }
    
    .menu li:hover .sub-menu-2 {
      display: block;
    }
    
    
    </div> </div>

    0
    qo'shib qo'ydi

    Iltimos, quyidagi kodni ko'ring.

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    .navigation {
      width: 80%;
      margin: 0 auto;
    }
    
    .menu {
      display: inline-block;
      width: 70%;
      text-align: center;
    }
    
    .menu a {
      text-decoration: none;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
    }
    
    #menu-item-1,
    #menu-item-2,
    #menu-item-3,
    #menu-item-4,
    #menu-item-5,
    #menu-item-6 {
      display: inline-block;
    }
    
    .menu li {
      padding: 10px;
      position: relative;
    }
    
    .menu li a:hover {
      color: grey;
    }
    
    .sub-menu-2 {
      display: none;
      list-style: none;
      position: absolute;
      top: 100%;
      left: 0;
      padding: 0;
      margin: 0;
    }
    
    .menu li:hover .sub-menu-2 {
      display: block;
    }
    
    
    </div> </div>

    0
    qo'shib qo'ydi

    Mizanpajni buzishdan tashqari, uni yanada ko'proq yaxshilashingiz mumkin.

    Muammo haqida; bu sizning kodingiz .sub-menu-2 dan foydalanmaganligingiz sabab bo'ldi. li . Men buni tuzatdim va ota-ona ro'yxatidagi narsalarni ko'rishga yordam beradigan pastki menyuni ko'rsatish uchun kodingizga qo'shimcha moslashuvchanlikni qo'shdi.

    O'zingizni tekshiring. fiddle <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    .navigation {
      width: 80%;
      margin: 0 auto;
    }
    
    .menu {
      display: inline-block;
      width: 70%;
      text-align: center;
    }
    
    .menu a {
      text-decoration: none;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
    }
    
    #menu-item-1,
    #menu-item-2,
    #menu-item-3,
    #menu-item-4,
    #menu-item-5,
    #menu-item-6 {
      display: inline-block;
    }
    
    .menu li {
      padding: 10px;
      position: relative;
    }
    
    .menu li a:hover {
      color: grey;
    }
    
    .sub-menu-2 {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      padding: 0;
      text-align: left;
    }
    
    .sub-menu-2 li {
    display: block;
    }
    
    .menu li:hover .sub-menu-2 {
      display: block;
    }
    
    
    </div> </div>

    Umid qilamanki, bu juda foydali bo'ldi. Cheers!

    0
    qo'shib qo'ydi
    Yordam berishdan xursandman. Agar siz bu mukammal javob deb hisoblasangiz, buni uni qabul qilingan deb hisoblang. Baxtli o'rganish :)
    qo'shib qo'ydi muallif Rahul Arora, manba
    Rahmat! Men aynan shu narsani qidiryapman.
    qo'shib qo'ydi muallif Dana Nicole, manba

    Mizanpajni buzishdan tashqari, uni yanada ko'proq yaxshilashingiz mumkin.

    Muammo haqida; bu sizning kodingiz .sub-menu-2 dan foydalanmaganligingiz sabab bo'ldi. li . Men buni tuzatdim va ota-ona ro'yxatidagi narsalarni ko'rishga yordam beradigan pastki menyuni ko'rsatish uchun kodingizga qo'shimcha moslashuvchanlikni qo'shdi.

    O'zingizni tekshiring. fiddle <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    .navigation {
      width: 80%;
      margin: 0 auto;
    }
    
    .menu {
      display: inline-block;
      width: 70%;
      text-align: center;
    }
    
    .menu a {
      text-decoration: none;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
    }
    
    #menu-item-1,
    #menu-item-2,
    #menu-item-3,
    #menu-item-4,
    #menu-item-5,
    #menu-item-6 {
      display: inline-block;
    }
    
    .menu li {
      padding: 10px;
      position: relative;
    }
    
    .menu li a:hover {
      color: grey;
    }
    
    .sub-menu-2 {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      padding: 0;
      text-align: left;
    }
    
    .sub-menu-2 li {
    display: block;
    }
    
    .menu li:hover .sub-menu-2 {
      display: block;
    }
    
    
    </div> </div>

    Umid qilamanki, bu juda foydali bo'ldi. Cheers!

    0
    qo'shib qo'ydi
    Yordam berishdan xursandman. Agar siz bu mukammal javob deb hisoblasangiz, buni uni qabul qilingan deb hisoblang. Baxtli o'rganish :)
    qo'shib qo'ydi muallif Rahul Arora, manba
    Rahmat! Men aynan shu narsani qidiryapman.
    qo'shib qo'ydi muallif Dana Nicole, manba

    Mizanpajni buzishdan tashqari, uni yanada ko'proq yaxshilashingiz mumkin.

    Muammo haqida; bu sizning kodingiz .sub-menu-2 dan foydalanmaganligingiz sabab bo'ldi. li . Men buni tuzatdim va ota-ona ro'yxatidagi narsalarni ko'rishga yordam beradigan pastki menyuni ko'rsatish uchun kodingizga qo'shimcha moslashuvchanlikni qo'shdi.

    O'zingizni tekshiring. fiddle <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    .navigation {
      width: 80%;
      margin: 0 auto;
    }
    
    .menu {
      display: inline-block;
      width: 70%;
      text-align: center;
    }
    
    .menu a {
      text-decoration: none;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
    }
    
    #menu-item-1,
    #menu-item-2,
    #menu-item-3,
    #menu-item-4,
    #menu-item-5,
    #menu-item-6 {
      display: inline-block;
    }
    
    .menu li {
      padding: 10px;
      position: relative;
    }
    
    .menu li a:hover {
      color: grey;
    }
    
    .sub-menu-2 {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      padding: 0;
      text-align: left;
    }
    
    .sub-menu-2 li {
    display: block;
    }
    
    .menu li:hover .sub-menu-2 {
      display: block;
    }
    
    
    </div> </div>

    Umid qilamanki, bu juda foydali bo'ldi. Cheers!

    0
    qo'shib qo'ydi
    Yordam berishdan xursandman. Agar siz bu mukammal javob deb hisoblasangiz, buni uni qabul qilingan deb hisoblang. Baxtli o'rganish :)
    qo'shib qo'ydi muallif Rahul Arora, manba
    Rahmat! Men aynan shu narsani qidiryapman.
    qo'shib qo'ydi muallif Dana Nicole, manba

    Mizanpajni buzishdan tashqari, uni yanada ko'proq yaxshilashingiz mumkin.

    Muammo haqida; bu sizning kodingiz .sub-menu-2 dan foydalanmaganligingiz sabab bo'ldi. li . Men buni tuzatdim va ota-ona ro'yxatidagi narsalarni ko'rishga yordam beradigan pastki menyuni ko'rsatish uchun kodingizga qo'shimcha moslashuvchanlikni qo'shdi.

    O'zingizni tekshiring. fiddle <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    .navigation {
      width: 80%;
      margin: 0 auto;
    }
    
    .menu {
      display: inline-block;
      width: 70%;
      text-align: center;
    }
    
    .menu a {
      text-decoration: none;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
    }
    
    #menu-item-1,
    #menu-item-2,
    #menu-item-3,
    #menu-item-4,
    #menu-item-5,
    #menu-item-6 {
      display: inline-block;
    }
    
    .menu li {
      padding: 10px;
      position: relative;
    }
    
    .menu li a:hover {
      color: grey;
    }
    
    .sub-menu-2 {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      padding: 0;
      text-align: left;
    }
    
    .sub-menu-2 li {
    display: block;
    }
    
    .menu li:hover .sub-menu-2 {
      display: block;
    }
    
    
    </div> </div>

    Umid qilamanki, bu juda foydali bo'ldi. Cheers!

    0
    qo'shib qo'ydi
    Yordam berishdan xursandman. Agar siz bu mukammal javob deb hisoblasangiz, buni uni qabul qilingan deb hisoblang. Baxtli o'rganish :)
    qo'shib qo'ydi muallif Rahul Arora, manba
    Rahmat! Men aynan shu narsani qidiryapman.
    qo'shib qo'ydi muallif Dana Nicole, manba

    Yangilangan fayl bilan harakat qilib ko'ring

    .menu li {
      position:relative;
    }
    .sub-menu-2 {
        position:absolute;
        left:0;
        text-align:left;
        width:100%;
    
     }
    

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    .navigation {
      width: 80%;
      margin: 0 auto;
    }
    
    .menu {
      display: inline-block;
      width: 70%;
      text-align: center;
    }
    
    .menu a {
      text-decoration: none;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
    }
    
    #menu-item-1,
    #menu-item-2,
    #menu-item-3,
    #menu-item-4,
    #menu-item-5,
    #menu-item-6 {
      display: inline-block;
    }
    
    .menu li {
      padding: 10px;
      position:relative;
    }
    
    .menu li a:hover {
      color: grey;
    }
    
    .sub-menu-2 li {
      display: none;
    }
    
    .menu li:hover .sub-menu-2 li {
      display: block;
      padding-left:0;
    }
    .sub-menu-2 {
      position:absolute;
      left:0;
      text-align:left;
      width:100%;
      
    }
    <!-- nav -->
    
    </div> </div>

    here is the fiddle fiddle

    0
    qo'shib qo'ydi

    Yangilangan fayl bilan harakat qilib ko'ring

    .menu li {
      position:relative;
    }
    .sub-menu-2 {
        position:absolute;
        left:0;
        text-align:left;
        width:100%;
    
     }
    

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    .navigation {
      width: 80%;
      margin: 0 auto;
    }
    
    .menu {
      display: inline-block;
      width: 70%;
      text-align: center;
    }
    
    .menu a {
      text-decoration: none;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
    }
    
    #menu-item-1,
    #menu-item-2,
    #menu-item-3,
    #menu-item-4,
    #menu-item-5,
    #menu-item-6 {
      display: inline-block;
    }
    
    .menu li {
      padding: 10px;
      position:relative;
    }
    
    .menu li a:hover {
      color: grey;
    }
    
    .sub-menu-2 li {
      display: none;
    }
    
    .menu li:hover .sub-menu-2 li {
      display: block;
      padding-left:0;
    }
    .sub-menu-2 {
      position:absolute;
      left:0;
      text-align:left;
      width:100%;
      
    }
    <!-- nav -->
    
    </div> </div>

    here is the fiddle fiddle

    0
    qo'shib qo'ydi

    Siz foydalanishingiz mumkin

    <!-- nav -->
    
    
    .navigation{
       width: 80%;
      margin: 0 auto;
    
    }
    .menu,.menu ul{
      list-style:none;
      padding:0;
    }
    .menu >li{
      position:relative;
      display:inline-block;
       padding: 5px;
      }
      .menu a {
      text-decoration: none;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
    }
    .menu >li ul{
      position: absolute;
        display: none;
        left: 0;
        top: 100%;
          display: none;
      }
      .menu >li:hover ul{
       display: block;
      }
    

    It is fiddler link aswell https://jsfiddle.net/8engpfu1/1/

    0
    qo'shib qo'ydi

    Siz foydalanishingiz mumkin

    <!-- nav -->
    
    
    .navigation{
       width: 80%;
      margin: 0 auto;
    
    }
    .menu,.menu ul{
      list-style:none;
      padding:0;
    }
    .menu >li{
      position:relative;
      display:inline-block;
       padding: 5px;
      }
      .menu a {
      text-decoration: none;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
    }
    .menu >li ul{
      position: absolute;
        display: none;
        left: 0;
        top: 100%;
          display: none;
      }
      .menu >li:hover ul{
       display: block;
      }
    

    It is fiddler link aswell https://jsfiddle.net/8engpfu1/1/

    0
    qo'shib qo'ydi

    Siz foydalanishingiz mumkin

    <!-- nav -->
    
    
    .navigation{
       width: 80%;
      margin: 0 auto;
    
    }
    .menu,.menu ul{
      list-style:none;
      padding:0;
    }
    .menu >li{
      position:relative;
      display:inline-block;
       padding: 5px;
      }
      .menu a {
      text-decoration: none;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
    }
    .menu >li ul{
      position: absolute;
        display: none;
        left: 0;
        top: 100%;
          display: none;
      }
      .menu >li:hover ul{
       display: block;
      }
    

    It is fiddler link aswell https://jsfiddle.net/8engpfu1/1/

    0
    qo'shib qo'ydi

    Siz foydalanishingiz mumkin

    <!-- nav -->
    
    
    .navigation{
       width: 80%;
      margin: 0 auto;
    
    }
    .menu,.menu ul{
      list-style:none;
      padding:0;
    }
    .menu >li{
      position:relative;
      display:inline-block;
       padding: 5px;
      }
      .menu a {
      text-decoration: none;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
    }
    .menu >li ul{
      position: absolute;
        display: none;
        left: 0;
        top: 100%;
          display: none;
      }
      .menu >li:hover ul{
       display: block;
      }
    

    It is fiddler link aswell https://jsfiddle.net/8engpfu1/1/

    0
    qo'shib qo'ydi

    Add display: none; to the

    0
    qo'shib qo'ydi

    Add display: none; to the

    0
    qo'shib qo'ydi

    Add display: none; to the

    0
    qo'shib qo'ydi

    Add display: none; to the

    0
    qo'shib qo'ydi