منو

[{mahdi}]

سلام و خسته نباشید خدمت همه:
من توی اینترنت یه منوی ساده پیداکردم منو مال دریمویوره که بیس اصلی ساخت منوست.
گفتم شاید به درد کسایی که می خوان ساخت منو رو یاد بگیرن بخوره.



<ul id="main_menu">

<li><a href="#">File</a>
<ul>
<li><a href="">New</a></li>
<li><a href="">Open</a></li>
<li><a href="">Open Recent</a></li>
<li><a href="">Close</a></li>
<li><a href="">Close All</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="">Save</a></li>
<li><a href="">Save As</a></li>
<li><a href="">Save All</a></li>
<li><a href="">Save All Related Files</a></li>
<li><a href="">Save As Template</a></li>
<li><a href="">Revert</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="">Import</a></li>
<li><a href="">Export</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="">Preview In Browser</a></li>
<li><a href="">Validate</a></li>
<li><a href="">Compare With Remote Server</a></li>
<li><a href="">Design Notes...</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="">Exit</a></li>
</ul></li>

<li><a href="#">Edit</a>
<ul>
<li><a href="#">Undo</a></li>
<li><a href="#">Redo</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="#">Cut</a></li>
<li><a href="#">Copy</a></li>
<li><a href="#">Paste</a></li>
<li><a href="#">Paste pecial</a></li>
<li><a href="#">Clear</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="#">Select All</a></li>
<li><a href="#">Select Parent tag</a></li>
<li><a href="#">Select Child</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="#">Find And Replace</a></li>
<li><a href="#">Find Selection</a></li>
<li><a href="#">Find Next</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="#">Go to Line</a></li>
<li><a href="#">Show Code Hint</a></li>
<li><a href="#">Refresh Code Hint</a></li>
<li><a href="#">Code Hint Tools</a></li>
<li><a href="#">Indent Code</a></li>
<li><a href="#">Outdent Code</a></li>
<li><a href="#">Balance Brace</a></li>
<li><a href="#">Repeating Entire</a></li>
<li><a href="#">Code Collapse</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="#">Sync Setting</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="#">Tag libraries</a></li>
<li><a href="#">Keyboard Shortcuts...</a></li>
<li><a href="#">Prefrences</a></li>
</ul></li>

<li><a href="#">View</a>
<ul>
<li><a href="#">Code</a></li>
<li><a href="#">Split Code</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Code And Design</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="#">Split Vertically</a></li>
<li><a href="#">Design View On Left</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="#">Switch View</a></li>
<li><a href="#">Refresh Design View</a></li>
<li><a href="#">Refresh Style</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="#">Live View</a></li>
<li><a href="#">Live View Option</a></li>
<li><a href="#">Live Code</a></li>
<li><a href="#">Impact</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="#">Visual Aids</a></li>
<li><a href="#">Style Rendering</a></li>
<li><a href="#">Code View Option</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="#">Window Size</a></li>
<li><a href="#">Magnification</a></li>
<li><a href="#">Rulers</a></li>
<li><a href="#">Gride</a></li>
<li><a href="#">Guides</a></li>
<li><a href="#">Tracing Image</a></li>
<li><a href="#">Plugins</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="#">Display External Files</a></li>
<li><a href="#">Show Panels</a></li>
<li><a href="#">Toolbars</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="#">Relate Files</a></li>
<li><a href="#">Related File Options</a></li>
<li><a href="#">Code Navigator...</a></li>
</ul></li>

<li><a href="#">Insert</a>
<ul>
<li><a href="#">Div</a></li>
<li><a href="#">HTML5 Video</a></li>
<li><a href="#">Canvas</a></li>
<li><a href="#">Image</a></li>
<li><a href="#">Table</a></li>
<li><a href="#">Head</a></li>
<li><a href="#">Script</a></li>
<li><a href="#">Hyperlink</a></li>
<li><a href="#">Email link</a></li>
<li><a href="#">Horizontal rule</a></li>
<li><a href="#">Date</a></li>
<li><a href="#">Iframe</a></li>
<li><a href="#">Character</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="#">Stracture</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Form</a></li>
<li><a href="#">Jquery Mobile</a></li>
<li><a href="#">Jquery UI</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="#">Template</a></li>
<li><a href="#">Favorites</a></li>
<li><a href="#">Code Snippets</a></li>
</ul></li>

<li><a href="#">Modify</a>
<ul>
<li><a href="#">Page Properties</a></li>
<li><a href="#">Template Properties</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="#">Manage font</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="#">Quick Tag Editor</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="#">Make Link</a></li>
<li><a href="#">Remove Link</a></li>
<li><a href="#">Open Linked Page</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="#">Table</a></li>
<li><a href="#">Image</a></li>
<li><a href="#">Arrange</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="#">Library</a></li>
<li><a href="#">Templates</a></li>
</ul></li>

<li><a href="#">Format</a>
<ul>
<li><a href="#">Indent</a></li>
<li><a href="#">Outdent</a></li>
<li><a href="#">Paragraph Format</a></li>
<li><a href="#">Paragraph Format</a></li>
<li><a href="#">Align</a></li>
<li><a href="#">List</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="#">HTML Style</a></li>
<li><a href="#">CSS Style</a></li>
</ul></li>

<li><a href="#">Commands</a>
<ul>
</ul></li>
<li><a href="#">Site</a>
<ul>
</ul></li>
<li><a href="#">Window</a>
<ul>
</ul></li>

<li><a href="#">Help</a>
<ul>
<li><a href="#">Dreamweaver Help</a></li>
<li><a href="#">Dreamweaver Support Center</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="#">Dreamweaver Exchange</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="#">Adobe Online Forums</a></li>
<li>

<div class="ln">
</div></li>
<li><a href="#">Complate/Update Adobe ID Profile</a></li>
<li><a href="#">Sign IN</a></li>
<li><a href="#">Updates...</a></li>
<li><a href="#">Adobe Products Improve Programs</a></li>
<li><a href="#">About Dreamweaver</a></li>
</ul></li>

</ul>




#main_menu{
position:relative;
z-index:9999;
width:100%;
margin:0px;
padding:0px;
}
#main_menu li{
background-color:#D6D6D6;
list-style:none;
float:left;
}
#main_menu li:hover{
background-color:Gray;
}
#main_menu a{
display:block;
text-decoration:none;
padding:0 18px;
color:black;
font:menu;
}
#main_menu li ul{
position:absolute;
display:none;
padding:0
}
#main_menu li ul li:hover{
background-color:#39F;
}
#main_menu li ul li a{
margin-left:25px;
padding-left:5px;
border-left:1px solid gray;
}
#main_menu li:hover ul{
display:block;
}
#main_menu li li{
float:none;
}
.ln{
width:calc(100% - 25px);
height:1px;
background-color:gray;
margin-left:25px;
}