HTML CSS examples for CSS Widget:Menu Dropdown
Change CSS vertical dropdown menu to horizontal
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> @import url(https://www.java2s.com/style/demo/Firefox.png); #cssmenu,<!--from ww w . j ava2 s.com--> #cssmenu ul, #cssmenu ul li, #cssmenu ul ul { list-style:none; margin:0; padding:0; border:0; } #cssmenu ul { z-index:598; float:left; } #cssmenu ul li { float:left; min-height:2px; line-height:2em; vertical-align:middle; display:inline-block; } #cssmenu ul li.hover, #cssmenu ul li:hover { position:relative; z-index:600; cursor:default; } #cssmenu ul ul { margin-top:2px; visibility:hidden; position:absolute; top:38px; left:-21px; z-index:599; width:100%; } #cssmenu ul ul li { float:none; } #cssmenu ul ul ul { top:2px; left:100%; } #cssmenu ul li:hover>ul { visibility:visible; } #cssmenu ul li { float:none; } #cssmenu ul ul li { font-weight:normal; } #cssmenu { font-family:'Lato', sans-serif; font-size:19px; width:1001px; } #cssmenu ul a, #cssmenu ul a:link, #cssmenu ul a:visited { display:block; color:Chartreuse; text-decoration:none; font-weight:301; } #cssmenu>ul { float:none; } #cssmenu ul { background:yellow; } #cssmenu>ul>li { border-left:4px solid blue; } #cssmenu>ul>li>a { padding:11px 21px; } #cssmenu>ul>li:hover { border-left:4px solid pink; } #cssmenu ul li:hover>a { color:OrangeRed; } #cssmenu>ul>li:hover { background:grey; } #cssmenu ul ul a:link, #cssmenu ul ul a:visited { font-weight:401; font-size:15px; } #cssmenu ul ul { width:181px; background:none; border-left:21px solid BlueViolet; } #cssmenu ul ul a { padding:9px 0; border-bottom:2px solid Chartreuse; } #cssmenu ul ul li { padding:0 21px; background:yellow; } #cssmenu ul ul li:last-child { border-bottom:4px solid blue; padding-bottom:11px; } #cssmenu ul ul li:first-child { padding-top:11px; } #cssmenu ul ul li:last-child>a { border-bottom:none; } #cssmenu ul ul li:first-child:after { content:''; display:inline-block; width:0; height:0; position:absolute; left:-21px; top:14px; border-left:11px solid pink; border-right:11px solid OrangeRed; border-bottom:11px solid grey; border-top:11px solid BlueViolet; } </style> </head> <body> <div id="cssmenu"> <ul> <li class="active"> <a href="index.html"> <span>Lore</span> </a> </li> <li class="has-sub"> <a href="#"> <span>Lorem ip</span> </a> <ul> <li> <a href="#"> <span>Lorem ips</span> </a> </li> <li> <a href="#"> <span>Lorem ips</span> </a> </li> </ul> </li> <li> <a href="#"> <span>Lorem</span> </a> </li> <li class="last"> <a href="#"> <span>Lorem i</span> </a> </li> </ul> </div> </body> </html>