Question 88793 in Html Question posted in
Some basic documentation can be found here.

Float menu to center – Html

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The question had been resoloved! the top 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 !!!


  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search