Question

我正在创建一个页面，其中有一个菜单，其中包含一个以页面顶部为中心的子菜单，我的问题是用主菜单集中子菜单，因为它总是不对齐，有没有人知道是什么有可能？预先感谢您的任何帮助！＆＃34; ps：图片中包含可见错误＆＃34;

edit1：运行并使用链接和缺少的html。链接：https://testtestteste111111.000webhostapp.com/

 .menu{
 width:100%;
 height:49px;
 background-color:#494545;
 font-family:'Arial';
 position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index:9999;
  }
 .menu ul{
 list-style:none;
position:relative;
margin-left:24%;
}
.menu ul li{
 width:150px;
  float:left;
  }
 .menu a{
 padding:15px;
 display:block;
 text-decoration:none;
 text-align:center;
 background-color:#494545;
 color:#fff;
  }
 .menu ul ul{
 position:absolute;
 visibility:hidden;
 }
.menu ul li:hover > ul{
  visibility:visible;
 /* border:1px solid #901E93; sub div*/
  }
  .menu a:hover{
  background-color:#7F818D;
color:#fff;
 }
  .menu ul ul li{
     float:none;
     border-bottom:solid 1px #ccc;
     margin-left:-164%;
     }
     .menu ul ul li a{
         background-color:#646464;
         }
         label[for ="bt_menu"]{
             padding:5px;
             background-color:#494545;
             color:#fff;
             font-family:"Arial";
             text-aling:center;
             font-size:30px;
             cursor:pointer;
             width:100%;
             max-height:58px;
             z-index:9999;

margin-top:-10px;
top:-5px;
        display:none;
        position:fixed;
         }
         .imgbar{
             max-height:25px;
             max-width:25px;
             margin-top:10px;
         }
         #bt_menu{
             display:none;
           }
   @media(max-width:800px){
   label[for="bt_menu"]{
   display:block;
    color:#fff;
    z-index:9999;
   position:fixed;
   margin-top:1px;
   }
   .menu{
    margin-top:-1px;
    margin-left:-100%;
    transition:all .4s}
    #bt_menu:checked ~ .menu{
        margin-left:0;}
    .menu ul li{
    width:100%;
    float:none;}
    .menu ul ul{
        position:static;
        overflow:hidden;
        max-height:0;
        transition:all .4s;
    }
    .menu ul li:hover ul{
        height:auto;
        max-height:200px;
    }
  .menu ul{
 list-style:none;
 position:relative;
margin-left:0;
z-index:9999;
}
.menu ul ul li{
     float:none;
     border-bottom:solid 1px #ccc;
     margin-left:0;
     }
     .parallax { 
        width:100%;
/* The image used */
background-image: url(../img/img1.jpg);

/* Set a specific height */
height: 800px; 

/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-top:-50px;
  }
#ultopo{
margin-top:49px;
}}
html
<input type="checkbox" id="bt_menu">
<label for="bt_menu"><img class="imgbar" src="img/bars.svg"></img></label>
<nav class="menu">
  <ul id="ultopo">
   <li><a  href="#">Home</a></li>
   <li><a href="#">Serviços</a>

  <!-- nested UL in LI -->
  <ul>
    <li><a href="#">ex:A</a></li>
    <li><a href="#">ex:b</a></li>
   </ul>
    </li>
    <li><a href="#">Atuaçao</a>
  <!-- nested UL in LI -->
  <ul>
    <li><a href="#">ex:A</a></li>
    <li><a href="#">ex:B</a></li>
    <li><a href="#">ex:C</a></li>
  </ul>   
    </li>    
    <li><a href="#">contato</a></li>
   </ul>
   </nav>

Answer 1

请更新css

这是链接https://jsfiddle.net/jbv09vy4/1/

添加css

.menu ul li {
    position: relative;
}
.menu ul ul {
    left: 0;
    margin: 0;
}

并从

中删除样式margin-left: -164%

.menu ul ul li {
    float: none;
    border-bottom: solid 1px #ccc;
    margin-left: -164%;
}

错误菜单drodown css html <nav> <ul>

1 个答案: