html - 下拉菜单框的大小不同

我对整个Web制作世界都是陌生的。
我的下拉菜单有问题。
下拉菜单中的框大小取决于其中的单词。

无论如何，我可以使这些盒子的尺寸与最大盒子的尺寸相同，并使左单词也对齐吗？

的HTML

 <div id="navigation" class="radius">


<ul>
            <li><a href="index.html"><strong>Home</strong> </a></li>
            <li><a href="Graphics Work.html">Graphics and Photography</a>
            <ul>
                    <li><a href="#">Landscapes</a></li>
                    <li><a href="#">Special FX</a></li>
                    <li><a href="#">Advert Shots</a></li>

            </ul>
            </li>
            <li><a href="Film Work.html">Film Work</a></li>
            <li><a href="#Contactus">Contact Me </a></li>
            <li><a href="#About Me">About Me </a></li>

         </ul>
        </div>

的CSS

    #navigation {Width:100%; height:60px; background-color:#333;}

#navigation ul{font-family: "Capitals", "Times", "Lucida Grande", "Lucida     Sans Unicode", "Lucida Sans", "DejaVu Sans", "Verdana", "sans-serif"; display:     inline-block;
padding:10px; margin-left:5px; margin-top:5px; list-style-type:none; }

#navigation ul li {float:left; display:block;}

#navigation ul li ul {display:none;}

#navigation ul li ul li {display:block; float:none; padding-bottom:6px;     margin-left:55px;}

#navigation ul li ul li a {text-align:left; z-index:99; margin:auto;}

#navigation ul ul {visibility:hidden; }

#navigation ul li a{background:#333; color: #fff; padding:8px 69px;     position:relative; text-decoration:none; }

#navigation ul li:hover ul {display:block; visibility:visible; margin-    top:20px;  }

#navigation ul li a:hover{text-decoration:underline; color:#1B76AE;}

最佳答案

您的CSS遇到了一些问题。我已经修复了CSS并应用了一些新的CSS。这是工作片段

*{
    box-sizing: border-box;
}
#navigation {
     Width: 100%;
     background-color: #333;
 }
 #navigation > ul {
     font-family: "Capitals", "Times", "Lucida Grande", "Lucida     Sans Unicode", "Lucida Sans", "DejaVu Sans", "Verdana", "sans-serif";
     display: block;
     padding: 10px;
     margin-left: 5px;
     margin-top: 5px;
     list-style-type: none;
 }
#navigation > ul:after{
    clear:both;
    content:"";
    display: block;
}
 #navigation > ul > li {
     position:relative;
     float: left;
 }

 #navigation ul > li > a {
     display:block;
     background: #333;
     color: #fff;
     padding: 8px 30px;
     position: relative;
     text-decoration: none;
 }
 #navigation > ul > li > ul {
     display: none;
     position:absolute;
     left:0;
     width:100%;
     list-style: none;
     padding: 0;
 }
 #navigation > ul > li > ul > li {
     display: block;
     float: none;
    position:relative;
     width:100%;
 }
 #navigation > ul > li > ul > li > a {
     text-align: left;
     z-index: 99;
     margin: auto;
     display:block;
 }

 #navigation > ul > li:hover > ul {
     display: block;
 }
 #navigation > ul > li > a:hover {
     text-decoration: underline;
     color: #1B76AE;
 }

<div id="navigation" class="radius">
         <ul>
            <li><a href="index.html"><strong>Home</strong> </a></li>
            <li><a href="Graphics Work.html">Graphics and Photography</a>
            <ul>
                    <li><a href="#">Landscapes</a></li>
                    <li><a href="#">Special FX</a></li>
                    <li><a href="#">Advert Shots</a></li>

            </ul>
            </li>
            <li><a href="Film Work.html">Film Work</a></li>
            <li><a href="#Contactus">Contact Me </a></li>
            <li><a href="#About Me">About Me </a></li>

         </ul>
        </div>

关于html - 下拉菜单框的大小不同，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33062823/