0

現在、件名の追加、件名の削除、件名の削除、サブメニューの手動クロールは、#menu li li a で text-align center に指定しているにもかかわらず、集中化されていません。サブメニューのエグゼクティブサマリーも切れています。サブメニューを展開してすべてのテキストを一元化する方法を教えてください。ありがとうございました！

これが私のコードです（私は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>

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

2 に答える 2

0 
    #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: 0px 10px 0px 10px;   
    margin: 0 3px;
    color: #fff;
    text-align: center;
}

#menu ul ul {
   display: none;
   width: 11em; /* 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: 0px 10px 0px 10px;   
    margin: 0 0px;
    color: #fff;
    text-align: center;
}

#menu li li a:hover{
   background: rgba(255,255,255,0.5);
}
于 2012-09-06T05:21:57.587 に答える
0

スタイリングを追加

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

あなた<a>はパディングを残しましたが、それは左右の両方からのものでなければなりませんか、パディングを削除することができます

于 2012-09-06T05:28:06.193 に答える