2014-11-25 131 views
2

我正在使用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/

回答

1

我沒有在更高的分辨率使用float: left時發現的問題。保持立場絕對,並添加top: 57px。此外,從ul#navWrapper li li:first-child刪除margin-top

#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; 
 
}
<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>

0

刪除float:leftul#navWrapper li span

0

跨度內聯元素,以便使用DIV,而不是廣度,和您的字體尺寸越小則先禮所以在使用行高來匹配兩個高度。

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