下拉菜单框的大小不同

Question

I am fairly new to the whole Web making world.
I am having trouble with my drop down menu. The boxes in the drop down menu are different sizes depending on the word in it.

Is there anyway I can make these boxes all the same size as the biggest on and align the words left as well?

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

Answer 1

You css had some issues. I've fixed your CSS and applied some new CSS. Here is working snippet

 *{ 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> 

Answer 2

Use the width property in CSS for it. For the purpose of this example, I used inline style. You should preferably go with a separate stylesheet.

<select style="width: 10%;" >
<option>Some content</option>
<option>Some more content </option>
<option>Some more content </option>
<option>Some more content </option>
<option>Some more content </option>
<option>Some more content </option>
</select>