Trying to create a drop down menu with only css and html

Question

I am currently learning how to create a drop down menu, but unsure how to use drop down menu. I tried reading the other problems and solutions, but to no avail. Here is my code:

<body>
<div class="nav">
  <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Programmes</a></li>
            <ul>
                <li><a href="#">Item1</a></li>
                <li><a href="#">Item2</a></li>
                <li><a href="#">Item3</a></li>
                <li><a href="#">Item4</a></li>
                <li><a href="#">Item5</a></li>
                <li><a href="#">Item6</a></li>
                <li><a href="#">Item7</a></li>
                <li><a href="#">Item8</a></li>
            </ul>
        <li><a href="#">Staff</a></li>
        <li><a href="#">Students</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>  <!-- end of nav -->

http://jsfiddle.net/LJ3TG/

Tuhin · Accepted Answer · 2014-04-21 11:06:18Z

try this link.... With Full Explanation.. Click Here

Or just copy paste the following CSS

 .nav ul ul {
        display: none;
    }

        .nav ul li:hover > ul {
            display: block;
        }
    .nav ul {
        background: #efefef; 
        background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
        background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
        background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
        box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
        padding: 0 20px;
        border-radius: 10px;  
        list-style: none;
        position: relative;
        display: inline-table;
    }
        .nav ul:after {
            content: ""; clear: both; display: block;
        }
    .nav ul li {
        float: left;
    }
        .nav ul li:hover {
            background: #4b545f;
            background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
            background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
            background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
        }
            .nav ul li:hover a {
                color: #fff;
            }

        .nav ul li a {
            display: block; padding: 25px 40px;
            color: #757575; text-decoration: none;
        }
    .nav ul ul {
        background: #5f6975; border-radius: 0px; padding: 0;
        position: absolute; top: 100%;
    }
        .nav ul ul li {
            float: none; 
            border-top: 1px solid #6b727c;
            border-bottom: 1px solid #575f6a;
            position: relative;
        }
            .nav ul ul li a {
                padding: 15px 40px;
                color: #fff;
            }   
                .nav ul ul li a:hover {
                    background: #4b545f;
                }
    .nav ul ul ul {
        position: absolute; left: 100%; top:0;
    }

I HAVE UPDATED YOUR FIDDLE. DID A SMALL CHANGE. FIDDLE

Janak · Accepted Answer · 2014-04-21 11:09:08Z

<ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Programmes</a></li>
        <ul>
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
            <li><a href="#">Item3</a></li>
            <li><a href="#">Item4</a></li>
            <li><a href="#">Item5</a></li>
            <li><a href="#">Item6</a></li>
            <li><a href="#">Item7</a></li>
            <li><a href="#">Item8</a></li>
        </ul>
    <li><a href="#">Staff</a></li>
    <li><a href="#">Students</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS

ul
{
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul li
{
    display: block;
    position: relative;
    float: left;
}

li ul
{
    display: none;
}

ul li a 
{
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #2C5463;
    margin-left: 1px;
    white-space: nowrap;
}

ul li a:hover 
{
    background: #617F8A;
}
li:hover ul 
{
    display: block;
    position: absolute;
}

li:hover li
{
    float: none;
    font-size: 11px;
}

li:hover a 
{
    background: #617F8A;
}

li:hover li a:hover 
{
    background: #95A9B1;
}

Here's a fiddle

For further reference visit this link

Community · Accepted Answer · 2020-06-20 09:12:55Z

This is done by modifying your code:

StyleSheet

.nav ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;

    li {
        float: left;

        a {
            display: inline-block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            color: #FFF;
            background-color: #999999;
            text-decoration: none;
            padding: 0 15px;

            &:hover {
                background-color: #CCCCCC;
            }

            &:active {
                background-color: #66CCFF;
            }
        }

        ul {
            display: none;
        }

        &:hover {
            ul {
                display: list-item;
                list-style-type: none;

                li {
                    float: none;

                    a {
                        display: block;
                    }
                }
            }
        }
    }
}

HTML

<div class="nav">
        <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="#">About</a></li>
            <li>
                <a href="#">Programmes</a>
                <ul>
                    <li><a href="#">Item1</a></li>
                    <li><a href="#">Item2</a></li>
                    <li><a href="#">Item3</a></li>
                    <li><a href="#">Item4</a></li>
                    <li><a href="#">Item5</a></li>
                    <li><a href="#">Item6</a></li>
                    <li><a href="#">Item7</a></li>
                    <li><a href="#">Item8</a></li>
                </ul>
            </li>

            <li><a href="#">Staff</a></li>
            <li><a href="#">Students</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

Here is the Demo

4dgaurav · Accepted Answer · 2014-04-21 11:14:05Z

Demo

HTML

<div id="cssmenu">
<ul>
   <li class="active"><a href="#"><span>Home</span></a></li>
   <li class="has-sub"><a href="#"><span>Programmes</span></a>
      <ul>
         <li class="has-sub"><a href="#"><span>Item 1</span></a>
            <ul>
               <li><a href="#"><span>Sub Item 1</span></a></li>
               <li class="last"><a href="#"><span>Sub Item 2</span></a></li>
            </ul>
         </li>
         <li class="has-sub"><a href="#"><span>Item 2</span></a>
            <ul>
               <li><a href="#"><span>Sub Item 1</span></a></li>
               <li class="last"><a href="#"><span>Sub Item 2</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href="#"><span>Staff</span></a></li>
   <li><a href="#"><span>Students</span></a></li>
   <li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>

css

#cssmenu{
    width:100%;
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  padding: 0;
  margin: 0;
  line-height: 1;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
  content: '';
  display: table;
}
#cssmenu:after,
#cssmenu > ul:after {
  clear: both;
}
#cssmenu a {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
#cssmenu ul {
  background: #3b5998;
  border-radius: 3px;
  border: 1px solid #2b4479;
  border: 1px solid #2d4373;
  -webkit-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  -o-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  -moz-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  -ms-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);

}
#cssmenu ul > li {
  float: left;
  list-style: none;
}
#cssmenu ul > li > a {
  display: block;
  text-decoration: none;
  padding: 15px 44px;
  position: relative;
}
#cssmenu ul > li > a:hover {
  background: #2d4373;
  -webkit-box-shadow: inset 0 0 1px #1e2e4f;
  -o-box-shadow: inset 0 0 1px #1e2e4f;
  -moz-box-shadow: inset 0 0 1px #1e2e4f;
  -ms-box-shadow: inset 0 0 1px #1e2e4f;
  box-shadow: inset 0 0 1px #1e2e4f;
  -webkit-transition: all ease .3s;
  -o-transition: all ease .3s;
  -moz-transition: all ease .3s;
  -ms-transition: all ease .3s;
  transition: all ease .3s;
}
#cssmenu ul > li > a:hover:before {
  content: '';
  z-index: 2;
  position: absolute;
  border: 1px solid white;
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: -1px;
  opacity: .2;
}
#cssmenu ul > li > a:hover:after {
  content: '';
  z-index: 2;
  position: absolute;
  border: 1px solid white;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  width: 100%;
  height: 100%;
  top: 0;
  right: -1px;
  opacity: .2;
}
#cssmenu > ul > li > ul {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}
#cssmenu > ul > li:hover > ul {
  opacity: 1;
  visibility: visible;
  position: absolute;
  border-radius: 0 0 3px 3px;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
    -webkit-transition: all ease 1s;
  -o-transition: all ease 1s;
  -moz-transition: all ease 1s;
  -ms-transition: all ease 1s;
  transition: all ease 1s;
}
#cssmenu > ul > li > ul {
  width: 200px;
  position: absolute;
}
#cssmenu > ul > li > ul > li {
  float: none;
  position: relative;
}
#cssmenu > ul > li > ul > li > ul {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}
#cssmenu > ul > li > ul > li:hover > ul {
  opacity: 1;
  visibility: visible;
  position: absolute;
    -webkit-transition: all ease 1s;
  -o-transition: all ease 1s;
  -moz-transition: all ease 1s;
  -ms-transition: all ease 1s;
  transition: all ease 1s;
}
#cssmenu > ul > li > ul > li > ul {
  left: 200px;
  top: 1px;
  width: 200px;
}
#cssmenu > ul > li > ul > li > ul > li {
  float: none;
}

Thanks this one works very nicely, and I can modify a few things.

Collectives™ on Stack Overflow

Trying to create a drop down menu with only css and html

4 Answers 4

Comments

Comments

StyleSheet

HTML

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

StyleSheet

HTML

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related