將HTML/CSS下拉菜單調整爲多級

我一直試圖使原來的下拉菜單變成多層次的網站。我所有的嘗試都失敗了（出於某種原因，我只能用「margin-right」來對齊元素，這會導致一些問題，我認爲它與位置屬性有關係。 HTML：將HTML/CSS下拉菜單調整爲多級

<ol id="nav"> 
      <li><a href="index.php">Home</a></li> 
      <li class="dropdown_alignedLeft"> 
       <a href="">Products</a> 
       <ul><li class="dropdown_alignedRight"> 
        <a href="">iPoP</a> 
        <ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li><a href="customers.php?category=ipop">iPoP - Network Solutions for Vessels</a></li></ul><li class="dropdown_alignedRight"> 
        <a href="">Cameras</a> 
        <ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li><a href="customers.php?category=icam">iCam 501 Ultra - Intrinsically Safe Digital Camera with Flash</a></li></ul><li class="dropdown_alignedRight"> 
        <a href="">BNWAS</a> 
        <ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li><a href="customers.php?category=bnwas">BNWAS - Bridge Navigation Watch Alarm System</a></li></ul><li class="dropdown_alignedRight"> 
        <a href="">Lighting</a> 
        <ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li><a href="customers.php?category=peli">Peli 2690 - Intrinsically Safe LED Head Lamp</a></li></ul><li class="dropdown_alignedRight"> 
        <a href="">Communication</a> 
        <ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li><a href="customers.php?category=handy">Ex-Handy 06 - Intrinsically Safe Cell Phone</a></li></ul> 
       </ul> 
       <li class="dropdown_alignedLeft"> 
       <a href="">Customers</a> 
       <ul> 
        <li><a href="customers.php?category=maritime">Maritime</a></li> 
        <li><a href="customers.php?category=non">Non-Maritime</a></li> 
        <li class="dropdown_lastItem"><a href="customers.php?category=organizations">Regulatory Organizations</a></li> 
       </ul> 
      <li><a href="order.php">Product Enquiry</a></li> 
      <li><a href="contact.php">Contact Us</a></li> 
          <li class="dropdown_alignedLeft"> 
       <a href="">Company</a> 
       <ul> 
        <!-- <li><a href="">About Us</a></li> --> 
        <li><a href="newsandpr.php?category=News">News</a></li> 
        <li class="dropdown_lastItem"><a href="newsandpr.php?category=Press Release">Press Releases</a></li> 
       </ul> 
</ol>

我的CSS：

#nav { 
float:right; 
margin:15px 0 0; 
} 
#nav li { 
float:left; 
} 
#nav li a { 
display:block; 
font-family:"PT Sans","Helvetica Neue",Arial,sans-serif; 
font-size:16px; 
text-decoration:none; 
color:#2B95C8; 
padding:10px 20px 20px; 
} 
.dropdown_alignedLeft,.dropdown_alignedRight { 
position:relative; 
} 
#nav .dropdown_alignedLeft>a,#nav .dropdown_alignedRight>a { 
background:url(../images/dropdown_arrow_blue.png) no-repeat top right; 
padding:10px 30px 20px 20px; 
} 
#nav .dropdown_alignedLeft:hover>a,#nav .dropdown_alignedRight:hover>a { 
-moz-border-radius-topleft:5px; 
-moz-border-radius-topright:5px; 
-moz-border-radius-bottomright:0; 
-moz-border-radius-bottomleft:0; 
-webkit-border-top-left-radius:5px; 
-webkit-border-top-right-radius:5px; 
-webkit-border-bottom-right-radius:0; 
-webkit-border-bottom-left-radius:0; 
border-top-left-radius:5px; 
border-top-right-radius:5px; 
border-bottom-right-radius:0; 
border-bottom-left-radius:0; 
color:#FFF; 
background:#2378A1 url(../images/dropdown_arrow_blue.png) no-repeat bottom right; 
} 
.dropdown_alignedLeft ul,.dropdown_alignedRight ul { 
display:none; 
} 
#nav .dropdown_alignedLeft:hover>ul,#nav .dropdown_alignedRight:hover>ul { 
display:block; 
z-index:100; 
position:absolute; 
top:50px; 
-moz-border-radius-topleft:0; 
-moz-border-radius-topright:0; 
-moz-border-radius-bottomright:5px; 
-moz-border-radius-bottomleft:5px; 
-webkit-border-top-left-radius:0; 
-webkit-border-top-right-radius:0; 
-webkit-border-bottom-right-radius:5px; 
-webkit-border-bottom-left-radius:5px; 
border-top-left-radius:0; 
border-top-right-radius:0; 
border-bottom-right-radius:5px; 
border-bottom-left-radius:5px; 
background:#2378A1; 
padding:0 0 6px; 
} 
#nav .dropdown_alignedRight:hover>ul { 
top:50px; 
right:0; 
text-align:right; 
} 
#nav li ul li { 
float:none; 
border-bottom:1px dashed #2B95C8; 
margin:0 20px; 
} 
#nav li ul li.dropdown_innerTitle { 
border:none; 
font-family:"Helvetica Neue",Arial,sans-serif; 
font-size:15px; 
white-space:nowrap; 
color:#C8DDE7; 
margin:10px 20px 0; 
padding:10px 0; 
} 
#nav li ul li.dropdown_lastItem { 
border:none; 
} 
#nav li ul li a { 
font-family:"Helvetica Neue",Arial,sans-serif; 
font-size:13px; 
color:#FFF; 
white-space:nowrap; 
padding:10px 0 9px; 
} 
#nav>li:hover>a,#nav li .current_page { 
    color:#2378A1; 
    background:url(../images/current_page_arrow_blue.png) no-repeat center bottom; 
} 
#nav li ul li a:hover { 
    color: #C8DDE7; 
}

有關菜單的真人版，請到這裏：

JSFiddle - Live Menu

來源

2012-03-20 Adam Nygate

你沒有關閉很多你的li標籤，你的子菜單剛剛從它的容器中飛出。清理你的代碼並提出修改太多，在這裏列出：

http://jsfiddle.net/MmHSd/4/

來源

2012-03-20 20:47:52

愛你<3 xoxo – 2012-03-20 22:26:29

http://purecssmenu.com/可以幫助你。嘗試下載列表並查看它。刪除所有你有額外的標籤，並採取一切回到這樣一個基本的列表：

<ul> 
    <li>Element 1</li> 
    <li>Element 2</li> 
<ul> 
    <li> 
    Element 2 Child 1 
    </li> 
    <li> 
    Element 2 Child 2 
    </li> 
</ul>

和工作備份到一些更復雜的效果也會有所幫助。

來源

2012-03-20 20:34:53

我真的需要根據我設計的東西，有沒有可能的方式，你可以幫我修改現有的菜單，支持多級下拉？ – 2012-03-20 22:12:09

將HTML/CSS下拉菜單調整爲多級

回答

相關問題