HTML和CSS下拉菜单

我在我们公司的网站上工作，我对HTML和CSS非常陌生。我正在尝试为导航栏制作一个下拉菜单，我有它的要点，但它需要一些帮助。下拉菜单排列不正确，文字太大，我拥有的边框横跨列表的整个长度。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/

来源

2013-10-24 Joshua Mathews

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

不要使用不透明度隐藏的子菜单，与物业display:none
设置与position:relative贵丽和里面他们与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'); 
}); 

})

所有你必须在这里改变的是贵丽的名字路线显示的子菜单;在我的情况下是'.menu li'。该函数获取子菜单及其父项的宽度并进行操作以使其居中。

来源

2013-10-24 22:27:35 DaniP

感谢您的反馈意见。这几乎是我想要的。还有一些问题。悬停后显示下拉菜单时，会有相当大的左侧空白空间。另外我不确定是否需要z-index，但是当我将鼠标悬停在菜单上并向下移动鼠标时，一旦到达网站的下一个元素，下拉菜单就消失。如果没问题，我可以在明天回到工作岗位时发送屏幕截图。 –

好吧只是发表评论来查看屏幕截图 – DaniP

http://i.imgur.com/0cY1C6n.png此链接显示HTML和CSS文件以及鼠标指针位于未对齐菜单上的网站的屏幕截图。我设法让关于菜单居中并在CSS文件中注释。我想我需要为产品和解决方案子菜单创建一个班级，以便控制他们的位置。这是http://i.imgur.com/VWTaJF8.jpg是我希望看到的菜单。集中在主要的导航标题下。请帮忙 –

为边界，把它们放在a而不是实际li。然后把你的填充物放在a上，并将边界向右推。如果您不想将浮动边框向右移动，通常必须将“.last”类添加到最后一个项目。必须使宽度更大以容纳一行上的所有文本，或者减小整体大小。这应该让你开始。

来源

2013-10-24 22:16:19

首先，您的设计太可怕了。我想你可能从某个地方复制了它，但是有这么多的交叉/覆盖元素。分别定义每个不同的部分（菜单选项，下拉选项等），而不是将所有东西应用于所有li s，而不是。

这里是对宽度的修复。我让div变大了。这很难。接下来，您必须为所有下拉项目定义一个类，然后缩小它们的字体大小，并将相同的宽度应用于菜单项，以便它们不会比菜单项略大。 http://jsfiddle.net/pQhpu/200/

来源

2013-10-24 22:18:12

要纠正对齐问题补充：

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

这显示在萤火，但不是在上面

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

来源

2013-10-24 22:19:26 Gavin

你的代码，以防止边境从跨越列表的整个长度，请使用display属性来改变不透明度。

.menu ul{ 
    display: none; 
} 

.menu li:hover > ul{ 
    display: inline; 
}

来源

2013-10-24 22:25:37 justyn

HTML和CSS下拉菜单

回答

相关问题