CODEWITHSUNDEEP
htmlcss
Zhamepace
Zhamepace

Reputation: 3

I don't see the drop down li

I'm new to html and css. I follow a tutorial in youtube. This is all about navigational bar and drop down in html and css.

The name Ria, Kezia, and Gelia should be display when I hover my mouse in Support option. enter image description here 

* {
  margin: 0px;
  padding: 0px;
}

#container ul {
  list-style: none;
  /*This will remove the bullet*/
}

#container ul li {
  background-color: #3C4794;
  /*Adds a back-color.*/
  width: 150px;
  border: 1px solid white;
  height: 50px;
  line-height: 50px;
  text-align: center;
  /*Show the text in the middle*/
  float: left;
  color: white;
  /*Font color*/
  font-size: 18px;
}

#container ul li:hover {
  background-color: #388222;
  /*Change the color when hovering the mouse.*/
}
<div id="container">
  <ul>
    <li>Support</li>
    <ul>
      <li>Ria</li>
      <li>Kezia</li>
      <li>Gelia</li>
    </ul>
    <li>CCD</li>
    <li>Scanning</li>
    <li>Claims</li>
  </ul>

Upvotes: 0

Views: 94

Answers (5)

anishetty
anishetty

Reputation: 31

Add CSS styles to dropdown button and try this code.

<head>
<style>
*{
    margin:0px;
    padding:0px;
}
#container ul{
    list-style:none;    /*This will remove the bullet*/
}

#container ul li{
    background-color:#3C4794;   /*Adds a back-color.*/
    width:150px;
    border:1px solid white;
    height:50px;
    line-height:50px;
    text-align:center;  /*Show the text in the middle*/
    float:left;
    color:white;    /*Font color*/
    font-size:18px;
}

#container ul li:hover {
    background-color:#388222;   /*Change the color when hovering the mouse.*/
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    top:50px;
}

.dropdown:hover .dropdown-content {
    display: block;
}

</style>
</head>
<body>
    <div id="container">
        <ul>

            <li>
                <div class="dropdown">
                    <ul>
                        <li>Support</li>
                    </ul>

                    <div class="dropdown-content">
                            <ul>
                                    <li>Ria</li>
                                    <li>Kezia</li>
                                    <li>Gelia</li>
                                </ul>
                    </div>
                  </div>
            </li>

            <li>CCD</li>
            <li>Scanning</li>
            <li>Claims</li>
        </ul>
</body>

Upvotes: 1

Pasha Abe
Pasha Abe

Reputation: 13

You need to place your submenu in li element and hide it by CSS, then you can write styles for pseudo-class if you want that submenu to appear on hover

So, first that you need, move inner ul element in li, like that:

        <li>Support
            <ul>
                <li>Ria</li>
                <li>Kezia</li>
                <li>Gelia</li>
            </ul>
        </li>

Further you need set right styles.

  1. li need to have position: relative, this is let inner ul element take the right position

  2. Inner ul should be hidden by default state and be appearing on hover on parent element;

This styles should help:

ul > li {
  position: relative;
}

li > ul {
  display: none;
  bottom: 0;
  left: 0;
}

li:hover > ul {
  display: block
}

Upvotes: 0

Manoj A
Manoj A

Reputation: 335

You have to add some css property for dropdown. Here you code has been edited

* {
  margin: 0px;
  padding: 0px;
}

#container ul {
  list-style: none;
  /*This will remove the bullet*/
}

#container ul li {
  background-color: #3C4794;
  /*Adds a back-color.*/
  width: 150px;
  border: 1px solid white;
  height: 50px;
  line-height: 50px;
  text-align: center;
  /*Show the text in the middle*/
  float: left;
  color: white;
  /*Font color*/
  font-size: 18px;
}

#container ul li:hover {
  background-color: #388222;
  /*Change the color when hovering the 
        mouse.*/
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute; 
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<div id="container">
  <ul>
    <li class="dropdown">Support
      <ul class="dropdown-content">
        <li>Ria</li>
        <li>Kezia</li>
        <li>Gelia</li>
      </ul>
    </li>
    <li>CCD</li>
    <li>Scanning</li>
    <li>Claims</li>
  </ul>

here i added some css code in your style and added some clss in your html elements

.dropdown {
     position: relative;
     display: inline-block;
 }

.dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      padding: 12px 16px;
      z-index: 1;
 }

.dropdown:hover .dropdown-content {
      display: block;
}

Upvotes: 0

hd84335
hd84335

Reputation: 9973

You can do it this way:

* {
  margin: 0px;
  padding: 0px;
}

#container ul {
  list-style: none;
  position:absolute;
  /*This will remove the bullet*/
}

#container ul li {
  background-color: #3C4794;
  /*Adds a back-color.*/
  width: 150px;
  border: 1px solid white;
  height: 50px;
  line-height: 50px;
  text-align: center;
  /*Show the text in the middle*/
  float: left;
  color: white;
  /*Font color*/
  font-size: 18px;
}

#container ul li:hover {
  background-color: #388222;
  /*Change the color when hovering the mouse.*/
}
#sub {
  display: none;
}
#container ul li:hover #sub {
    display: block;
}
    <div id="container">
        <ul>
            <li>Support
                <ol id="sub">
                    <li>Ria</li>
                    <li>Kezia</li>
                    <li>Gelia</li>
                </ol>
            </li>
            <li>CCD</li>
            <li>Scanning</li>
            <li>Claims</li>
        </ul>        
     </div>

JSFiddle

Old JSFiddle (with JS)

Upvotes: 0

JoshKisb
JoshKisb

Reputation: 752

* {
  margin: 0px;
  padding: 0px;
}

#container ul {
  list-style: none;
  /*This will remove the bullet*/
}

#container ul li {
  background-color: #3C4794;
  /*Adds a back-color.*/
  width: 150px;
  border: 1px solid white;
  height: 50px;
  line-height: 50px;
  text-align: center;
  /*Show the text in the middle*/
  float: left;
  color: white;
  /*Font color*/
  font-size: 18px;
}

#container ul li:hover {
  background-color: #388222;
  /*Change the color when hovering the mouse.*/
}

#container ul li ul {
  display: none;
  z-index: 100;
  position: relative;
}

#container ul li:hover ul {
  display: block;
}
<div id="container">
  <ul>
    <li>Support
      <ul>
        <li>Ria</li>
        <li>Kezia</li>
        <li>Gelia</li>
      </ul>
    </li>
    <li>CCD</li>
    <li>Scanning</li>
    <li>Claims</li>
  </ul>
</div>

Upvotes: 0

Related Questions