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

Client Side Scripting Vs Server Side Scripting

-
Client Side Scripting  Client-side scripting is used when the users’ browser already has all the code and the page is altered on the basis of the user's input. Client-side scripting cannot be used to connect to the databases on the web server. Client-side scripting is possible to be blocked by the user. The Web Server executes the server side scripting that produces the page to be sent to the browser.  The browser receives the page sent by the server and executes the client-side scripts. Client-side scripting can’t access the file system that resides at the web server. The files and settings that are local at the user’s computer can be accessed using Client-side scripting.  Response from a client-side script is faster as compared to a server-side script because the scripts are processed on the local computer. Examples of Client side scripting languages : JavaScript, VB script, etc.
Read more

The 5 Best WYSIWYG HTML Editors

-
Image
A WYSIWYG (pronounced "wiz-ee-wig") editor or program is one that allows a developer to see what the end result will look like while the interface or document is being created. WYSIWYG is an acronym for "what you see is what you get". An  HTML  WYSIWYG editor   conceals the markup and allows the Web page developer to think entirely in terms of how the content should appear. One of the trade-offs, however, is that an HTML WYSIWYG editor sometimes inserts the markup code it thinks is needed all on its own. Then, the developer has to know enough about the markup language to go back into the source code and clean it up. The first true WYSIWYG editor was a word processing program called Bravo. Invented by Charles Simonyi at the Xerox Palo Alto Research Center in the 1970s, it became the basis for Simonyi work at Microsoft and evolved into two other WYSIWYG applications called Word and Excel. Adobe Dreamweaver  (Windows/Mac, Paid) Adobe Dreamweaver is a prop
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 are split into two parts   Property   value and separated by a colon. Thr
Read more