HTML CSS add dropdown menu

Question

I have a menu and submenu from one of the elements. The code is here: http://jsfiddle.net/mq5g6upe/ . I would like you to tell me how to implement vertical dropdown menu from element My project because now it not seem ok.

header.html

    <header>
  <div class="main">
    <ul>
      <li><a href="/home">Home</a></li>
      <li><a href="/projects">My projects</a>
        <ul class="my-projects-dropdown">
          <li><a href="/projects/endlessblow">Endless Blow</a>
          <li><a href="#">Sub-2</a></li>
          <li><a href="#">Sub-3</a></li>
        </ul>
      </li>
      <li><a href="https://play.google.com/store/apps/dev?id=6173561253714763017">My Google Play link</a></li>
      <li><a href="/about">About</a></li>
      <li><input type="submit" class="a-login" value="Login" (click)="navigateToLogin()"></li>
    </ul>
  </div>
</header>

header.css

    #container {
    margin: 0 auto;
}
 
ul {
  float: right;
  list-style-type: none;
  margin-top: 25px;
  margin-right: 115px;
}

ul li {
  display: inline-block;
  vertical-align: middle;
}

ul li a {
  text-decoration: none !important;
  padding: 5px 20px;
  border: 1px solid #000;
  color: #000;
  transition: 0.4s ease;
  font-size: 20px !important;
}

ul li a:hover {
  background-color: cyan;
}

ul li a.li-login {
  text-decoration: none !important;
  position: relative;
  margin-left: 10px;
  padding: 5px 10px;
  color: #000;
  transition: 0.4s ease;
  font-size: 16px !important;
  border: none;
  vertical-align: middle;
  line-height: normal;
}

ul li:hover > ul {
  visibility: visible;
  opacity: 1;
  display: block;
 
}

ul li:nth-child(5){
  margin-left: 20px;
  vertical-align: middle;
  line-height: normal;
}






ul ul {
    display: none;
    position: absolute; 
}

ul ul li {
    float:none;
    display:list-item;
    position: relative;
}

Now there are three problems. First the submenu of items seems to overlap on another elements. Second there is a distance between the menu element My projects and first element of submen. Third outside jsfiddle in production (https://jakuwegiel.web.app/home) also submenu is moved a bit to right.

stackoverflow.com/questions/8141513/…

Darwin
– Darwin

2020-12-26 18:12:50 +00:00
Commented Dec 26, 2020 at 18:12 — Darwin
– Darwin, Commented Dec 26, 2020 at 18:12
but my example is different.

user12410010
– user12410010

2020-12-26 18:13:49 +00:00
Commented Dec 26, 2020 at 18:13 — user12410010
– user12410010, Commented Dec 26, 2020 at 18:13

fullstack dev · Accepted Answer · 2020-12-26 18:28:20Z

2

I forked your fiddle. check this https://jsfiddle.net/wrtxkz0d . Made these changes in your css. Dropdown is working.

ul li:hover > ul {
 visibility: visible;
 opacity: 1;
 display: block;
 margin:0;
 padding: 0;
}

ul ul li {
 float:none;
 display:list-item;
 position: relative;
 margin: 13px 0;
}

edited Dec 26, 2020 at 18:28

answered Dec 26, 2020 at 18:17

fullstack dev

541 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user12410010 Over a year ago

Almost done. But just take a look at jakuwegiel.web.app/home. This submenu is moved to right. How to solve that?

fullstack dev Over a year ago

@mnietuniema, the inner ul has padding on right side. So remove the padding by applying padding: 0 ; Check the answer above, I have edited.

Collectives™ on Stack Overflow

HTML CSS add dropdown menu

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related