html - 在水平菜单中，子菜单 Css 无法正常工作

标签 html css menu hover submenu

我为菜单和子菜单创建了带有 css 的示例 HTML 模板。当我将鼠标悬停时，所有菜单的子菜单都位于左侧第一个菜单下。找到代码并提供正确的 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 属性和修改。

最佳答案 

<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;
}

关于html - 在水平菜单中，子菜单 Css 无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51283952/

上一篇：javascript - 恢复(更新，恢复)删除的元素

下一篇：JavaScript 重新加载功能无法正常工作

相关文章：

html - flexbox-如何包装到最长元素的宽度？

html - 如何从后往前显示标签a？

css - 使用 CSS 覆盖禁用的输入和文本区域

javascript - 具有可变路径的 Webpack 和 Bootstrap

html/css 无法阻止自定义标记开始新行

javascript - 如何创建一个 JS 脚本以应用于一页上的多个 Bootstrap 模态

javascript - 根据 URL 添加事件菜单或导航类

android - 如何在android中的布局内创建自定义菜单？

jquery - 使 jQuery-ui 可拖动 handle 覆盖整个页面

css - 带有CSS的菜单中的透明边框

©2024 IT工具网  联系我们