-2
body { font-family:Segoe UI, Arial, Sans-Serif; font-size:0.9vw;}
#programs {
background: #fff;border: solid 0.1vw #365167;margin: 0.7vw 0 0.7vw 0.7vw;box-shadow: 0 0 0.1vw #fff;-moz-box-shadow: 0 0 0.1vw #fff;-webkit-box-shadow: 0 0 0.1vw #fff;-ms-box-shadow: 0 0 0.1vw #fff;-0-box-shadow: 0 0 0.1vw #fff;-moz-border-radius: 0.3vw;-o-border-radius: 0.3vw;-ms-border-radius: 0.3vw;-webkit-border-radius: 0.3vw;float: left;display: block;padding: 0%;list-style: none;
}
#programs a:hover {border:solid 1px #7da2ce;
-moz-border-radius:3px; -webkit-border-radius:3px;
box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
background-color:#cfe3fd;
background: -moz-linear-gradient(top, #dcebfd, #c2dcfd);
background: -webkit-gradient(linear, center top, center bottom, from(#dcebfd), to(#c2dcfd));}
#links {
margin: 0.7vw;
margin-top: -9%;
width: 10vw;
float: left;
display: block;
padding: 0%;
list-style: none;
}
#links li.icon {text-align:center;}
#links a {
border: solid 0.1vw transparent;
display: block;
margin: 3% 0%;
position: relative;
color: #fff;
text-decoration: none;
min-width: 12%;
}
#links a:hover {
border:solid 0.1vw #000;
-moz-border-radius:0.3vw;
-webkit-border-radius:0.3vw;
box-shadow: 0 0 0.1vw #fff;
-moz-box-shadow: inset 0 0 0.1vw #fff;
-webkit-box-shadow: inset 0 0 0.1vw #fff;
background-color:#658da0;
background: -moz-linear-gradient(center left, rgba(81,115,132,0.55), rgba(121,163,184,0.55) 50%, rgba(81,115,132,0.55));
background: -webkit-gradient(linear, 0% 100%, 100% 100%, from(#517384), color-stop(50%, #79a3b8), to(#517384));
}
#links a span { padding:4%; display:block; }
#links a:hover span { background: -moz-linear-gradient(center top, transparent, transparent 49%, rgba(2,37,58,0.5) 50%, rgba(63,111,135,0.5));
background: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(49%, transparent),
color-stop(50%, rgba(2,37,58,0.5)), to(rgba(63,111,135,0.5))); }
#startmenu {
border-radius: 0.5vw;
-webkit-box-shadow: inset 0 0 0.1vw #fff;
box-shadow: inset 0 0 0.1vw #fff;
background-color: #619bb9;
background: -webkit-linear-gradient(top, rgba(26, 59, 76, 0.59), rgba(1, 23, 34, 0.82) 50%, rgba(26, 59, 76, 0.59));
background: -moz-linear-gradient(top, rgba(26, 59, 76, 0.59), rgba(1, 23, 34, 0.82) 50%, rgba(26, 59, 76, 0.59));
background: -o-linear-gradient(top, rgba(26, 59, 76, 0.59), rgba(1, 23, 34, 0.82) 50%, rgba(26, 59, 76, 0.59));
background: -ms-linear-gradient(top, rgba(26, 59, 76, 0.59), rgba(1, 23, 34, 0.82) 50%, rgba(26, 59, 76, 0.59));
background: linear-gradient(top, rgba(26, 59, 76, 0.59), rgba(1, 23, 34, 0.82) 50%, rgba(26, 59, 76, 0.59));
border: solid 0.1vw #102A3E;
display: inline-block;
overflow: visible;
position: absolute;
bottom: 6%;
left: 0%;
}
.search form {
background: #E4F4FC;
border-top: 0.2vw solid #BEE6FD;
border-radius: 0 0 0.5vw 0.5vw;
display: block;
padding: 0.5vw;
height: 2.5vw;
margin-bottom: 0%;
}
.search input {
border-top: 0.1vw solid #4D4D4D;
border-bottom: 0.1vw solid #AAA;
border-left: 0.1vw solid #4D4D4D;
border-right: 0.1vw solid #AAA;
padding: 3px 5px;
margin-top: 2%;
margin-left: 0%;
font: italic 0.9vw Calibri,Arial,Sans-Serif;
color: #000;
width: 17vw;
position: relative;
outline: none;
background: white url(search.png) no-repeat scroll right center;
}<body>
<div id="startmenu">
<ul id="programs">
<li><a style="border: solid 0.1vw transparent;display: block;padding: 1.1%;margin: 1%;color: black;text-decoration: none;min-width: 22%;font-weight: 400;" href="javascript:void(0);"><img src="notepad.png" style="width: 15%;height: 5%;border: 0vw;vertical-align: middle;margin: 0 0.5vw 0 0;">Notepad</a></li>
<hr style="border-bottom: 0.1vw solid black;border-top: 0.1vw solid #fff;opacity: .16;" >
<li><a style="border: solid 0.1vw transparent;display: block;padding: 1.1%;margin: 1%;color: black;text-decoration: none;min-width: 22%;font-weight: 400;" href="javascript:void(0);"><img src="firefox.png" style="width: 15%;height: 5%;border: 0vw;vertical-align: middle;margin: 0 0.5vw 0 0;">Mozilla Firefox</a></li>
<li><a style="border: solid 0.1vw transparent;display: block;padding: 1.1%;margin: 1%;color: black;text-decoration: none;min-width: 22%;font-weight: 400;" href="javascript:void(0);"><img src="chrome.png" style="width: 15%;height: 5%;border: 0vw;vertical-align: middle;margin: 0 0.5vw 0 0;">Google Chrome</a></li>
<li><a style="border: solid 0.1vw transparent;display: block;padding: 1.1%;margin: 1%;color: black;text-decoration: none;min-width: 22%;font-weight: 400;" href="javascript:void(0);"><img src="safari.png" style="width: 15%;height: 5%;border: 0vw;vertical-align: middle;margin: 0 0.5vw 0 0;">Safari</a></li>
<li><a style="border: solid 0.1vw transparent;display: block;padding: 1.1%;margin: 1%;color: black;text-decoration: none;min-width: 22%;font-weight: 400;" href="javascript:void(0);"><img src="opera.png" style="width: 15%;height: 5%;border: 0vw;vertical-align: middle;margin: 0 0.5vw 0 0;">Opera</a></li>
<li><a style="border: solid 0.1vw transparent;display: block;padding: 1.1%;margin: 1%;color: black;text-decoration: none;min-width: 22%;font-weight: 400;" href="javascript:void(0);"><img src="ie.png" style="width: 15%;height: 5%;border: 0vw;vertical-align: middle;margin: 0 0.5vw 0 0;">Internet Explorer</a></li>
<li><a style="border: solid 0.1vw transparent;display: block;padding: 1.1%;margin: 1%;color: black;text-decoration: none;min-width: 22%;font-weight: 400;" href="javascript:void(0);"><img src="rss.png" style="width: 15%;height: 5%;border: 0vw;vertical-align: middle;margin: 0 0.5vw 0 0;">RSS Feeds</a></li>
<li><a style="border: solid 0.1vw transparent;display: block;padding: 1.1%;margin: 1%;color: black;text-decoration: none;min-width: 22%;font-weight: 400;" href="javascript:void(0);"><img src="twitter.png" style="width: 15%;height: 5%;border: 0vw;vertical-align: middle;margin: 0 0.5vw 0 0;">Twitter</a></li>
<li><a style="border: solid 0.1vw transparent;display: block;padding: 1.1%;margin: 1%;color: black;text-decoration: none;min-width: 22%;font-weight: 400;" href="javascript:void(0);"><img src="delicious.png" style="width: 15%;height: 5%;border: 0vw;vertical-align: middle;margin: 0 0.5vw 0 0;">Delicious</a></li>
<hr style="border-bottom: 0.1vw solid black;border-top: 0.1vw solid #fff;opacity: .16;" >
<li><a id="uniqueid" style="border: solid 0.1vw transparent;display: block;padding: 1.1%;margin: 1%;color: black;text-decoration: none;min-width: 22%;font-weight: 400;" href="javascript:void(0);"><img src="arrow.png" title="Open the list of your Program" style="width: 20%;height: 2%;border: 0vw;vertical-align: middle;margin: 0 0.5vw 0 0;">All Programs</a></li>
<hr style="margin-bottom:1%;border: 2;border-top: 1px solid black;opacity: .1;" >
\t \t <li class="search">
\t \t \t <form action="">
\t \t \t <input type="text" placeholder="Search programs and files">
\t \t \t </form>
\t </li>
</ul>
<ul id="linkshia">
<li class="icon"><img src="folder.png" width="60%" height="10%"></li>
<br>
<li><a href="javascript:void(0);" title="Open your personal folder."><span>M.Makshif</span></a></li>
<li><a href="javascript:void(0);" title="Access letters, reports, notes, and other kinds of documents."><span>Documents</span></a></li>
<li><a href="javascript:void(0);" title="View and organize digital pictures."><span>Pictures</span></a></li>
<li><a href="javascript:void(0);" title="Play music and other audio files."><span>Music</span></a></li>
<hr style="border-bottom: 0.1vw solid black;border-top: 0.1vw solid #fff;opacity: .16;" >
<li><a href="javascript:void(0);" title="Play and manage games on your computer."><span>Games</span></a></li>
<li><a href="javascript:void(0);" title="See the disk drives and other hardware connected to your computer."><span>Computer</span></a></li>
<hr style="border-bottom: 0.1vw solid black;border-top: 0.1vw solid #fff;opacity: .16;" >
<li><a href="javascript:void(0);" title="Change settings and customize the functionality of your computer."><span>Control Panel</span></a></li>
<li><a href="javascript:void(0);" title="View and manage devices, printers and print jobs."><span>Devices and Printers</span></a></li>
<li><a href="javascript:void(0);" title="Choose default programs for web browsing, e-mail, playing music and other activites."><span>Default Programs</span></a></li>
<li><a href="javascript:void(0);" title="Find Help topics, tutoriols, troubleshooting, and other support services."><span>Help and Support</span></a></li>
<br>
<br>
<br>
<br>
<br>
<br>
</ul>
</div>
</body>我想要使用HTML，CSS，JavaScript的Windows 7的實際開始菜單。硬工作之後，我發現這個代碼。請以更美麗的外觀向我展示正確的代碼。我會非常感謝你。 錯誤在哪裏？
什麼問題，順便說一句？ – 2015-03-25 11:25:38
我發現了一個問題，我要刪除這個問題先生。 – 2015-03-25 11:27:13
@PrerakSola我該如何刪除它？ – 2015-03-25 11:27:58