English 中文(简体)
CSS 降级导航
原标题:CSS dropdown navigation

我有这个CSS下降的菜单。 我希望,网页的左侧开始,而不是中心。 这里是“低落航条”的风格和tag子:

ul, li, html, a
{
  margin:0; padding: 0;

}

body
{
  text-align: center; 
  margin: 0 auto;
  padding: 0;
  font: 65% arial, sans-serif;
}

li
{
  list-style-type: none;
}

a
{
  text-decoration: none;
  color: #034af3;
}

ul#nav
{
  width: 22.5em;
  height:2.5em;
  margin: 2em auto 0;
  font-size: 1.5em;
}

ul#nav li
{
  position: relative;
  float: left;
  width: 5em;
  height: 2em;
  line-height: 2em;
  background-color:  #465c71;
  display: block;
  padding: 4px 0px;
  border-right: 1px #4e667d solid;
  color: #dde4ec;
}

ul#nav li.noBorder
{
  border-right: none;
}

ul#nav li:hover
{
  background-color: silver;
}

ul#nav li a
{
  display: block;
  float: left;
  width: 100%;
}

ul#nav li ul
{
  display: none;
}

ul#nav li:hover ul
{
  display: inline;
  float: left;
  width: 10em;
  height: auto;
  margin: 0; padding: 0.27em;
  font-size: 1em;
  text-align: left;
}

ul#nav li:hover ul li
{
  width: 100%;
  height: 2em;
  background-color: Yellow;
  border: none;
  border-bottom: 1px solid silver;
  overflow: hidden;
}

ul#nav li:hover ul li a
{
  display: block;
  margin: 0; padding: 0 0 0 .3em;
  height: 100%;
  line-height:2em;  
  color: #465c71;
}

ul#nav li:hover ul li a:hover
{
  background-color: white;
}
<div style="background:#3a4f63;">
  <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Abour</a>
      <ul>
        <li><a href="#">About 1</a></li>
        <li><a href="#">About 2</a></li>
        <li><a href="#">About 3</a></li>
        <li class="noBorder"><a href="#">About 4</a></li>
      </ul>
    </li>
    <li><a href="#">Blog</a>
      <ul>
        <li><a href="#">About 1</a></li>
        <li><a href="#">About 2</a></li>
        <li><a href="#">About 3</a></li>
        <li class="noBorder"><a href="#">About 4</a></li>
      </ul>
    </li>
    <li class="noBorder"><a href="#">Contact</a></li>
  </ul>
</div>
最佳回答

Try:

body { text-align: left; }
ul#nav { margin: 2em 0 0; }
问题回答

暂无回答




相关问题
Anyone feel like passing it forward?

I m the only developer in my company, and am getting along well as an autodidact, but I know I m missing out on the education one gets from working with and having code reviewed by more senior devs. ...

How to Add script codes before the </body> tag ASP.NET

Heres the problem, In Masterpage, the google analytics code were pasted before the end of body tag. In ASPX page, I need to generate a script (google addItem tracker) using codebehind ClientScript ...

Transaction handling with TransactionScope

I am implementing Transaction using TransactionScope with the help this MSDN article http://msdn.microsoft.com/en-us/library/system.transactions.transactionscope.aspx I just want to confirm that is ...

System.Web.Mvc.Controller Initialize

i have the following base controller... public class BaseController : Controller { protected override void Initialize(System.Web.Routing.RequestContext requestContext) { if (...

Microsoft.Contracts namespace

For what it is necessary Microsoft.Contracts namespace in asp.net? I mean, in what cases I could write using Microsoft.Contracts;?

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签