0

我在我们公司的网站上工作，我对 HTML 和 CSS 非常陌生。我正在尝试为导航栏制作一个下拉菜单，并且我有它的要点，但它需要一些帮助。下拉列表没有正确排列，文本太大，我的边框跨越了列表的整个长度。

CSS：

.menu{
    padding:0;
    margin:25px 0 0 0;
}
.menu, .menu li{
    list-style: none;
    display: block;
    float:right;
    padding:12px;
    border-right: 1px solid #d8d8d8;
}
.menu li{
    float:left;
    display: block;
    width: 100px;
}
.menu ul{
    opacity: 0;
}
.menu ul li{
    background-color: white;
}
.menu li:hover > ul{
    opacity: 1;
}
.menu li.last-menu-item{
    border: none;
    padding-right:0;
}
.menu a{
    color:#132d3c;
    font-size:15px;
    font-family: 'sansationbold';
    text-transform: uppercase;
    text-decoration: none;
    font-weight:lighter;
}
.current-menu-item a{
    color:#f15c22;
}
.menu a:hover{
    color:#f15c22;
}

HTML：

<ul class="menu alignright">
            <li class="current-menu-item"><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a>
                <ul>
                    <li><a href="about.html">Who We Ar</a></li>
                    <li><a href="about.html">Values</a></li>
                    <li><a href="about.html">Owners Message</a></li>
                    <li><a href="#">Infotek Blog</a></li>
                    <li><a href="stories.html">Success Stories</a></li>
                    <li><a href="partners.html">Partners</a></li>
                </ul>
            </li>
            <li><a href="products.html">Products &amp; Solutions</a>
                <ul>
                    <li><a href="p&s.html">Security Solutions</a></li>
                    <li><a href="p&s.html">Data Solutions</a></li>
                    <li><a href="p&s.html">Communication Solutions</a></li>
                    <li><a href="p&s.html">Connectivity Solutions</a></li>
                    <li><a href="p&s.html">Infrastructure Solutions</a></li>
                    <li><a href="resources.html">Resources</a></li>
                </ul>
            </li>
            <li class="last-menu-item"><a href="contact.html">Contact</a></li>
        </ul>

我能得到一点帮助吗？

http://jsfiddle.net/pQhpu/191/

4

5 回答 5

1

嗨，在这你犯了一些错误。

  • 不要使用不透明度来隐藏子菜单，用属性设置它display:none

  • 用position:relative你的 li 和里面的 ul设置position:absolute

查看此演示并提出任何问题http://jsfiddle.net/pQhpu/214/

编辑

要解决您将子菜单与他的父母相关的中心的请求，您可以使用 Jquery。我为你创建了这个函数：在这里查看演示http://jsfiddle.net/pQhpu/264/

$(document).ready (function () {

$('.menu li').mouseenter(function (){
     var $this = $(this),
         $sub =$(this).children('ul'),
         pad = parseInt($this.css('padding-left'),10)+parseInt($this.css('padding-right'),10),
         move=($this.width()+pad-$sub.width())/2;
    $sub.css ('left',move+'px');   
});

})

您只需在此处更改显示子菜单的 li 的名称路由；在我的情况下是'.menu li'。此函数获取子菜单及其父级的宽度并进行操作以使其居中。

于 2013-10-24T22:27:35.673 回答
0

对于边框，将它们放在a实际的li. 并将您的填充也放在a右边以将边框推到右侧。如果您不希望右侧有浮动边框，则通常必须在最后一项中添加类似 '.last' 的类。必须使宽度更大以容纳一行上的所有文本，或减小整体大小。那应该让你开始。

于 2013-10-24T22:16:19.720 回答
0

首先，你的设计很糟糕。我认为您可能从某个地方复制了它，但是有很多交叉/重叠元素。分别定义每个不同的部分（菜单选项，下拉选项等），而不是将事物应用于所有lis 和什么不。

这是宽度的修复。我使 div 更大。这很难。接下来，您必须为所有下拉项定义一个类，然后使它们的字体大小更小，并应用与菜单项相同的宽度，这样它们就不会比菜单项稍大。 http://jsfiddle.net/pQhpu/200/

于 2013-10-24T22:18:12.530 回答
0

要纠正对齐问题，请添加：

.menu, .menu li
    {
    padding: 12px 0 12px 0;
    }

这显示在萤火虫中，但不在您上面的代码中

.menu, .menu li
    {
    padding: 12px;
    }
于 2013-10-24T22:19:26.333 回答
0

要防止边框跨越列表的整个长度，请使用 display 属性而不是更改不透明度。

.menu ul{
    display: none;
}

.menu li:hover > ul{
    display: inline;
}
于 2013-10-24T22:25:37.360 回答