Help please - Div inside a ul?

HTML-CSS
1

Hi there!

I’m trying to create a hoverable dropdown menu inside a side navbar for the Technical Documentation Page challenge.
Can I place a div element inside a ul therefore enclosing one of the li items of that ul?

Thanks so much!

<ul>
    <li><a class="nav-link" href="#Overview">Overview</a></li>
    <div class="dropdown">
     <li><a class="nav-link" href="#Types_of_Disability">Types of Disability</a></li>
      <div class="dropBtn">
        <a class="dropdown-content" href="#visualImp">Visual impairments</a>
        <a class="dropdown-content" href="#hearingImp">Hearing impairments</a>
        <a class="dropdown-content" href="#mobilityImp">Mobility impairments</a>
        <a class="dropdown-content" href="#cognitiveImp">Cognitive impairments</a>
    </div>
    </div>
2

No this is not a good practice. You can enclose divs and anchors or anything within li elements. But not reverse when those are li are supposed to be inside a ul.

The immediate child elements of ul should be li only.

3

Oh I understand, thank you!
So would there be any way of still making a hoverable dropdown while using ul and li?

4

If you are not fixed to HTML you can simply use javascript (easiest: iquery) for this task. Just a view lines of code and you are done. But I am not sure if your challenge is to create it with HTML only?

5

So you should use the select tag to make a drop down. The select tag will have multiple option tags which have their own value attributes and their text. But to add links to a drop down as values is not a good idea. You need to use a navbar with nav tagd for hoverable links. And then use the a:hover{} psedo class to make the each link hoverable.

6

Thank you for your reply :slight_smile: I could use javascript but no jquery. However I haven’t really learned any javascript yet. Would it be at all possible with html and css only? Otherwise I could just simplify the navbar.

7

Thank you for your answer :slight_smile: So in that case I would have to use the select tag instead of the ul and li tags?

8

Yes, also possible with just css:

good luck.

1 Like
9

If you want your links within a drop down(although I have not seen such kinda thing widely used) , you should use select tag. And then try putting the anchors, along with the href, in the text part of the option tags of the select element .

To make the links hoverable, use the a:hover{} in your css and specify the style as to how you want those links to look like when the user hovers over one of it.

10

But the best thing would be just to use a nav tag without the select/dropdown and enclose all the anchors directly within the navbar. And then apply the hovering style on those.

You could push the whole navbar to the left of the page(if that’s the way you want) by using the CSS flexbox or CSS grid or by using float property.

1 Like
11

@potsdam.rene Thank you! :smiling_face:

1 Like
12

@skamat Thank you! Will try that! :grinning:

13

I am unsure of what you aim to achieve as design, but you can put the whole nav dropdown in a list, only showing the list when you hover. You could also render a list inside a list item, or in this case, the whole dropdown inside a list item, if thats your goal and when you hover the list item, the sub-list with nav items to appear. If you give us some design picture of what the expected behavior is, you could get some more accurate suggesitons

14

Hi @Sylvant, thank you for your reply!

So I’ll share my codepen link and then it will be easier to understand I think.
I basically created the side navbar already, I’m just struggling to make the ‘Types of Disability’ and ‘HTML accessibility’ buttons on the sidebar to open a dropdown menu on hover.

15

You can do it without the div, there are several ways to do it with just css.
some options I will consider:

<ul>
    <li class="dropdown" href="#overview">Overview > 
         <ul class="submenu">
             <li><a href="#"> Link 1 </a></li>
             <li><a href="#"> Link 2 </a></li>
             <li><a href="#"> etc </a></li>
         </ul>
    </li>
    <li> More items or dropdowns</li>
</ul>

or if you dont want so many list items, this works too:

<ul>
    <li class="dropdown" href="#overview">Overview > 
         <div class="submenu">
             <a href="#"> Link 1 </a>
             <a href="#"> Link 2 </a>
             <a href="#"> etc </a>
         </div>
    </li>
    <li> More items or dropdowns</li>
</ul>

Then with css just add styles, you can use selector li to add same style to all elements and sub elements, and selector .submenu li to “retouch” only things you want to change on subelements. And use .submenu selector to hide/show the submenu.

You don’t need any javascript to this approach (if you want to show the submenu in hover state), For click event only minimun js is required, add an eventlistener to toggle classes between “active” and no class at all, for giving you an example.

3 Likes
16

Hi @raven666!

Yes! It worked! Thanks so much! :grinning: I was really cracking my head over this as everything I tried didn’t work the moment I added the display:none . It’s fixed now, thanks again!

1 Like
17

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.