4

我一直在尝试为我正在开发的网站将原始下拉菜单设置为多层次。我所有的尝试都失败了（。出于某种原因，我只能做“margin-right”来对齐元素，这会导致一些问题。我认为这与位置属性有关。

这是我的 HTML：

<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 - 实时菜单

4

2 回答 2

1

你没有关闭很多li标签，你的子菜单只是从它的容器中飞出来。清理了您的代码并进行了太多修改，无法在此处列出：

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

于 2012-03-20T20:47:52.923 回答
0

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-20T20:34:53.743 回答