CODEWITHSUNDEEP
htmlcssdrop-down-menu
Adam Lansome
Adam Lansome

Reputation: 115

HTML/CSS Trouble displaying items in dropdown menu

I'm new to coding and learning.

Working on the project below. I'm having trouble getting the sub-items ('choice 1' to 'choice 5') to display in the drop down. I have been able to get the headings ('Sub-item') to display, but cannot get the list of contents underneath ('choice' etc) to display.

Can someone help?

HTML

<div class="sidebar_menu">
  <ul>
    <li>
      <a href=""><label class="sidebar_menu_label" for="sidebar_menu">Main</label>
      </a>
      <ul id="lp_test_pop_up">
        <div class="lp_test_popup_box">
          <div class="lp_category_item">
            <h3 id=""><a href="" id="">Sub-Item 1</a></h3>
            <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
          <div class="lp_category_item">
            <h3 id=""><a href="" id="">Sub-Item 2</a></h3>
            <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
          <div class="lp_category_item">
            <h3 id=""><a href="" id="">Sub-Item 3</a></h3>
            <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
          <div class="lp_category_item">
            <h3 id=""><a href="" id="">Sub-Item 4</a></h3>
            <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
          <div class="lp_category_item">
            <h3 id=""><a href="" id="">Sub-Item 5</a></h3>
            <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
          <div class="lp_category_item">
            <h3 id=""><a href="" id="">Sub-Item 6</a></h3>
             <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
        </div>
      </ul>
    </li>
  </ul>
</div>
</div>

CSS

.sidebar_menu ul {
  list-style: none;
  margin: 0;
  padding: 0px 0px 0px 0px;
}

.sidebar_menu ul li {
  padding: 10px;
  position: relative;
  width: 250px;
  background-color: #fcfcfc;
  border-top: 1px solid #e4e8ea;
}

.sidebar_menu ul li:hover {
  box-shadow: 0 0 4px 0 rgb(0 0 0 / 12%);
  position: relative;
}

.sidebar_menu ul ul {
  transform: all 0.3s;
  opacity: 0;
  position: absolute;
  visibility: hidden;
  left: 100%;
  top: -2%;
}

.sidebar_menu ul li:hover > ul {
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  z-index: 9997;
}

.sidebar_menu ul li a {
  font-size: 14px;
  color: black;
  text-decoration: none;
}

.sidebar_menu ul li ul {
  width: 634px;
  padding: 20px;
  padding-bottom: 10px;
  background-color: white;
  box-shadow: 1px 2px 8px grey;
}

.sidebar_menu ul li ul ul {
  width: 134px;
  padding: 0px;
  background-color: white;
}

.sidebar_menu ul li ul li {
  min-width: 250px;
  border: none;
}

label.sidebar_menu_label {
  font-size: 14px;
  margin-left: 10px;
  color: black;
}

.lp_test_popup_box {
  display: flex;
  flex-wrap: wrap;
}

.lp_category_item {
  width: 33%;
  height: 125px;
}

Upvotes: 0

Views: 39

Answers (1)

Vinay Kumar
Vinay Kumar

Reputation: 26

.sidebar_menu ul ul {
  transform: all 0.3s;
  opacity: 0;
  position: absolute;
  visibility: hidden;
  left: 100%;
  top: -2%;
}

Choices are not displayed because of this CSS code. These styles are applied to every "ul" element present in ".sidebar_menu ul".

To know more about Selectors ,check out this site click here

I have added some classes to HTML and updated CSS code

Fix !!

HTML

<div class="sidebar_menu">
  <ul class="sidebar_menu_list">
    <li class="sidebar_menu_item">
      <a href=""><label class="sidebar_menu_label" for="sidebar_menu">Main</label>
      </a>
      <ul id="lp_test_pop_up">
        <div class="lp_test_popup_box">
          <div class="lp_category_item">
            <h3 id="lp_category_subheading"><a href="" id="">Sub-Item 1</a></h3>
            <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
          <div class="lp_category_item">
            <h3 id="lp_category_subheading"><a href="" id="">Sub-Item 2</a></h3>
            <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
          <div class="lp_category_item">
            <h3 id="lp_category_subheading"><a href="" id="">Sub-Item 3</a></h3>
            <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
          <div class="lp_category_item">
            <h3 id="lp_category_subheading"><a href="" id="">Sub-Item 4</a></h3>
            <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
          <div class="lp_category_item">
            <h3 id="lp_category_subheading"><a href="" id="">Sub-Item 5</a></h3>
            <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
          <div class="lp_category_item">
            <h3 id="lp_category_subheading"><a href="" id="">Sub-Item 6</a></h3>
             <ul>
              <li>choice 1</li>
              <li>choice 2</li>
              <li>choice 3</li>
              <li>choice 4</li>
              <li>choice 5</li>
            </ul>
          </div>
        </div>
      </ul>
    </li>
  </ul>
</div>
</div>

CSS

.sidebar_menu_list  {
  list-style: none;
  margin: 0;
  padding: 0px 0px 0px 0px;
}

.sidebar_menu_item {
  padding: 10px;
  position: relative;
  width: 250px;
  background-color: #fcfcfc;
  border-top: 1px solid #e4e8ea;
}

.sidebar_menu_item:hover {
  box-shadow: 0 0 4px 0 rgb(0 0 0 / 12%);
  position: relative;
}

#lp_test_pop_up {
  transform: all 0.3s;
  opacity: 0;
  position: absolute;
  visibility: hidden;
  left: 100%;
  top: -2%; 
}

.sidebar_menu_item:hover #lp_test_pop_up  {
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  z-index: 9997;
}

.sidebar_menu  ul   li  a {
  font-size: 14px;
  color: black;
  text-decoration: none;
}

#lp_test_pop_up {
  width:634px;
  padding: 20px;
  padding-bottom: 10px;
  background-color: white;
  box-shadow: 1px 2px 8px grey;
}

.sidebar_menu ul li ul ul {
  width: 134px;
  margin:15px 0px; 
  list-style-type:none;
  padding:0px;
}

.sidebar_menu ul li ul li {
  min-width: 250px;
  border: none;
}

label.sidebar_menu_label {
  font-size: 14px;
  margin-left: 10px;
  color: black;
}

.lp_test_popup_box {
  display: flex;
  flex-wrap: wrap;
}

.lp_category_item {
  width: 33%;
  height: 125px;
}


#lp_category_subheading{
  margin:0px;
}

.lp_category_item{
  margin-bottom:20px;
}

.lp_category_item ul li{
  margin:2px 0px;
}

Upvotes: 1

Related Questions