CSS dropdown menu issue

Hello,

I made a dropdown menu with css only. It works on hovering,when i hover over home button dropdown menu appears down,and that part works like a charm. The problem is when i hover below home button dropdown menu is shown on its own! Can someone,anyone help me with this, without changing my own code.
I am really new in this and on any other forums they keep changing my own code,until the moment, when it becomes their and not my code, if you understand what i want to say.I am banging my head on this issue from Friday
I am new in this so please,please keep that in mind when explaining what I screwed up.

Here link to fiddle so you guys can check it.
link

1 Like

Hi there Milos1

this code…

<ul><a href="#">HOME</a>

…is invalid. :mask:

So this…

… means that it is not possible. :ng:

coothead

1 Like

:smiley:
I appreciate your response. of course that is ok to change my code if something is not valid. What i said in my first post is please do not change my code in such manner so that final outcome is is absolutely different from mine

Will “Home” be a link you can follow, or is it just a menu header?
Will “Home” be one of a number of menu headers? The sub menus will need to be nested lists in a list of headers.

This is a super basic example, following your code. Hmm. kinda twitchy.

http://codepen.io/pdxSherpa/pen/BjgXoq

Hey Milos1, we were all new at one time. Just keep plugging and getting solid advice from places like SitePoint. I have found this is the best site by far for quality answers. Now there are several problems with your code. As Sam A74 stated you need to have them in nested lists. Try something like this:

Your code:

<body>
  <div class="container">
    <nav>
      <ul><a href="#">HOME</a>
        <li><a href="#">About Us</a>
        </li>
        <li><a href="#">Why Us</a>
        </li>
        <li><a href="#">Products</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
      </ul>
    </nav>
  </div>

Should maybe be better like this:

<body>
  <div class="container">
    <nav>
      <ul>
            <li> <a href="#">HOME</a>
              <ul>
                  <li><a href="page_1">Sub list</a></li>
                  <li><a href="page_2">Another one</a></li>
                  <li><a href="page_3">Just for good measure</a></li>
               </ul>
          </li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Why Us</a> </li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>

The people on this forum are amazing. I am merely a hack but you can find the answers you need here. Hope this helps.

2 Likes

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