Two Column Dropdown List |
Two Column Dropdown List |
Adopotato |
Mar 25 2019, 04:11 PM
Post
#1
|
Group: Members Posts: 1 Joined: 25-March 19 Member No.: 26,859 |
I'm new to html and css and need assistance. I have a small project where I'm trying to create a menu that displays the dropdown menus in a two column format. I would like to keep using the html and css that I currently have and just modify it, but I've struggled to find which part of the html or css to modify. Any help or instruction is appreciated. If it matters, I was given permission to use and modify the code below as it is not mine.
Thanks! HTML: CODE <html><head> <link href="ParticipantMenu.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head><body><div id="navmenu"> <p><span></span></p> <ul> <li><a><span><em class="fa fa-fw fa-group"></em>Menu 1</span></a></li> <li class="has-sub"><a href="#"><span><em class="fa fa-fw fa-user-plus"></em>Menu 2</span></a> <ul> <li><a><span style="font-weight: bold; text-decoration: underline;">Column 1</span></a></li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span style="font-weight: bold; text-decoration: underline;">Column 2</span></a></li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> </ul> </li> <li class="has-sub"><a href="#"><span><em class="fa fa-fw fa-user-plus"></em>Menu 3</span></a> <ul> <li><a><span style="font-weight: bold; text-decoration: underline;">Column 1</span></a></li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span style="font-weight: bold; text-decoration: underline;">Column 2</span></a></li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> </ul> </li> <li class="has-sub"><a href="#"><span><em class="fa fa-fw fa-user-plus"></em>Menu 4</span></a> <ul> <li><a><span style="font-weight: bold; text-decoration: underline;">Column 1</span></a></li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span style="font-weight: bold; text-decoration: underline;">Column 2</span></a></li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> </ul> </li> <li class="has-sub"><a href="#"><span><em class="fa fa-fw fa-user-plus"></em>Menu 5</span></a> <ul> <li><a><span style="font-weight: bold; text-decoration: underline;">Column 1</span></a></li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span style="font-weight: bold; text-decoration: underline;">Column 2</span></a></li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> <li><a><span>Test 1</span></a> </li> </ul> </li> <li class="has-sub"><a><span><em class="fa fa-fw fa-envelope-o"></em>Contact Administrator</span></a> <ul> <li><a href="mailto:fake@fake.org"><span>Email Administrator</span></a> </li> <li><a href="https://calendly.com" target="_blank"><span>Set up Consultation Time</span></a> </li> </ul> </li> <li><a href="#" target="_blank"><span><em class="fa fa-fw fa-info-circle"></em>Help Manual</span></a></li> </ul> </div></body></html> CSS: CODE #navmenu ul, #navmenu li, #navmenu span, #navmenu a { margin: 0; padding: 0; position: relative; } #navmenu { line-height: 1; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; background: #FA5312; background: #FA5312 url(fake)*/ no-repeat right center; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; border-bottom: 5px solid #b83906; border-top: 5px solid #FA5312; border-right: 10px solid #FA5312; width: auto; } #navmenu:after, #navmenu ul:after { content: ""; display: table; clear: both; } #navmenu a{ background: #FA5312; color: #ffffff; display: block; font-family: Helvetica, Arial, Verdana, sans-serif; padding: 19px 20px; text-decoration: none; } #navmenu ul { list-style: none; } #navmenu > ul { font-size: 0; } #navmenu > ul > li { display: inline-block; float: left; margin: 0; } #navmenu.align-center { text-align: center; } #navmenu.align-center > ul > li { float: none; } #navmenu.align-center ul ul { text-align: left; } #navmenu.align-right > ul { float: right; } #navmenu.align-right ul ul { text-align: right; } #navmenu > ul > li > a { color: #ffffff; font-size: 12px; } #navmenu > ul > li:hover:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 50%; bottom: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #ed6935; margin-left: -10px; } #navmenu > ul > li:first-child > a { border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; } #navmenu.align-right > ul > li:first-child > a, #navmenu.align-center > ul > li:first-child > a { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; } #navmenu.align-right > ul > li:last-child > a { border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; } #navmenu > ul > li.active > a, #navmenu > ul > li:hover > a { color: #ffffff; box-shadow: inset 0 0 3px #9c2e02; -moz-box-shadow: inset 0 0 3px #9c2e02; -webkit-box-shadow: inset 0 0 3px #9c2e02; background: #b83906; } #navmenu .has-sub { z-index: 1000; } #navmenu .has-sub:hover > ul { display: block; } #navmenu .has-sub ul { display: none; position: absolute; width: 200px; top: 100%; left: 0; } #navmenu.align-right .has-sub ul { left: auto; right: 0; } #navmenu .has-sub ul li { *margin-bottom: -1px; } #navmenu .has-sub ul li a { background: #ed6935; border-bottom: 1px dotted #d48b6f; font-size: 12px; filter: none; display: block; line-height: 120%; padding: 10px; color: #ffffff; } #navmenu .has-sub ul li:hover a { background: #e07b53; } #navmenu ul ul li:hover > a { color: #ffffff; } #navmenu .has-sub .has-sub:hover > ul { display: block; } #navmenu .has-sub .has-sub ul { display: none; position: absolute; left: 100%; top: 0; } #navmenu.align-right .has-sub .has-sub ul, #navmenu.align-right ul ul ul { left: auto; right: 100%; } #navmenu .has-sub .has-sub ul li a { background: #e07b53; border-bottom: 1px dotted #d48b6f; } #navmenu .has-sub .has-sub ul li a:hover { background: #ed6935; } #navmenu ul ul li.last > a, #navmenu ul ul li:last-child > a, #navmenu ul ul ul li.last > a, #navmenu ul ul ul li:last-child > a, #navmenu .has-sub ul li:last-child > a, #navmenu .has-sub ul li.last > a { border-bottom: 0; } #navmenu { z-index: 1000; } #navmenu p { color: #ffffff; font-size: 14px; text-align: left; margin: 0px 0px 5px 0px; background: #FA5312; display: block; font-family: Helvetica, Arial, Verdana, sans-serif; padding: 10px 10px 0px; text-decoration: none; width: 25%; } This post has been edited by Adopotato: Mar 25 2019, 04:12 PM |
Lo-Fi Version | Time is now: 13th May 2024 - 04:27 AM |