Create Transparent Drop Down Navigation Menu with CSS and HTML

-


                                               

                                                        HTML AND CSS CODE:-

 <html>
 <head>
  <style>
  BODY{
 background-image: url(../image/background-blur-clean-531880.jpg);
 padding: 0px;
 margin: 0px;
}
#menu{
 background-color: black;
 opacity: 0.5;
 height: 80px;
 width: 100%;
}
#menu ul{
 text-align: center;
 font-size: 19px;
}
#menu ul li{
 list-style-type: none;
 float: left;
 display: block;
}
#menu ul li a{
 color: white;
 text-decoration: none;
 padding: 30px;
 display: block;
}
#menu ul li a:hover{
 color: red;
 text-decoration: underline;
 background-color: aquamarine;
 border-radius: 10px;
}
#menu ul li ul li{
 display: none;
 width: 100%;
 height: 70px;

}
#menu ul li:hover ul li{
 display: block;
}
  </style>
 </head>
 <body>
  <div id="menu">
   <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT-US</a>
    <UL>
    
      <li><a href="#">TEAM INFO</a></li>
      <li><a href="#">OUR MISSION</a></li>
    
     </UL></li>
    <li><a href="#">THINGS TO DO</a></li>
    <li><a href="#">CONTACT-US</a></li>
   </ul>
  </div>
 </body>
</html>

Comments

  1. Alex17 July 2019 at 16:40

    Hi, thank you for sharing this great info. Was just browsing through the net in my office and happened upon your blog. It is really very well written and quit comprehensive in explaining with a very simple language.
    Best Distinctive Sport Logo, $5 Logo Design Service

    ReplyDelete

Post a Comment

Popular posts from this blog

About Web-design

-
Image
Web design   Web design means planning, creation, and updating of websites. Website design also involves information architecture, website structure, user interface, navigation ergonomics, website layout, colors, contrasts, fonts and imagery(photography) as well as icons design. Elements of Web Design Web design uses many of the same key visual elements as all types of design such as: Layout :   This is the way the graphics, ads, and text are arranged. In the web world, a key goal is to help the view find the information they seek at a glance. This includes maintaining the balance, consistency, and integrity of the design. Colour :  The choice of colors depends on the purpose and clientele; it could be simple black-and-white to multi-colored design, conveying the personality of a person or the brand of an organization, using web-safe colors. Graphics :  Graphics can include logos, photos, clip-art or icons, all of which enhance the web design. For ...
Read more

Form html

-
Image
HTML Forms are required when you want to collect some data from the site visitor. For example, during user registration, you would like to collect information such as name, email address, credit card, etc. Adding a simple search box to your website or you need to create a more complicated application. Html gives you the platform to collect the data from your users. The HTML <form> tag is used to create an HTML form and it has following syntax − <form action = "Script URL" method = "GET|POST"> form elements like input, textarea etc. </form>      Form Controls There are different types of form controls that you can use to collect data using HTML form − Text Input Controls Checkboxes Controls Radio Box Controls Select Box Controls File Select boxes Clickable Buttons Submit and Reset Button For example:- <head>     <title>table form</title></head>     <body>  ...
Read more

About CSS

-
Image
 What is CSS? CSS  stands for  C ascading  S tyle  S heets CSS describes  how HTML elements are to be displayed on screen, paper, or in other media CSS  saves a lot of work . It can control the layout of multiple web pages all at once External stylesheets are stored in  CSS files "Css allows you to create rules that specify how the content of an element should appear. For example, you can specify that the background of the page is mint-cream,all the paragraph appear in Gray using the Arial typeface and headings should be in a blue and  italic."      Css file:- where  p = Selector (which indicate the rule to applies.the same rule apply more than one element if you separate the element name with commas.) { color:gray;      font-family:arial;   } Declartions (Indicate how the element referred to in the selector should be styled. Declaration a...
Read more