Question

我已编辑此帖子，因为它已部分解决了我的问题。但是，我现在面临一个新问题，如果被认为是垃圾邮件，我不想创建一个新问题。目前，即使我已将其指定为#menu li li a中的文本对齐中心，我的添加主题，删除主题，删除主题，手动爬行也不是集中的。子菜单的执行摘要也被截止。我可以知道如何扩展子菜单并集中我的所有文本吗？
谢谢！

这是我的代码（我真的很抱歉，因为我没有jsfiddle acct并且在等待名单上）：

HTML

<div id="menu">
<ul>
    <li><a href="#" >Home</a></li>
    <li><a href="#" >Executive Summary</a></li>
    <li><a href="#" > Visual Analytics</a></li> 
    <li><a href="#" >Settings</a>
        <ul>                                        
            <li><a href="#">Add Subject</a></li>
            <li><a href="#">Delete Subject</a></li>
            <li><a href="#"> Edit Subject</a></li> 
            <li><a href="#" >Manual Crawl</a></li>
            <li><a href="#" >Executive Summary</a></li>
        </ul>
    </li>
</ul>

CSS

     #menu {
    position: relative;
    float: left;
    width: 1200px;
    height: 35px;
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 13px;
    padding: 0;
    background: #000;
    text-align: center;
}

#menu ul {
    position: relative;
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}

#menu li {
    position: relative;
    float: left;
    height: 100%;
    padding: 0;
    line-height: 35px; 
}

#menu a {
    position: relative;
    height: 100%; 
    width: auto;
    float: left;
    text-decoration: none;
    padding: 0 0 0 25px; 
    margin: 0 3px;
    color: #fff;
    text-align: center;
}

#menu ul ul {
   display: none;
   width: 10em; /* Width to help Opera out */
   background-color: rgba(0,0,0,0.5);
}

#menu li:hover ul {
    display:block;
   position: absolute;
   top: 35px;
   left: 0;
   margin: 0;
   padding: 0;
   z-index: 1; 
}

#menu li li a{
    height: 35px; 
    width: 100%;
    float: left;
    text-decoration: none;
    padding: 0 0 0 25px; 
    margin: 0 3px;
    color: #fff;
    text-align: center;
}

#menu li li a:hover{
   background: rgba(255,255,255,0.5);
}

Answer 1

这可以让你跑步：

#menu ul, #menu li {
    list-style:none;
    margin:0;
    padding:0;   
}

#menu ul li {
   float:left;
   position:relative;
}
#menu ul li a {
   display:block;
   height:35px;
   margin-right:5px;
}
#menu ul li ul {
   display: none;
   background-color: rgba(0,0,0,0.5);
}
#menu ul li:hover ul, #menu ul li.hover ul {
   display: block;
   position: absolute;
   top:40px;
   left:0   
   margin: 0;
   padding: 0;
   z-index:1;
}

#menu ul li ul li a {
   display:block;
   height:35px;
   width:130px
   background-color: rgba(0,0,0,0.5);
}
#menu ul li ul li a:hover{
   background:rgba(255,255,255,0.5);
}

您错过的一件事是为子菜单的PARENT设置position:relative。这很重要，因为这会重置子项的原点。我还清理了一些东西并删除了一些冗余的声明。您可能需要稍微重新设置文本样式。

重要的一点是：菜单的所有样式（定位除外）都应该应用于A标签，而不是LI。这包括字体。 bg颜色等。

请参阅：http://preview.moveable.com/jm/ilovelists/

Answer 2

使用position: relative和position: absolute;的组合来解决您的问题请参阅JsFiddle http://jsfiddle.net/VDmJj/1/

Answer 3

添加：

1）位置：相对;到#menu ul li
2）上：30px;左：10px的;到#menu ul li：hover ul，＃menu ul li.hover ul
3）宽度：180px;到#menu ul li ul（这可能取决于子菜单项）

通过进行微小的更改，这将为您提供所需的结果。尽管css对于它正在执行的任务来说有点复杂，即通过以下方法可以非常简单地完成：

http://jsfiddle.net/tPBmV/

这是我基于jquery找到的另一个小提琴。

http://jsfiddle.net/davidThomas/YfjzP/

它不是由我制作的，但是如果你足够舒服地实现jquery，你会发现它很有用。

Answer 4

查看小提琴。很多CSS都发生了变化：http://jsfiddle.net/wAGGA/

CSS：

 #menu {
   width:1200px;
height:35px;
padding:0px;
clear:both;
background-color:#000;
 }
 #menu ul{
list-style:none;padding:0 0 0 400px;margin: auto;display:block;
}

#menu ul li {
   list-style:none;display:inline;float:left;width:auto;height:35px;padding:0px;line-height:35px; font-family:Arial, Helvetica, sans-serif; font-size:13px; }
#menu ul li a{
   display:block;height:35px; width: auto;float:left;text-decoration:none;padding:0 0 0 25px; margin:0px 3px 0px 3px;color:#fff;text-align:center;}
#menu ul li ul {
   display: none;
   width: 200px; /* Width to help Opera out */
   background-color: rgba(0,0,0,0.5);}
#menu ul li:hover ul, #menu ul li.hover ul {
   display: block;
   position: absolute;
   margin: 0;
   padding: 0;
   z-index:1;
   top: auto;
    margin-top: 35px;
    right: 0;
}
#menu ul li ul li {display: block; float: none; width: 100%}   
#menu ul li ul li a{
   display:block;
    height:35px; 
    text-decoration:none;
    padding:0 0 0 25px; 
    margin:0px 3px 0px 3px;
    color:#fff;
    text-align:center;
}
   #menu ul li ul li a:hover{
   background:rgba(255,255,255,0.5);
   }

Answer 5

将margin-top添加到子菜单中，如下所示

#menu ul li:hover ul, #menu ul li.hover ul{
margin-top:40px
}

CSS HTML下拉菜单未显示未对齐的全文和文本

5 个答案:

查看小提琴。很多CSS都发生了变化：http://jsfiddle.net/wAGGA/

CSS：