在水平菜单子菜单中的CSS无法正常工作

时间：2018-07-11 11:07:10

标签： html css menu hover submenu

我创建了带有CSS的MENU＆Sub菜单示例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的修改。

2 个答案:

答案 0 :(得分：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;
}

答案 1 :(得分：0)

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

相关问题
最新问题