You can add simple HTML Lists on your web page to show your data in lists of links but what if you have sub lists in your lists then your list will gone long that your will web page will be covered that is bad for a better view.
So now here we have some tweaks that will hide your sub menus and will only show your parent menu and on hover on any parent link you will be able to see the sub menu in from of that menu with all lists in it.So now add Awesome Double HTML List On Hover For Web And Blog by seeing its love DEMO below then garb the code.
Table of Contents
Features:
1.) No JQuery File Added.
2.) No JavaScript Codes Added.
3.) CSS Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Mobile Browser.
How To Add In A WebPage?
1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.
CSS:
<style> ul.main_ul {position:relative;} ul.main_ul ul.sub_ul {margin-left:-20px;} ul.main_ul li:hover {background: rgba(0, 0, 0, 0.1)!important;width:290px;} ul.main_ul li:hover ul.sub_ul {display:block;} ul.main_ul ul.sub_ul {display:none;top:0px;background:rgba(0, 0, 0, 0.1)!important;left:350px;width:400px;height:100%;position:absolute;} </style>
HTML:
<ul class="main_ul"> <li><a href='https://www.exeideas.com/'>What's New</a></li> <li><a href='https://www.exeideas.com/search/label/Website'>Website</a> <ul class="sub_ul"> <li><a href='https://www.exeideas.com/search/label/Website%20Tips'>Website Tips</a></li> <li><a href='https://www.exeideas.com/search/label/Website%20Tricks'>Website Tricks</a></li> <li><a href='https://www.exeideas.com/search/label/Website%20Widgets'>Website Widgets</a></li> <li><a href='https://www.exeideas.com/search/label/Website%20Multi%20Tabs'>Website Multi Tabs</a></li> <li><a href='https://www.exeideas.com/search/label/Website%20POP%20UPs'>Website POP-Ups</a></li> <li><a href='https://www.exeideas.com/search/label/Website%20Footers'>Website Footers</a></li> <li><a href='https://www.exeideas.com/search/label/Website%20Social%20Sharing'>Website Social Sharing</a></li> <li><a href='##########'>Website Sliders</a></li> <li><a href='https://www.exeideas.com/search/label/Website%20Navigation%20Bar'>Website Navigation Bar</a></li> <li><a href='https://www.exeideas.com/search/label/Website%20SEO%20and%20SMO%20Tips%20and%20Tricks'>Website SEO and SMO Tips and Tricks</a></li> </ul> </li> <li><a href='https://www.exeideas.com/search/label/Blogspot'>Blogspot</a> <ul class="sub_ul"> <li><a href='https://www.exeideas.com/search/label/Blogspot%20Tips'>Blogspot Tips</a></li> <li><a href='https://www.exeideas.com/search/label/Blogspot%20Tricks'>Blogspot Tricks</a></li> <li><a href='https://www.exeideas.com/search/label/Blogspot%20Widgets'>Blogspot Widgets</a></li> <li><a href='https://www.exeideas.com/search/label/Blogspot%20Social%20Sharing'>Blogspot Social Sharing</a></li> <li><a href='https://www.exeideas.com/search/label/Blogspot%20Footers'>Blogspot Footers</a></li> <li><a href='https://www.exeideas.com/search/label/Blogspot%20POP%20UPs'>Blogspot POP-Ups</a></li> <li><a href='https://www.exeideas.com/search/label/Blogspot%20List%20Of%20Posts'>Blogspot List Of Posts</a></li> <li><a href='https://www.exeideas.com/search/label/Blogspot%20Multi%20Tabs'>Blogspot Multi Tabs</a></li> <li><a href='https://www.exeideas.com/search/label/Blogspot%20Related%20Posts'>Blogspot Related Posts</a></li> <li><a href='https://www.exeideas.com/search/label/Blogspot%20Sliders'>Blogspot Sliders</a></li> <li><a href='https://www.exeideas.com/search/label/Blogspot%20Navigation%20Bar'>Blogspot Navigation Bar</a></li> <li><a href='https://www.exeideas.com/search/label/Blogspot%20SEO%20and%20SMO%20Tips%20and%20Tricks'> Blogspot SEO and SMO Tips and Tricks</a></li> </ul> </li> <li><a href='https://www.exeideas.com/search/label/HTML-CSS-PHP-JavaScript'>HTML-CSS-PHP-JavaScript Codes</a> <ul class="sub_ul"> <li><a href='https://www.exeideas.com/search/label/HTML%20Codes'>HTML Codes</a></li> <li><a href='https://www.exeideas.com/search/label/PHP%20Codes'>PHP Codes</a></li> <li><a href='https://www.exeideas.com/search/label/CSS%20Codes'>CSS Codes</a></li> <li><a href='https://www.exeideas.com/search/label/JavaScript%20Codes'>Javascript Codes</a></li> </ul> </li> <li><a href='https://www.exeideas.com/search/label/FaceBook'>Facebook</a> <ul class="sub_ul"> <li><a href='https://www.exeideas.com/search/label/FaceBook%20Tips'>FaceBook Tips</a></li> <li><a href='https://www.exeideas.com/search/label/FaceBook%20Tricks'>FaceBook Tricks</a></li> <li><a href='https://www.exeideas.com/search/label/FaceBook%20Codes'>FaceBook Codes</a></li> <li><a href='https://www.exeideas.com/search/label/FaceBook%20TimeLine%20Covers'>FaceBook TimeLine Covers</a></li> <li><a href='https://www.exeideas.com/search/label/FaceBook%20Text%20Pics'>FaceBook Status Text Pics</a></li> </ul> </li> <li><a href='https://www.exeideas.com/search/label/Google%20Plus'>Google Plus</a> <ul class="sub_ul"> <li><a href='https://www.exeideas.com/search/label/Google%20Plus%20Tips'>Google Plus Tips</a></li> <li><a href='https://www.exeideas.com/search/label/Google%20Plus%20Tricks'>Google Plus Tricks</a></li> <li><a href='https://www.exeideas.com/search/label/Google%20Plus%20TimeLine%20Covers '>Google Plus TimeLine Covers</a></li> </ul> </li> <li><a href='https://www.exeideas.com/search/label/Twitter'>Twitter</a> <ul class="sub_ul"> <li><a href='https://www.exeideas.com/search/label/Twitter%20Tips'>Twitter Tips</a></li> <li><a href='https://www.exeideas.com/search/label/Twitter%20Tricks'>Twitter Tircks</a></li> </ul> </li> <li><a href='https://www.exeideas.com/search/label/Internet'>Internet</a> <ul class="sub_ul"> <li><a href='https://www.exeideas.com/search/label/Internet%20Tips'>Internet Tips</a></li> <li><a href='https://www.exeideas.com/search/label/Internet%20Tricks'>Internet Tricks</a></li> <li><a href='https://www.exeideas.com/search/label/Internet%20Information'>Internet Information</a></li> <li><a href='https://www.exeideas.com/search/label/Internet%20Marketing'>Internet Marketing</a></li> <li><a href='http://www.exeideascom/search/label/Google%20Adsense'>Google Adsense</a></li> <li><a href='http://www.exeideascom/search/label/IT%20Certification'>IT-Certification</a></li> <li><a href='https://www.exeideas.com/search/label/Infographs'>Infographs</a></li> <li><a href='https://www.exeideas.com/search/label/Reviews'>Reviews</a></li> <li><a href='https://www.exeideas.com/search/label/ECommerce'>ECommerce</a></li> </ul> </li> <li><a href='https://www.exeideas.com/search/label/PC'>PC</a> <ul class="sub_ul"> <li><a href='https://www.exeideas.com/search/label/PC%20Tips'>PC Tips</a></li> <li><a href='https://www.exeideas.com/search/label/PC%20Tricks'>PC Tricks</a></li> </ul> </li> <li><a href='https://www.exeideas.com/search/label/Make%20Money%20Online'>Make Money Online</a> <ul class="sub_ul"> <li><a href='https://www.exeideas.com/search/label/Make%20Money%20Through%20Links'>Make Money Through Links</a></li> <li><a href='https://www.exeideas.com/search/label/Make%20Money%20Through%20Site%2FBlog'>Make Money Through Site/Blog</a></li> <li><a href='https://www.exeideas.com/search/label/Make%20Money%20Through%20FaceBook'>Make Money Through FaceBook</a></li> <li><a href='https://www.exeideas.com/search/label/Make%20Money%20Through%20BUX%20Sites'>Make Money Through BUX Sites</a></li> <li><a href='https://www.exeideas.com/search/label/Make%20Money%20Through%20Different%20Ways'>Make Money Through Different Ways</a></li> </ul> </li> <li><a href='https://www.exeideas.com/search/label/Mobile'>Mobile</a> <ul class="sub_ul"> <li><a href='https://www.exeideas.com/search/label/Mobile%20Tips'>Mobile Tips</a></li> <li><a href='https://www.exeideas.com/search/label/Mobile%20News'>Mobile News</a></li> </ul> </li> <li><a href='https://www.exeideas.com/search/label/Free%20Templates'>Web-Templates</a> <ul class="sub_ul"> <li><a href='https://www.exeideas.com/search/label/Blog%20Templates'>Blogspot Templates</a></li> <li><a href='https://www.exeideas.com/search/label/Website%20Templates'>Website Templates</a></li> <li><a href='https://www.exeideas.com/search/label/Author%20Box%20Template'>Author Box Templates</a></li> <li><a href='https://www.exeideas.com/search/label/Contact%20Form%20Template'>Contact Form Templates</a></li> </ul> </li> <li><a href='https://www.exeideas.com/search/label/Games'>Games</a></li> <li><a href='https://www.exeideas.com/search/label/Wallpaper'>Wallpapers</a></li> <li><a href='https://www.exeideas.com/search/label/Graphics%20Elements'>Graphics Elements</a> <ul class="sub_ul"> <li><a href='https://www.exeideas.com/search/label/PSD%20Cuts'>PSD Cuts</a></li> <li><a href='https://www.exeideas.com/search/label/Vector%20Cuts'>Vector Cuts</a></li> <li><a href='https://www.exeideas.com/search/label/Web%20Elements'>Web Element</a></li> <li><a href='https://www.exeideas.com/search/label/Icons'>Icons</a></li> </ul> </li> <li>Web-Designing Tools <ul class="sub_ul"> <li><a href='http://exeideas.t15.org/Web-Designing%20Tools/HTML%20Encoder.html' rel='nofollow'>HTML Encoder</a></li> <li><a href='http://exeideas.t15.org/Web-Designing%20Tools/HTML%20Editor.html' rel='nofollow'>HTML Editor And Previewer</a></li> <li><a href='http://exeideas.t15.org/Web-Designing%20Tools/HEX%20Code%20Shaded%20Color%20Picker.html' rel='nofollow'>HEX Code Shaded Color Picker</a></li> <li><a href='http://www.colorzilla.com/gradient-editor/' rel='nofollow'>Cross Browser CSS Gradient Code Generator</a></li> <li><a href='http://exeideas.t15.org/Web-Designing%20Tools/RGB%20And%20HEX%20Color%20Converter.html' rel='nofollow'>RGB And HEX Color Converter</a></li> <li><a href='http://exeideas.t15.org/Web-Designing%20Tools/HEX,%20RGB,%20Hue,%20Saturation,%20Brightness%20Code%20Color%20Picker.html' rel='nofollow'>HEX, RGB, Hue, Saturation, Brightness Code Color Picker</a></li> <li><a href='http://www.cssdrive.com/index.php/main/csscompressor/' rel='nofollow'>CSS Compresser Online Tool</a></li> <li><a href='http://www.jsmini.com/' rel='nofollow'>Online Javascript And jQuery Minifier Tool</a></li> <li><a href='http://exeideas.t15.org/Web-Designing%20Tools/Word%20Count%20Tool.html' rel='nofollow'>Online Word Count Tool</a></li> <li><a href='http://exeideas.t15.org/Web-Designing%20Tools/Character%20Count%20Tool.html' rel='nofollow'>Online Character Count Tool</a></li> </ul> </li> <li>EXE-Links <ul class="sub_ul"> <li><a href='https://www.exeideas.com/p/about-us.html'>About Us</a></li> <li><a href='https://www.exeideas.com/p/write-for-us.html'>Write For Us</a></li> <li><a href='https://www.exeideas.com/p/list-of-post.html'>List Of Posts</a></li> <li><a href='https://www.exeideas.com/p/advertise-here.html'>Advertise Here</a></li> <li><a href='https://www.exeideas.com/p/disclaimer.html'>Disclaimer</a></li> <li><a href='https://www.exeideas.com/p/privacy-policy.html'>Privacy Policy</a></li> <li><a href='https://www.exeideas.com/p/document.html'>Fourm</a></li> <li><a href='https://www.exeideas.com/p/copyright.html'>Copyright</a></li> <li><a href='https://www.exeideas.com/p/contact-us.html'>Contact Us</a></li> </ul> </li> </ul>
Customization:
1.) HTML-CSS Is Ok For General Us. If You Are Pro, Then You Can Do Any Thing.
Last Words:
That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…
One more amazing article on this blog. Thanks for sharing.
Welcome here and thanks for reading our article and sharing your views.