Как я могу изменить свой css или cs html, чтобы получить выпадающую панель навигации, подобную той, что есть в w3school?

Question

Я хотел бы сделать то же самое меню, что и на https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar.

Однако я хотел бы создать меню в файле cs html, вот как выглядит мое меню как пока.

Вот мой модифицированный css

.main-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    display: flex;
}

.parent-menu {
    float: left;
}

    li a, .menu-dropbtn {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

.parent-menu a:hover, .menu-li-dropdown:hover .menu-dropbtn {
    background-color: red;
    text-decoration: none;
}

    li.menu-li-dropdown {
        display: inline-block;
    }

.dropdown-menu-content {
    clear: both;
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    text-decoration: none;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    .dropdown-menu-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

        .dropdown-menu-content a:hover {
            background-color: #f1f1f1;
        }

.menu-li-dropdown:hover .dropdown-menu-content {
    display: block;
}

Вот как я генерирую html

@helper GetTreeMenus(IEnumerable<erp_colombia.Models.MenuMaster> siteMenu, Nullable<int> parentID)
    {
        foreach (var i in siteMenu.Where(a => a.ParentID.Equals(parentID)))
        {
            var submenu = siteMenu.Where(a => a.ParentID.Equals(i.MenuID)).Count();

            string action = i.ActionName;
            string controller = i.ControllerName;

            <ul class="treeview-menu">
                <li class="treeview">
                    <a href="/@i.ControllerName/@i.ActionName">
                        @i.MenuText
                    </a>
                </li>
                @GetTreeMenus(siteMenu, i.MenuID)
            </ul>
        }
    }
@{
    if (Session["MenuList"] != null)
    {
        <ul class="main-menu">
            @GetTreeMenus(Session["MenuList"] as IEnumerable<erp_colombia.Models.MenuMaster>, 0)
        </ul>
    }
}

И Вот часть моего сгенерированного html.

<ul class="main-menu">
                                <ul class="treeview-menu">
                    <li class="treeview">
                        <a href="/Acceuil/Index">
                            Menú principal
                        </a>
                    </li>

                </ul>
                <ul class="treeview-menu">
                    <li class="treeview">
                        <a href="//">
                            Técnico
                        </a>
                    </li>
                                    <ul class="treeview-menu">
                    <li class="treeview">
                        <a href="//">
                            Modulo técnico
                        </a>
                    </li>

                </ul>
                <ul class="treeview-menu">
                    <li class="treeview">
                        <a href="//">
                            Contrato técnico
                        </a>
                    </li>

                </ul>

Что я должен изменить в моем css или cs html, чтобы получить тот же результат, что и в w3school. Спасибо за вашу помощь.

Answer 1

Извините, я не понял вашего вопроса, но теперь, когда я прочитал его дважды, я пытаюсь добавить display: flex в ваш класс главного меню:

.main-menu {
    display: flex;
}

Это должно поставить основной -мену все подряд, дайте мне знать, если это работает ...

Answer 2

Чтобы сделать эффект наложения Вы можете сделать это без javascript, этот пример довольно нестабильный, поэтому не смотрите, что вы можете настроить его после:

/*Put grey background and put all parents divs in a row*/
.main-menu {
  display: flex;
  background: #ccc;
 }
 
 .main-menu div a {
   margin: 20px;
 }
 
 .main-menu div div p {
  margin: 20px 0 20px 30px;
 }
 
 
 /*Hide the children divs*/
 .main-menu div div {
  display: none;
 }
  
 .main-menu div:hover div {
    display: block;
  }

<div class="main-menu">
  <div>
    <a href="#fruits">Fruits</a>
    <div id="fruits">
      <p>Apple</p>
      <p>Mango</p>
      <p>Orange</p>
    </div>
  </div>
  
  <div>
    <a href="#vegetables">vegetables</a>
    <div id="vegetables">
      <p>Gabbage</p>
      <p>Tomatoes</p>
    </div>
  </div>
</div>
    

Answer 3

Используйте следующее CSS, как в W3Schools

 <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }

    li {
      float: left;
    }

    li a, .dropbtn {
      display: inline-block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

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

    li.dropdown {
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }

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

    .dropdown:hover .dropdown-content {
      display: block;
    }
    </style>

Здесь я изменил вас html, как показано ниже

<ul>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Test1</a>
    <div class="dropdown-content">
      <a href="#"> Menú principal</a>
    </div>
  </li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Test2</a>
    <div class="dropdown-content">
      <a href="#">Técnico</a>
    </div>
  </li>
 <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Test3</a>
    <div class="dropdown-content">
      <a href="#">Modulo técnico</a>
    </div>
  </li>
 <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Test4</a>
    <div class="dropdown-content">
      <a href="#">Contrato técnico</a>
    </div>
  </li>
</ul>