The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Two Column Dropdown List
Adopotato
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st October 2019 - 08:33 PM