Question

我正在使用asp.net。我写了一个水平菜单，并有问题。菜单右侧（菜单B）显示在左上方（菜单A）。我的代码如下。你能帮忙吗？

HTML：

<div id="head">

        <div id="exit"><span style="color:#222535">Exit</span></div>

         <ul id="navWrapper"> <!-- Top Nav-->
             <li><!-- Menu B--->
                <span style="color:#190d69;font-size:12px;font-style:normal;font-weight:bold;">Name Surname here</span>

                <ul>
                    <li><a href="#">Menu B, item 1</a></li>
                    <li><a href="#">Menu B, item 1</a></li>
                </ul>

            </li><!-- Menu B-->
            <li><!-- Menu A-->
                <a href="#">Menu A</a>
                <ul>
                    <li> <a href="#">Menu A, item 1</a></li>
                     <li> <a href="#">Menu A, item 1</a></li>
                </ul>
             </li><!-- Menu A -->

        </ul><!-- Top Nav-->

        </div>

CSS：

#exit {
float:right;
background-color:#d2f1e6;
color:#f2f9ff;
width:10%;
height:43px;
border-left:1px solid #ccc;
cursor:pointer;
}
    #exit span {
    float:right;
    font-family:Calibri;
    font-size:15px;
    color:#02012e;
    height:27px;
    margin-top:11px;
    margin-right:9px;
    }

/*Top menu style*/
a, a:hover {
      text-decoration: none;
    }

    /**********/

    ul#navWrapper {
        width:100%;
      border: 0 black solid;
      /*margin-left: -39px;*/
      /*float: right;*/
      margin-top:0px;
      margin-right:0px;
    }

    ul#navWrapper li {
        width:15%;
        height:42px;
      border: 0 red dashed;    
      float: right;
      list-style: none;
      margin-right: 0px;
      background-color: #DDD;
      padding: 0 0.25em;
      /*border-radius: 4px;*/
      /*box-shadow: 3px 3px 6px 1px #333;*/
    }

    ul#navWrapper li li {
        width:150px;
        height:40px;
      border: 0 blue dashed;    
      float: none;
      margin-left: -44px;
      margin-top: 2px;
      background-color:#fff;
      border-bottom:2px solid #fff;
    }

    ul#navWrapper li li:first-child { 
      margin-top: 23px;
    }

    ul#navWrapper ul {
      display: none;
      position: absolute;
      background-color: #FFF; /* For non-CSS3 browsers. */
      background-color: rgba(255, 255, 255, 0);
    }

    ul#navWrapper li:hover ul {
      display: block;
    }

    /*ul#navWrapper a {
      font-weight: bold;
    }*/
ul#navWrapper li img {
    width:33px;
    height:43px;
    float:left;
    margin-right:10px;
    background-color:#ccc;
}

    ul#navWrapper li span {
    font-family:Calibri;
    font-size:12px;
    color:#02012e;
    float:left;
    margin-right:5px;
    margin-top:4px;

    }

    ul#navWrapper li:hover {
      background-color: #8C8D61;
    }
        ul#navWrapper li li:hover {
            background-color:#fff;
        border-bottom:2px solid #0f1430;
        }

这是小提琴： http://jsfiddle.net/a6u47sa2/

Answer 1

使用float: left时，我没有注意到更高分辨率的问题。将位置保持为绝对位置并添加top: 57px。同时从margin-top删除ul#navWrapper li li:first-child：

＆＃13;

#exit {
  float: right;
  background-color: #d2f1e6;
  color: #f2f9ff;
  width: 10%;
  height: 43px;
  border-left: 1px solid #ccc;
  cursor: pointer;
}
#exit span {
  float: right;
  font-family: Calibri;
  font-size: 15px;
  color: #02012e;
  height: 27px;
  margin-top: 11px;
  margin-right: 9px;
}
/*Top menu style*/

a,
a:hover {
  text-decoration: none;
}
/**********/

ul#navWrapper {
  width: 100%;
  border: 0 black solid;
  /*margin-left: -39px;*/
  /*float: right;*/
  margin-top: 0px;
  margin-right: 0px;
}
ul#navWrapper li {
  width: 15%;
  height: 42px;
  border: 0 red dashed;
  float: right;
  list-style: none;
  margin-right: 0px;
  background-color: #DDD;
  padding: 0 0.25em;
  /*border-radius: 4px;*/
  /*box-shadow: 3px 3px 6px 1px #333;*/
}
ul#navWrapper li li {
  width: 150px;
  height: 40px;
  border: 0 blue dashed;
  float: none;
  margin-left: -44px;
  margin-top: 2px;
  background-color: #fff;
  border-bottom: 2px solid #fff;
}
ul#navWrapper li li:first-child {
  /* margin-top: 23px;*/
}
ul#navWrapper ul {
  display: none;
  position: absolute;
  background-color: #FFF;
  /* For non-CSS3 browsers. */
  background-color: rgba(255, 255, 255, 0);
  top: 57px;/*add top*/
}
ul#navWrapper li:hover ul {
  display: block;
}
/*ul#navWrapper a {
      font-weight: bold;
    }*/

ul#navWrapper li img {
  width: 33px;
  height: 43px;
  float: left;
  margin-right: 10px;
  background-color: #ccc;
}
ul#navWrapper li span {
  font-family: Calibri;
  font-size: 12px;
  color: #02012e;
  float: left;
  margin-right: 5px;
  margin-top: 4px;
}
ul#navWrapper li:hover {
  background-color: #8C8D61;
}
ul#navWrapper li li:hover {
  background-color: #fff;
  border-bottom: 2px solid #0f1430;
}

＆＃13;

<div id="head">
  <div id="exit"><span style="color:#222535">Exit</span>
  </div>
  <ul id="navWrapper">
    <!-- Top Nav-->
    <li>
      <!-- Menu B---> <span style="color:#190d69;font-size:12px;font-style:normal;font-weight:bold;">Name Surname here</span>

      <ul>
        <li><a href="#">Menu B, item 1</a>
        </li>
        <li><a href="#">Menu B, item 1</a>
        </li>
      </ul>
    </li>
    <!-- Menu B-->
    <li>
      <!-- Menu A--> <a href="#">Menu A</a>

      <ul>
        <li> <a href="#">Menu A, item 1</a>
        </li>
        <li> <a href="#">Menu A, item 1</a>
        </li>
      </ul>
    </li>
    <!-- Menu A -->
  </ul>
  <!-- Top Nav-->
</div>

＆＃13;

Answer 2

删除float:left

的ul#navWrapper li span

Answer 3

span是内联元素，所以使用div而不是span，你的字体大小比第一个li小，所以使用line-height来匹配两个高度。

<div style="color:#190d69;font-size:12px;font-style:normal;font-weight:bold; line-height:20px;">Name Surname here</div>

水平菜单项未正确对齐

3 个答案: