1

I have a question about multilevel menu float center.

.menu {
float: left;
position: relative;
left: 50%;
}

.menu ul {
padding: 0;
margin: 0;
list-style-type: none;
position: relative;
right: 50%;
}

.menu ul li {
float: left;
position: relative;
}

.menu ul li a {
display: block;
text-align: center;
text-decoration: none;
width: 104px;
height: 30px;
color: #000;
background: #5678ee;
line-height: 30px;
font-size: 14px;
}

.menu ul li ul {
display: none;
}

.menu ul li:hover ul {
display: block;
position: absolute;
top: 30px;
left: 0;
width: 100%;
}

.menu ul li:hover ul li a {
display: block;
background: #5678ee;
color: #000;
}

.menu ul li ul li:hover a {
color: #FFF;
}
<div class="menu">
  <ul>
    <li><a href="#">女装</a>
      <ul>
        <li><a href="#">半身裙</a></li>
        <li><a href="#">连衣裙</a></li>
        <li><a href="#">沙滩裙</a></li>
      </ul>
    </li>
  </ul>
</div>

When the browser window width is big enough ,it's OK; but when the browser window width is shrinked,the result is :

desired layout : float menu to center

Why ? how to solve ? when the menu is singlelevel , that is no question!!!

web-tiki
  • 99,765
  • 32
  • 217
  • 249
qiuli_45z
  • 9
  • 2

2 Answers2

1

Regarding the desired layout, you should probably try using flex. This will allow you to display the first level item on the same line and center them like this :

.menu ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  justify-content: center;  
}
.menu ul li {
  position: relative;
}
.menu ul li a {
  display: block;
  text-align: center;
  text-decoration: none;
  width: 104px;
  height: 30px;
  color: #000;
  background: #5678ee;
  line-height: 30px;
  font-size: 14px;
}

.menu ul li ul {
  display: none;
}

.menu ul li:hover ul {
  display: block;
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
}

.menu ul li:hover ul li a {
  display: block;
  background: #5678ee;
  color: #000;
}

.menu ul li ul li:hover a {
  color: #FFF;
}
<div class="menu">
  <ul>
    <li><a href="#">女装</a>
      <ul>
        <li><a href="#">半身裙</a></li>
        <li><a href="#">连衣裙</a></li>
        <li><a href="#">沙滩裙</a></li>
      </ul>
    </li>
     <li><a href="#">女装</a>
      <ul>
        <li><a href="#">半身裙</a></li>
        <li><a href="#">连衣裙</a></li>
        <li><a href="#">沙滩裙</a></li>
      </ul>
    </li>
     <li><a href="#">女装</a>
      <ul>
        <li><a href="#">半身裙</a></li>
        <li><a href="#">连衣裙</a></li>
        <li><a href="#">沙滩裙</a></li>
      </ul>
    </li>
     <li><a href="#">女装</a>
      <ul>
        <li><a href="#">半身裙</a></li>
        <li><a href="#">连衣裙</a></li>
        <li><a href="#">沙滩裙</a></li>
      </ul>
    </li>
     <li><a href="#">女装</a>
      <ul>
        <li><a href="#">半身裙</a></li>
        <li><a href="#">连衣裙</a></li>
        <li><a href="#">沙滩裙</a></li>
      </ul>
    </li>
     <li><a href="#">女装</a>
      <ul>
        <li><a href="#">半身裙</a></li>
        <li><a href="#">连衣裙</a></li>
        <li><a href="#">沙滩裙</a></li>
      </ul>
    </li>
  </ul>
</div>
web-tiki
  • 99,765
  • 32
  • 217
  • 249
  • Thank your help! but if I insist using float ,what should I do can resolve the problem ? – qiuli_45z Apr 25 '23 at 13:34
  • @qiuli_45z you cannot float elements to the center. You could add margin on the left but it will not adapt to the with of your menu items. Floats were created to float elements (like images) with text around them whereas Flex was created just for this kind of use cases. Why can't you use flex ? – web-tiki Apr 25 '23 at 14:10
  • @qiuli_45z this question talks about what can't be done with floats : https://stackoverflow.com/questions/4767971/how-do-i-center-floated-elements – web-tiki Apr 25 '23 at 14:10
-1

The question has been resolved!

The top <ul> tag must float right, not left! because the left float can not through the right edge of browser window, it can only enlage the width of browser window!

Anonymous
  • 835
  • 1
  • 5
  • 21
qiuli_45z
  • 9
  • 2