代码之家  ›  专栏  ›  技术社区  ›  Kutty Rajesh Valangai

在水平菜单子菜单css工作不正常

submenu hover menu css html
  •  0
  • Kutty Rajesh Valangai  · 技术社区  · 6 年前

    我用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属性和修改。

    2 回复  |  直到 6 年前
        1
  •  2
  •   Alfin Paul    6 年前 

    <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;
}
        2
  •  0
  •   Anil Suwal Qode    6 年前 

    <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>
    推荐文章
    Yunusović  ·  我无法用css更改html段落颜色
    1 年前
    Blake  ·  无法使用CSS旋转Angular 15中的字体图标
    1 年前
    Maarten -Monica for president  ·  将图像放在锚点标记内时调整网格中的图像大小
    1 年前
    Phil Lucks  ·  如何制作边界的外半径?
    1 年前
    roy_meir  ·  创建自定义下拉式元素
    1 年前
    Community wiki  ·  如何为触摸设备优化网站
    1 年前
    Paras Chandravanshi  ·  为什么<ul>没有从其父<p>元素继承?
    1 年前
    tpetzoldt  ·  如何在有光泽的情况下抑制图像的抗锯齿?
    1 年前
    boyenec  ·  反应如何将css样式应用于我从api respose获得的页面的spcifc部分
    1 年前
    manofconstsorrow  ·  点击导航项目关闭汉堡菜单
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号