---
title: "Create a website which include drop-down and other  basic HTML code."  
description: "Create a website which include drop-down and other  basic HTML code."  
author: "Abhishek Srivasatava"  
published: 2016-10-14  
updated: 2016-10-14  
canonical: https://www.mindstick.com/forum/34196/create-a-website-which-include-drop-down-and-other-basic-html-code  
category: "css-css3"  
tags: ["html", "css"]  
reading_time: 2 minutes  

---

# Create a website which include drop-down and other  basic HTML code.

Make the [website](https://www.mindstick.com/articles/13110/why-copywriting-is-crucial-for-new-website-build) containing 4 [link](https://www.mindstick.com/articles/23633/link-builder) on the top ([Home](https://www.mindstick.com/articles/126322/how-to-keep-your-home-safe-while-traveling)) (About us) ([carrier](https://answers.mindstick.com/qa/62201/which-country-has-recently-launched-soyuz-carrier-rocket-with-33-satellites)) ([Interview](https://www.mindstick.com/articles/329061/video-interviews-a-viable-tool-to-take-on-large-recruitments) [question](https://www.mindstick.com/blog/23175/how-to-solve-neet-question-paper-in-less-time)) (vertically).

All four link have [drop down](https://www.mindstick.com/forum/263/drop-down-list-problem) option.\
\
Including log-in [form](https://www.mindstick.com/forum/6/multi-form-mfc-application) & [Image](https://www.mindstick.com/articles/23551/an-investigate-distinctive-seafood-restaurant-for-your-image-stamp-character)

\

## Replies

### Reply by Abhishek Srivasatava

**Here is the complete code for this question:**

```
<!doctype html><html><head><style> .NewLine {    position:
relative;    left: 200px;    color:red } input[type=button], input[type=submit] {    width: 50%;    padding: 12px
20px;    margin: 4px
0;    box-sizing:
border-box;    border: none;   
background-color: Orange;    color: white;} input[type=text] {    width: 50%;    padding: 12px
20px;    margin: 4px
0;    box-sizing:
border-box;    border: none;   
background-color: Red;    color: white;} .bottomleft {    position:
absolute;    bottom: 8px;    left: 16px;}  .bottomright {    position:
absolute;    bottom: 1px;    right: 1px;} ul {   
list-style-type: none;    margin: 0;    padding: 0;    overflow:
hidden;   
background-color: #333;} li {    float: left;} li a, .dropbtn {    display:
inline-block;    color: white;    text-align:
center;    padding: 14px
16px;   
text-decoration: none;} li a:hover, .dropdown:hover .dropbtn {   
background-color: red;} li.dropdown {    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);} .dropdown-content a {    color: black;    padding: 12px
16px;   
text-decoration: none;    display:
block;    text-align:
left;} .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content {    display:
block;}</style></head><body><abbr title="MindStick"><ul >           <li class="dropdown">    <a
href="https://www.mindstick.com"
class="dropbtn">Home</a>    <div
class="dropdown-content">      <a
href="https://www.mindstick.com">Main Page</a>      <a
href="https://www.mindstick.com/Services">Software page</a>      <a
href="https://www.mindstick.com/Products">Product Page</a>    </div> <li class="dropdown">    <a
href="https://www.mindstick.com/Home/AboutUs"
class="dropbtn">About us</a>    <div class="dropdown-content">      <a
href="https://www.mindstick.com/ContactUs">USA</a>      <a
href="https://www.mindstick.com/ContactUs">India</a>      <a
href="https://www.mindstick.com/ContactUs">Autralia</a>    </div> <li class="dropdown">    <a
href="https://www.mindstick.com/DeveloperSection/Interview"
class="dropbtn">Interview Question</a>    <div
class="dropdown-content">      <a
href="https://www.mindstick.com/DeveloperSection/interview?authorId=51998">Abhishek's  Interview Question</a>      <a
href="https://www.mindstick.com/DeveloperSection/interview?authorId=186">Monoj's
Interview Question</a>      <a
href="https://www.mindstick.com/DeveloperSection/interview?authorId=1245  ">Barbara's Interview
Question</a>    </div> <li class="dropdown">    <a
href="https://www.mindstick.com/Career"
class="dropbtn">Carrier</a>    <div
class="dropdown-content">      <a
href="https://www.mindstick.com/Career#careerform">Software
Engineer</a>      <a
href="https://www.mindstick.com/Career#careerform"> Senior
Business Analyst</a>      <a
href="https://www.mindstick.com/Career#careerform">PHP
Developer</a>    </div></li></ul>  <img src=
"C:\Users\Uttam\Desktop\Photoshop\Newslatter\1_01.jpg" alt =
"Loading" style="width:1500px;height:500px;"> <div class= "NewLine"><a class="NewLine" href=
"https://www.mindstick.com/"> <h1> Welcome to the MindStick
gift Website!!!</h1></a><h1><marquee behavior="scroll"
direction="left" > Please Login !!! Don't be shy...
</marquee></h1></div>  <div class=bottomright><img  src=
"C:\Users\Uttam\Desktop\Photoshop\Newslatter\1_02.jpg" alt =
"Loading" style="width:500px;height:160px;"></div> <div class=bottomleft><h3>Please Login for the Christmas
Gift</h3><form
action="https://www.mindstick.com">  <label for="fname"><b>UserName</b></label><br>  <input
type="text" id="fname" name="fname" value="
"><br>  <label
for="lname"><b>Password</b></label><br>  <input
type="text" id="lname" name="lname" value="
"> <br><b><input type="Submit"
value="Log-in"></b></form></div></abbr></body> </html>
```

![Create a website which include drop-down and other  basic HTML code.](https://www.mindstick.com/mindstickforums/cc39196e-055a-4ad5-b17b-16683e78b68e/images/21b62989-dbb9-4499-b755-93ff6a59cc07.png)\


---

Original Source: https://www.mindstick.com/forum/34196/create-a-website-which-include-drop-down-and-other-basic-html-code

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
