html - CSS HTML 下拉菜单未显示全文且文本未对齐

Question

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

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

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>

</p>

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);
}

</p>

score 1 · Accepted Answer

这应该让你运行：

#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);
}

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

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

见： http: //preview.moveable.com/jm/ilovelists/

score 1 · Accepted Answer

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

score 1 · Accepted Answer

添加：

1) 位置：相对；到#menu ul li
2) top: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 足够熟悉，您会发现它很有用。

score 0 · Accepted Answer

看看小提琴。做了很多 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);
   }

score 0 · Accepted Answer

像这样将margin-top添加到子菜单

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

html - CSS HTML 下拉菜单未显示全文且文本未对齐

5 回答 5

看看小提琴。做了很多 CSS 更改：http: //jsfiddle.net/wAGGA/

CSS：

Related

Reference