В горизонтальном меню Подменю Css не работает правильно

Я создал образец HTML-шаблона с помощью css для меню и подменю. Когда я наводю курсор мыши, все подменю меню попадают в первое меню слева. Найдите код и введите правильный css.

<style>
/*------------------------Menu-Bar in ClientLayout------------------------*/

.menu-bar {
  background-color: #428bca;
  border-color: #428bca;
  margin-top: 47px;
}

.menu-bar .container .main-menu-category {
  list-style-type: none;
  margin: 0;
  padding: 15px 0px;
  overflow: hidden;
  background-color: #428bca;
}

.menu-bar .container .main-menu-category>li {
  display: inline;
  color: #ffffff;
  /*padding: 15px 0px;*/
}

.menu-bar .container .main-menu-category li>a {
  color: #ffffff;
  padding: 15px 0px 15px 0px;
  padding-right: 25px;
}

.electronics-submenu,
.tvappliances-submenu,
.men-submenu,
.women-submenu,
.babykids-submenu,
.homefurniture-submenu,
.sportsbooks-submenu,
.offerzone-submenu,
.myaccount-submenu,
.contactus-submenu {
  list-style-type: none;
  display: none;
  position: absolute;
  background-color: #428bca;
  min-width: 160px;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.electronics-submenu li,
tvappliances-submenu li,
women-submenu li,
babykids-submenu li,
homefurniture-submenu li,
sportsbooks-submenu li,
offerzone-submenu li,
myaccount-submenu li {
  color: black;
  padding: 10px 0px;
  position: absolute;
  text-decoration: none;
  display: inline-block;
  /* text-align: left;*/
}

.electronics-submenu li {
  color: black;
  padding: 10px 0px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.electronics:hover .electronics-submenu,
.tvappliances:hover .tvappliances-submenu,
.men:hover .men-submenu,
.women:hover .women-submenu,
.babykids:hover .babykids-submenu,
.homefurniture:hover .homefurniture-submenu,
.sportsbooks:hover .sportsbooks-submenu,
.offerzone:hover .offerzone-submenu,
.myaccount:hover .myaccount-submenu,
.contactus:hover .contactus-submenu {
  display: block;
}

</style>

<!DOCTYPE html>
<html>

<head>
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
</head>

<body>
  <div class = "menu-bar">
    <div class = "container" style = "width:1170px;">
      <ul class = "main-menu-category">
        <li class = "electronics">
          <a href = "#">
              Electronics
              <i class = "fa fa-angle-down"></i>
          </a>
          <ul class = "electronics-submenu">
            <li><a href = "/Home/About">Apple</a></li>
            <li><a href = "/Home/Contact">Google Fixel</a></li>
          </ul>
        </li>
        <li class = "tvappliances">
          <a href = "#">
              TVs &amp; Appliances
              <i class = "fa fa-angle-down"></i>
          </a>
          <ul class = "tvappliances-submenu">
            <li><a href = "/Home/About">Apple2</a></li>
            <li><a href = "/Home/Contact">Google Fixel2</a></li>
          </ul>
        </li>
        <li class = "offerzone">
          <a href = "#">
              Offer Zone
              <i class = "fa fa-angle-down"></i>
          </a>
          <ul class = "offerzone-submenu">
            <li><a href = "/Home/About">Apple8</a></li>
            <li><a href = "/Home/Contact">Google Fixel8</a></li>
          </ul>
        </li>
        <li class = "myaccount">
          <a href = "#">
            My Account
            <i class = "fa fa-angle-down"></i>
          </a>
          <ul class = "myaccount-submenu">
            <li>
              <a href = "/Admin/Account/Register">Register</a>
            </li>
            <li>
              <a href = "/Admin">Login</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

исправьте мой css и дайте мне точный css для меню и соответствующего ему меню. где я хочу изменить свойства и модификацию css в css.

html css menu hover submenu

11.07.2018 13:07

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

179

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

<style>



/*------------------------Menu-Bar in ClientLayout------------------------*/

.menu-bar {
    background-color: #428bca;
    border-color: #428bca;
    margin-top: 47px;
}

    .menu-bar .container .main-menu-category {
        list-style-type: none;
        margin: 0;
        padding: 15px 0px;
      /*  overflow: hidden;*/
        background-color: #428bca;
    }

        .menu-bar .container .main-menu-category > li {
            display: inline;
            color: #ffffff;
            /*padding: 15px 0px;*/
            position:relative;
        }

        .menu-bar .container .main-menu-category li > a {
            color: #ffffff;
            padding: 15px 0px 15px 0px;
            padding-right: 25px;
            
        }

.electronics-submenu,
.tvappliances-submenu,
.men-submenu,
.women-submenu,
.babykids-submenu,
.homefurniture-submenu,
.sportsbooks-submenu,
.offerzone-submenu,
.myaccount-submenu,
.contactus-submenu {
left:0;
    list-style-type: none;
    display: none;
  position: absolute;
    background-color: #428bca;
    min-width: 160px;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    .electronics-submenu li, tvappliances-submenu li, women-submenu li, babykids-submenu li, homefurniture-submenu li, sportsbooks-submenu li, offerzone-submenu li, myaccount-submenu li {
        color: black;
        padding: 10px 0px;
   
        text-decoration: none;
        display: inline-block;
       /* text-align: left;*/
    }


    .electronics-submenu li {
        color: black;
        padding: 10px 0px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

.electronics:hover .electronics-submenu,
.tvappliances:hover .tvappliances-submenu,
.men:hover .men-submenu,
.women:hover .women-submenu,
.babykids:hover .babykids-submenu,
.homefurniture:hover .homefurniture-submenu,
.sportsbooks:hover .sportsbooks-submenu,
.offerzone:hover .offerzone-submenu,
.myaccount:hover .myaccount-submenu,
.contactus:hover .contactus-submenu {
    display: block;
    
}

</style>

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">

</head>
<body>

<div class = "menu-bar">
        <div class = "container" style = "width:1170px;">
            <ul class = "main-menu-category">
                <li class = "electronics">
                    <a href = "#">
                        Electronics
                        <i class = "fa fa-angle-down"></i>
                    </a>
                    <ul class = "electronics-submenu">
                        <li><a href = "/Home/About">Apple</a></li>
                        <li><a href = "/Home/Contact">Google Fixel</a></li>
                    </ul>
                </li>
                <li class = "tvappliances">
                    <a href = "#">
                        TVs &amp; Appliances
                        <i class = "fa fa-angle-down"></i>
                    </a>
                    <ul class = "tvappliances-submenu">
                        <li><a href = "/Home/About">Apple2</a></li>
                        <li><a href = "/Home/Contact">Google Fixel2</a></li>
                    </ul>
                </li>
              
               
                <li class = "offerzone">
                    <a href = "#">
                        Offer Zone
                        <i class = "fa fa-angle-down"></i>
                    </a>
                    <ul class = "offerzone-submenu">
                        <li><a href = "/Home/About">Apple8</a></li>
                        <li><a href = "/Home/Contact">Google Fixel8</a></li>
                    </ul>
                </li>
                <li class = "myaccount">
                    <a href = "#">
                        My Account
                        <i class = "fa fa-angle-down"></i>
                    </a>
                    
    <ul class = "myaccount-submenu">
        <li>
            <a href = "/Admin/Account/Register">Register</a>
        </li>
        <li>
            <a href = "/Admin">Login</a>
        </li>
    </ul>

                </li>
            </ul>
        </div>
    </div>

</body>
</html>

Пожалуйста, добавьте этот код.

.menu-bar .container .main-menu-category > li
{
position:relative;
}
.electronics-submenu,
.tvappliances-submenu,
.men-submenu,
.women-submenu,
.babykids-submenu,
.homefurniture-submenu,
.sportsbooks-submenu,
.offerzone-submenu,
.myaccount-submenu,
.contactus-submenu
{
left:0;
}

Все в порядке, спасибо, но первое подменю скрывается

— 11.07.2018 13:35

11.07.2018 13:10

<style>



/*------------------------Menu-Bar in ClientLayout------------------------*/

.menu-bar {
    background-color: #428bca;
    border-color: #428bca;
    margin-top: 47px;
}

    .menu-bar .container .main-menu-category {
        list-style-type: none;
        margin: 0;
        padding: 15px 0px;
        background-color: #428bca;
    }

        .menu-bar .container .main-menu-category > li {
           position: relative;
            display: inline;
            color: #ffffff;
        }

        .menu-bar .container .main-menu-category li > a {
            color: #ffffff;
            padding: 15px 0px 15px 0px;
            padding-right: 25px;
            
        }

.electronics-submenu,
.tvappliances-submenu,
.men-submenu,
.women-submenu,
.babykids-submenu,
.homefurniture-submenu,
.sportsbooks-submenu,
.offerzone-submenu,
.myaccount-submenu,
.contactus-submenu {
    list-style-type: none;
    display: none;
    position: absolute;
    left: 0;
    padding-left: 10px;
    background-color: #428bca;
    min-width: 150px;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    .electronics-submenu li, tvappliances-submenu li, women-submenu li, babykids-submenu li, homefurniture-submenu li, sportsbooks-submenu li, offerzone-submenu li, myaccount-submenu li {
        color: black;
        padding: 10px 0px;
        position: absolute;
        text-decoration: none;
        display: inline-block;
    }


    .electronics-submenu li {
        color: black;
        padding: 10px 0px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

.electronics:hover .electronics-submenu,
.tvappliances:hover .tvappliances-submenu,
.men:hover .men-submenu,
.women:hover .women-submenu,
.babykids:hover .babykids-submenu,
.homefurniture:hover .homefurniture-submenu,
.sportsbooks:hover .sportsbooks-submenu,
.offerzone:hover .offerzone-submenu,
.myaccount:hover .myaccount-submenu,
.contactus:hover .contactus-submenu {
    display: block;
    
}

</style>

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">

</head>
<body>

<div class = "menu-bar">
        <div class = "container" style = "width:1170px;">
            <ul class = "main-menu-category">
                <li class = "electronics">
                    <a href = "#">
                        Electronics
                        <i class = "fa fa-angle-down"></i>
                    </a>
                    <ul class = "electronics-submenu">
                        <li><a href = "/Home/About">Apple</a></li>
                        <li><a href = "/Home/Contact">Google Fixel</a></li>
                    </ul>
                </li>
                <li class = "tvappliances">
                    <a href = "#">
                        TVs &amp; Appliances
                        <i class = "fa fa-angle-down"></i>
                    </a>
                    <ul class = "tvappliances-submenu">
                        <li><a href = "/Home/About">Apple2</a></li>
                        <li><a href = "/Home/Contact">Google Fixel2</a></li>
                    </ul>
                </li>
              
               
                <li class = "offerzone">
                    <a href = "#">
                        Offer Zone
                        <i class = "fa fa-angle-down"></i>
                    </a>
                    <ul class = "offerzone-submenu">
                        <li><a href = "/Home/About">Apple8</a></li>
                        <li><a href = "/Home/Contact">Google Fixel8</a></li>
                    </ul>
                </li>
                <li class = "myaccount">
                    <a href = "#">
                        My Account
                        <i class = "fa fa-angle-down"></i>
                    </a>
                    
    <ul class = "myaccount-submenu">
        <li>
            <a href = "/Admin/Account/Register">Register</a>
        </li>
        <li>
            <a href = "/Admin">Login</a>
        </li>
    </ul>

                </li>
            </ul>
        </div>
    </div>

</body>
</html>

11.07.2018 13:16

Другие вопросы по теме

При переключении проекта Angular 5 PrimeNG на scss из css выдает ошибку "сборка модуля: undefined"

Тег диапазона стилей в выводе PDF с использованием mpdf

Taxfield блокируется динамически, но клавиша табуляции может открывать и редактировать текстовое поле. Как я могу это исправить?

Функция перезагрузки JavaScript не работает должным образом

Анимация "вперед" не сохраняет последнее состояние

Задержка состояния css: hover при наведении курсора мыши

CSS Transform - сохранить значение при наведении курсора

Моя форма php не работает, т.е. не отправляет данные на мою страницу

Как центрировать списки на панели навигации с раскрывающимися списками?

Подгоните один ПРОЛЕТ под другую высоту ПРОЛЕТА

В горизонтальном меню Подменю Css не работает правильно

Ответы 2

Другие вопросы по теме

Похожие вопросы