悬停菜单没有正确的文本对齐方式

时间：2014-05-18 13:50:51

标签： html css

参考此demo。

菜单项的文字未正确排列... 当我尝试使用我的代码时......

以上是我得到的enter image description here

以下是我的css 

* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;   
background: #939393;}

ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;}

＆安培; HTML代码..... 

<body>
<ul class="nav">
<li> <a href="#">Menu 1</a>
<ul>
  <li><a href="#">Sub Menu Item</a></li>
  <li><a href="#">Sub Menu Item</a></li>
  <li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
<li> <a href="#">Menu 2</a>
<ul>
  <li><a href="#">Sub Menu Item</a></li>
  <li><a href="#">Sub Menu Item</a></li>
  <li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
<li> <a href="#">Menu 3</a>
<ul>
  <li><a href="#">Sub Menu Item</a></li>
  <li><a href="#">Sub Menu Item</a></li>
  <li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
</ul>

<div id="container-inside"> <a href="#">Tab1</a>&nbsp;&nbsp;&nbsp; <a href="#">Tab2</a>&nbsp;&nbsp;&nbsp; <a href="#">Tab3</a> </div>

0 个答案:

没有答案
相关问题
最新问题