Проблема с выпадающим меню третьего уровня

Question

Проблема с выпадающим меню третьего уровня

0

У меня проблема в трехуровневом меню (например, ul li ul li ul li). Я попытался создать трехуровневое выпадающее меню и застрял в кодировке. Вот код, который я пробовал:

CSS

#cssmenu {
    margin: width:625px;
    float:right;
    padding-top: 60px;
    padding-right: 20px;
    padding-bottom: 0;
    padding-left: 0;
    color:#727272;
    font:normal 14px Arial, Helvetica, sans-serif;
}
#cssmenu ul {
    height: 35px;
    list-style: none;
    margin: 0;
    padding: 0;
}
#cssmenu li {
    float: left;
    padding: 0px;
}
#cssmenu li a {
    display: block;
    font-weight: normal;
    line-height: 35px;
    margin: 0px;
    padding: 0px 15px;
    text-align: center;
    text-decoration: none;
}
#cssmenu > ul > li > a {
    color: #cccccc;
}
#cssmenu ul ul a {
    color: #cccccc;
}
#cssmenu li > a:hover, #cssmenu ul li:hover > a {
    background: #FF4A00;
    color: #FFFFFF;
    text-decoration: none;
}
#cssmenu li ul {
    background: #333333;
    display: none;
    height: auto;
    padding: 0px;
    margin: 0px;
    border: 0px;
    position: absolute;
    width: 220px;
    z-index: 200;
    /*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul {
    display: block;
}
#cssmenu li li {
    display: block;
    float: none;
    margin: 0px;
    padding: 0px;
    width: 220px;
}
#cssmenu li:hover li a {
    background: none;
}
#cssmenu li ul a {
    display: block;
    height: 35px;
    font-size: 12px;
    font-style: normal;
    margin: 0px;
    padding: 0px 10px 0px 15px;
    text-align: left;
}
#cssmenu li ul a:hover, #cssmenu li ul li:hover > a {
    background: #FF4A00;
    border: 0px;
    color: #ffffff;
    text-decoration: none;
}
#cssmenu p {
    clear: left;
}
#cssmenu li ul li ul {
    left:220px !important;
    top:35px;
}
#cssmenu li ul li ul li a:hover {
    display:block;
}

HTML

<div id="cssmenu">
    <ul>
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="aboutus.html">About Us</a>

            <ul>
                <li> <a href="#">Vision</a>
                </li>
                <li> <a href="#">Mission</a>
                </li>
                <li> <a href="#">Our Philosophy</a>
                </li>
                <li> <a href="#">Organisation Structure</a>
                </li>
                <li> <a href="#">Chairman Message</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Policy</a>

            <ul>
                <li><a href="#">HSE</a>
                </li>
                <li><a href="#">Quality</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Services</a>

            <ul>
                <li><a href="#">Electrical</a>

                    <ul>
                        <li><a href="#">Equipment Installation </a>
                        </li>
                        <li><a href="#">Lighting Systems</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Mechanical</a>

                    <ul>
                        <li><a href="#">HVAC Systems </a>
                        </li>
                        <li><a href="#">P & D </a>
                        </li>
                        <li><a href="#">Lifts and Crane</a>
                        </li>
                        <li><a href="#">Structural steel </a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">ELV</a>

                    <ul>
                        <li><a href="#">ELV</a>
                        </li>
                        <li><a href="#">FLS</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Maintenance</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Company Profile</a>
        </li>
        <li><a href="#">Careers</a>
        </li>
        <li><a href="#">Contact us</a>
        </li>
    </ul>
</div>

Chandru 04 окт. 2013, в 14:15

Источник

0

Можете ли вы сделать jsFiddle, чтобы продемонстрировать проблему?
Dhaval Marthak 04 окт. 2013, в 11:57
0

хорошо, конечно, подождите еще 2 минуты @DKM
Chandru 04 окт. 2013, в 11:59
0

[ссылка] ( jsfiddle.net/rwjZR )
Chandru 04 окт. 2013, в 12:01
0

Просто посмотрите мой ответ на этот вопрос stackoverflow.com/questions/19063248/…
AmanS 04 окт. 2013, в 12:04
0

хорошо, я проверю этот ответ @AmanS. AmanS.
Chandru 04 окт. 2013, в 12:14

Показать ещё 3 комментария

Теги:

html

css

css3

2 ответа

0

Ваш код:

#cssmenu li > a:hover,
   #cssmenu ul li:hover > a {
      background: #FF4A00;
      color: #FFFFFF;
      text-decoration: none;
  }

Изменить на это:

#cssmenu  ul li a:hover {
background: #FF4A00 ;
border: 0px;
color: #ffffff;
text-decoration: none;
}

демонстрация

Dhaval Marthak 04 окт. 2013, в 10:34

0

хорошо я попробую
Chandru 04 окт. 2013, в 12:05
0

У меня есть проблема в меню услуг, проверьте еще раз плз. Спасибо вам
Chandru 04 окт. 2013, в 12:10
0

Вы видели мое демо?
Dhaval Marthak 04 окт. 2013, в 12:11
0

Я вижу ваше демо, сэр. @DMK
Chandru 04 окт. 2013, в 12:13

Показать ещё 2 комментария

Ещё вопросы

Можете ли вы сделать jsFiddle, чтобы продемонстрировать проблему?
хорошо, конечно, подождите еще 2 минуты @DKM
Просто посмотрите мой ответ на этот вопрос stackoverflow.com/questions/19063248/…
хорошо, я проверю этот ответ @AmanS. AmanS.
У меня есть проблема в меню услуг, проверьте еще раз плз. Спасибо вам

Arun Aravind · Accepted Answer · 2013-10-04T11-31-00.000Z

   .dropdown {
         position: relative;
         display: inline-block;
         font-size: 110%;
    }


   .dropdown ul {
         position: absolute;
         top: -100%;
         left: 100%;
         display: none;
         background-color: inherit;
         padding: 0;
         list-style: none;
         border: 1px solid #ccc;
   }

  .dropdown ul li {
         position: relative;
         list-style: none;
         margin: 5px 0;
         background-color: inherit;
  }

  .dropdown ul li a {
         display: block;
         padding: 3px 10px;
   }

  .dropdown ul li a:hover {
         background-color: #18b6f2 !important;
  }

  .dropdown ul li:hover > ul {
         display: block;
         top: 0;
         background-color: inherit;
   }

  .dropdown ul li:hover > a {
         background-color: #85ddff;
  }

  .dropdown:hover > ul {
        display: block;
  }

Попробуй это. Чистое меню css3. Это масштабируемо (как и у вас может быть любое количество уровней). Просто прокомментируйте все строки в файле css и вставьте это. Примените класс "выпадающее меню" к контейнеру меню, и все готово.

        Sample markup 


       <div class="dropdown" style="background-color: white;">
    <a>Menu</a>
    <ul>
        <li>
            <a>Fruits</a>
            <ul>
                <li><a>Apple</a></li>
                <li><a>Orange</a></li>
                <li><a>Grape</a></li>
                <li><a>Banana</a></li>
            </ul>
        </li>
        <li>
            <a>Vegetables</a>
            <ul>
                <li><a>Lemon</a></li>
                <li><a>Cucumber</a></li>
                <li><a>Melon</a></li>
            </ul>
        </li>
        <li>
            <a>Birds</a>
            <ul>
                <li>
                    <a>Flying</a>
                    <ul>
                        <li><a>Crow</a></li>
                        <li><a>Parrot</a></li>
                    </ul>
                </li>
                <li>
                     <a>Walking</a>
                     <ul>
                           <li><a>Hen</a></li><li><a>Duck</a></li></ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

хорошо, я попробую это спасибо. @ Арун Аравинд
Я только что заметил твою скрипку. вам может понадобиться изменить внешний вид в зависимости от вашего желания. Пример разметки для меню выложен ниже.