Dropdown Menus in CSS

 

Dropdown Menus in CSS

.HTML file


<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="exs.css">
</head>
<body>
   <div class="navig">
       <ul><!-----first ul ------->
          <li><a href="">HOME</a></li>
           <li><a href="">SEVICES</a><!-----services menu---->
               <ul><!-----second------->
                <li><a href="">Apps Development</a></li>
                   <li><a href="">Cloud Development</a></li>
                    <li><a href=""> Development</a></li>
                     <li><a href="">App Development</a></li>
                        <li><a href="">Webs Development</a><!----webs development------>
                             <ul>
                              <li><a href="">Ecomm website</a></li>
                              <li><a href="">Static website</a></li>
                              <li><a href="">Shophify website</a></li>
                              <li><a href="">Wordpress website</a><!----wordpress website----->
                                 <ul>
                                    <li><a href="">Wordpress 1</a></li>
                                    <li><a href="">Wordpress 2</a></li>
                                    <li><a href="">Wordpress 3</a></li>
                                    <li><a href="">Wordpress 4</a></li>
                                    <li><a href="">Wordpress 5</a></li>

                                 </ul>
                              </li><!----wordpress website close---->
                             </ul>
                        </li><!-----webs development close------>
               </ul><!-----second close----->
           </li><!-----services menu close------>
                   <li><a href="">TECHNOLOGIES</a></li>
             <li><a href="">PRODUCTS</a></li>
              <li><a href="">VISION</a></li>
               <li><a href="">MISSION</a></li>
                <li><a href="">CONTACT</a></li>
       </ul><!-----first Ul close---->
   </div>
</body>
</html>

.CSS file 

/*------Navigation menu css-----*/
*
{
margin:0px; padding: 0px;
}
.navig
{
background: black;
width: auto;
height: 35px;
}
.navig ul
{
background: black;
list-style: none;

}
.navig ul li
{
float: left;
width: 150px;
height: 35px;
line-height: 35px;
text-align: center;
background: black;
position: relative;
border:1px solid white;
}
.navig ul li a
{
text-decoration: none;
color: white;
}
/*--------Navigation menu cloase-----*/
/*------Dropdown Navigation menu--------*/
.navig ul ul
{
display: none;
position: absolute;

}
.navig ul li:hover>ul
{
display:block;
}
.navig ul ul ul
{
margin-left: 150px;
top:0px;
}
/*------Dropdown Navigation menu close--------*/



1 comment:

  1. After getting into your private data, be prepared to share a bit of identification before activating your account. We are dedicated course of|in course of} customer satisfaction, and high quality service. Cale Makar says the 코인카지노 early portion of Avalanche schedule is “ridiculous.” Here’s how it’s displaying. Whatever you determine to do, keep in mind that|do not forget that} playing could be problematic.

    ReplyDelete

Please don't write any spam text or message

Mega Menu in MDB

 Mega Menu in Material Design Bootstraps    Install MDB CLI 1. first intall or  download and install Node.js ...

Powered by Blogger.