Question

我有一个水平CSS / HMTL菜单的CSS代码：

#nav {
    background-color:#F36F25;
    margin:0 0 5px 0;
    width: 100%;
    height:30px;
    left:0;
    z-index:1;
    border-top:2px solid #FFFFFF;
    border-bottom:2px solid #FFFFFF;
    font-size:14px;
}
#nav>li {
    float:left;
    list-style:none;
}
#nav li:hover ul {
    position:absolute;
    display:block;
    z-index:9999;
}
#nav li a {
    display: inline-block;
    padding: 6px;
    margin:0;
    background: #F36F25;
    text-decoration: none;
    color: #FFFFFF;
    border:1px solid #F36F25;
}
#nav li:hover > a, #nav li a.active {
    color:#F36F25;
    background: #FFFFFF;
    border:1px solid #F36F25;
    cursor:pointer;
}
#nav li ul {
    position:absolute;
    display: none;
    list-style:none;
    margin:0;
}
#nav li ul li {
    margin-top:0;
    margin-right:0;
    margin-bottom:0;
    margin-left:-40px;
}
#nav li ul li a {
    background-color: #F36F25;
    color:#FFFFFF;
    border:1px solid #F36F25;
    width:145px;
}
#nav li ul li a:hover {
    background-color: #FFFFFF;
    color:#F36F25;
    border:1px solid #f36f25;
}
.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

目前正在显示菜单水平。

如何更改它以使其显示为垂直，子菜单项显示在父项的右侧？

我在这里有一个带有html代码和css的jsfiddle：http://jsfiddle.net/j3fy3kvh/

Answer 1

#nav {
  background-color: #F36F25;
  margin: 0 0 5px 0;
  width: 200px;
  left: 0;
  z-index: 1;
  border-top: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  font-size: 14px;
}
#nav>li {
  display: block;
  list-style: none;
  position: relative;
}
#nav li:hover ul {
  position: absolute;
  left: 200px;
  display: block;
  z-index: 9999;
  top: 0px;
}
#nav li a {
  display: block;
  position: relative;
  padding: 6px;
  margin: 0;
  background: #F36F25;
  text-decoration: none;
  color: #FFFFFF;
  border: 1px solid #F36F25;
}
#nav li:hover > a,
#nav li a.active {
  color: #F36F25;
  background: #FFFFFF;
  border: 1px solid #F36F25;
  cursor: pointer;
}
#nav li ul {
  position: absolute;
  display: none;
  list-style: none;
  margin: 0;
}
#nav li ul li {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: -40px;
}
#nav li ul li a {
  background-color: #F36F25;
  color: #FFFFFF;
  border: 1px solid #F36F25;
  width: 145px;
}
#nav li ul li a:hover {
  background-color: #FFFFFF;
  color: #F36F25;
  border: 1px solid #f36f25;
}
.clearfix:after {
  content: " ";
  /* Older browser do not support empty content */
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<div id="nav" class="clearfix">
  <li><a href="#" onClick="OpenPage('/dashboard');">Dashboard</a>
  </li>
  <li><a href="#" onClick="OpenPage('/helpdesk/tickets');">Tickets</a>
    <ul>
      <li><a href="#" onClick="OpenPage('/helpdesk/view_support_emails');">View Support Emails</a>
      </li>
    </ul>
  </li>
  <li><a href="#" onClick="OpenPage('//reminders/view_reminders');">Reminders</a>
    <ul>
      <li><a href="#" onClick="OpenPage('/reminders/addreminder');">Add Reminder</a>
      </li>
      <li><a href="#" onClick="OpenPage('/reminders/view_reminders');">View Reminders</a>
      </li>
    </ul>
  </li>
  <li><a href="#" onClick="OpenPage('/');">Companies</a>
    <ul>
      <li><a href="#" onClick="OpenPage('/companies/salesman/viewsalesman');">View Salesman</a>
      </li>
      <li><a href="#" onClick="OpenPage('/companies/addcustomer');">Add Customer</a>
      </li>
      <li><a href="#" onClick="OpenPage('/companies/contacts/add_contact');">Add Contact</a>
      </li>
      <li><a href="#" onClick="OpenPage('/companies/suppliers/addsupplier');">Add Supplier</a>
      </li>
      <li><a href="#" onClick="OpenPage('/companies/suppliers/viewsupplier');">View Supplier</a>
      </li>
      <li><a href="#" onClick="OpenPage('/companies/salesman/addsalesman');">Add Salesman</a>
      </li>
      <li><a href="#" onClick="OpenPage('/companies/contracts/editcontract');">Edit Contract</a>
      </li>
      <li><a href="#" onClick="OpenPage('/companies/contracts/addcontract');">Add New Contract</a>
      </li>
      <li><a href="#" onClick="OpenPage('/companies/viewcustomer');">View Customers</a>
      </li>
    </ul>
  </li>
  <li><a href="#" onClick="OpenPage('/billing/billing');">Billing</a>
    <ul>
      <li><a href="#" onClick="OpenPage('/billing/viewhistoricinvoices');">Historic Invoices</a>
      </li>
      <li><a href="#" onClick="OpenPage('/billing/direct_debits/direct_debits');">Direct Debits</a>
      </li>
      <li><a href="#" onClick="OpenPage('/billing/viewinvoices');">Pending Invoices</a>
      </li>
      <li><a href="#" onClick="OpenPage('/billing/call_records/daily_cdrs');">Daily CDRs</a>
      </li>
      <li><a href="#" onClick="OpenPage('/billing/voip_unmatched_calls');">VoIP Unmatched </a>
      </li>
      <li><a href="#" onClick="OpenPage('/billing/direct_debits/pending_direct_debits');">Pending Direct Debits</a>
      </li>
      <li><a href="#" onClick="OpenPage('/billing/upload_services_files/upload');">Upload Services Files</a>
      </li>
    </ul>
  </li>
  <li><a href="#" onClick="OpenPage('/messaging/viewemails');">Messaging</a>
    <ul>
      <li><a href="#" onClick="OpenPage('/messaging/viewemails');">View Emails</a>
      </li>
      <li><a href="#" onClick="OpenPage('/messaging/send_email/send_email');">Send Email</a>
      </li>
      <li><a href="#" onClick="OpenPage('/messaging/sendtext');">Send Text</a>
      </li>
      <li><a href="#" onClick="OpenPage('/messaging/view_text_messages');">Text Messages</a>
      </li>
    </ul>
  </li>
  <li><a href="#" onClick="OpenPage('/servicestatus/viewservicestatus');">Status</a>
    <ul>
      <li><a href="#" onClick="OpenPage('/servicestatus/addservicestatus');">Add Service Status</a>
      </li>
      <li><a href="#" onClick="OpenPage('/servicestatus/viewservicestatus');">View Service Status</a>
      </li>
      <li><a href="#" onClick="OpenPage('/servicestatus/maintenance/addmaintenance');">Add Maintenance</a>
      </li>
      <li><a href="#" onClick="OpenPage('/servicestatus/maintenance/viewmaintenance');">View Maintenance</a>
      </li>
    </ul>
  </li>
  <li><a href="#" onClick="OpenPage('/knowledgebase/editkbarticle');">Knowledgebase</a>
    <ul>
      <li><a href="#" onClick="OpenPage('/knowledgebase/newkbarticle');">Add KB Article</a>
      </li>
      <li><a href="#" onClick="OpenPage('/knowledgebase/editkbarticle');">View KB Article</a>
      </li>
    </ul>
  </li>
  <li><a href="#" onClick="OpenPage('/');">Pricing</a>
    <ul>
      <li><a href="#" onClick="OpenPage('/pricing/broadband_products');">Broadband Products</a>
      </li>
      <li><a href="#" onClick="OpenPage('/pricing/pricelist');">Price List</a>
      </li>
      <li><a href="#" onClick="OpenPage('/pricing/callcosts');">Call Costs</a>
      </li>
    </ul>
  </li>
  <li><a href="#" onClick="OpenPage('/settings');">Settings</a>
    <ul>
      <li><a href="#" onClick="OpenPage('/myaccount/edit');">My Account</a>
      </li>
      <li><a href="#" onClick="OpenPage('/users/users_view');">View Users</a>
      </li>
      <li><a href="#" onClick="OpenPage('/users/users_add');">Add User</a>
      </li>
      <li><a href="#" onClick="OpenPage('/signature');">Company Signature</a>
      </li>
      <li><a href="#" onClick="OpenPage('/users/permissions');">Permissions</a>
      </li>
    </ul>
  </li>
  <li><a href="#" onClick="OpenPage('/remotephonebooks');">Remote Phone Books</a>
  </li>
  <li><a href="#" onClick="OpenPage('/');">Reports</a>
    <ul>
      <li><a href="#" onClick="OpenPage('/reports/billing/customerbillinglist');">Customer Billing List</a>
      </li>
      <li><a href="#" onClick="OpenPage('/reports/billing/customers');">Customers</a>
      </li>
      <li><a href="#" onClick="OpenPage('/reports/billing/call_charges');">Call Charges Report</a>
      </li>
      <li><a href="#" onClick="OpenPage('/reports/billing/invoices');">Invoices</a>
      </li>
      <li><a href="#" onClick="OpenPage('/reports/billing/product_types');">Product Types</a>
      </li>
      <li><a href="#" onClick="OpenPage('/reports/billing/resellers');">Resellers</a>
      </li>
      <li><a href="#" onClick="OpenPage('/reports/billing/voice_billing');">Voice Billing Customers</a>
      </li>
      <li><a href="#" onClick="OpenPage('/reports/billing/data_billing');">Data Billing Customers</a>
      </li>
    </ul>
  </li>
  <li><a href="#" onClick="OpenPage('/');">Assets</a>
    <ul>
      <li><a class="active" href="#" onClick="OpenPage('/assets/add_asset');">Add Asset</a>
      </li>
    </ul>
  </li>
  <li><a href="#" onClick="OpenPage('/');">Orders</a>
    <ul>
      <li><a href="#" onClick="OpenPage('/orders/porting/new');">New Number Port</a>
      </li>
      <li><a href="#" onClick="OpenPage('/orders/porting/view');">View Number Ports</a>
      </li>
      <li><a href="#" onClick="OpenPage('/orders/broadband/new');">New Broadband Order</a>
      </li>
      <li><a href="#" onClick="OpenPage('/orders/broadband/view');">View Broadband Orders</a>
      </li>
      <li><a href="#" onClick="OpenPage('/orders/seats/new');">New Seat Order</a>
      </li>
      <li><a href="#" onClick="OpenPage('/orders/seats/view');">View Seat Orders</a>
      </li>
      <li><a href="#" onClick="OpenPage('/orders/hardware/new');">New Hardware Order</a>
      </li>
      <li><a href="#" onClick="OpenPage('/orders/hardware/view');">View Hardware Orders</a>
      </li>
      <li><a href="#" onClick="OpenPage('/orders/lines/new');">New Line Order</a>
      </li>
      <li><a href="#" onClick="OpenPage('/orders/lines/view');">View Lines Orders</a>
      </li>
    </ul>
  </li>
  <li><a href="#" onClick="OpenPage('/alerts/view');">Alerts</a>
    <ul>
      <li><a href="#" onClick="OpenPage('/alerts/new');">Create New Alert</a>
      </li>
      <li><a href="#" onClick="OpenPage('/alerts/view');">View All Alerts</a>
      </li>
    </ul>
  </li>
</div>

有些事情会发生变化：首先，你的<nav>会有固定而不是固定的高度。假设它是200px。然后，我们会将元素的显示从inline-block更改为block，删除float，然后稍微调整一下定位。

这是一个更新的小提琴： http://jsfiddle.net/j3fy3kvh/3/

使css水平菜单垂直

1 个答案: