i am setting a Menu Bar with drop-down but the Problem is you can see In below code

I have tried By Changing Margin and Padding But None of the thing worked

  



  .topnav {

        overflow: hidden;

        background-color: white;

        position: relative;

        margin: -10px -126px;

    }



    .topnav #myLinks {

        display: visible;

        background-color: white;

        margin: 10px 20px;

    }



    .topnav a {

        color: white;

        padding: 14px 16px;

        text-decoration: none;

        font-size: 17px;

        display: block;

    }



    .topnav a.icon {

        background: black;

        display: block;

        position: absolute;

        top: 0;

        margin: 5px 166px;

    }



    .topnav a:hover {

        background-color: #ddd;

    }



    .active {

        background-color: #4CAF50;

        color: white;

        float: right;

        margin: 0px 81px;

    }



    }



    div#myLinks {

        margin: 0px 20px 0px 107px;

    }

    <div class="topnav">

          <a href="#home" class="active">

         <img src="Images/logo-black.png" alt="AudiLogo" />

          

          </a>

          <div id="myLinks">

            <a href="#news">News</a>

            <a href="#contact">Contact</a>

            <a href="#about">About</a>

          </div>

          <a href="javascript:void(0);" class="icon" onclick="myFunction()">

            <i class="fa fa-bars">Menu</i>

          </a>

     </div>

</div>

    function myFunction() {

      var x = document.getElementById("myLinks");

      if (x.style.display === "block") {

        x.style.display = "none";

      } else {

        x.style.display = "block";

      }

    }

I expect a dropdown but it is taking within the same Menu Line
but the actual output i want is a drop down below the Menu when I click on it.

enter code here

edited Jan 3 at 9:55

asked Jan 3 at 9:34

Raghu

add a comment |

i am setting a Menu Bar with drop-down but the Problem is you can see In below code

I have tried By Changing Margin and Padding But None of the thing worked

  



  .topnav {

        overflow: hidden;

        background-color: white;

        position: relative;

        margin: -10px -126px;

    }



    .topnav #myLinks {

        display: visible;

        background-color: white;

        margin: 10px 20px;

    }



    .topnav a {

        color: white;

        padding: 14px 16px;

        text-decoration: none;

        font-size: 17px;

        display: block;

    }



    .topnav a.icon {

        background: black;

        display: block;

        position: absolute;

        top: 0;

        margin: 5px 166px;

    }



    .topnav a:hover {

        background-color: #ddd;

    }



    .active {

        background-color: #4CAF50;

        color: white;

        float: right;

        margin: 0px 81px;

    }



    }



    div#myLinks {

        margin: 0px 20px 0px 107px;

    }

    <div class="topnav">

          <a href="#home" class="active">

         <img src="Images/logo-black.png" alt="AudiLogo" />

          

          </a>

          <div id="myLinks">

            <a href="#news">News</a>

            <a href="#contact">Contact</a>

            <a href="#about">About</a>

          </div>

          <a href="javascript:void(0);" class="icon" onclick="myFunction()">

            <i class="fa fa-bars">Menu</i>

          </a>

     </div>

</div>

    function myFunction() {

      var x = document.getElementById("myLinks");

      if (x.style.display === "block") {

        x.style.display = "none";

      } else {

        x.style.display = "block";

      }

    }

I expect a dropdown but it is taking within the same Menu Line
but the actual output i want is a drop down below the Menu when I click on it.

enter code here

edited Jan 3 at 9:55

asked Jan 3 at 9:34

Raghu

add a comment |

i am setting a Menu Bar with drop-down but the Problem is you can see In below code

I have tried By Changing Margin and Padding But None of the thing worked

  



  .topnav {

        overflow: hidden;

        background-color: white;

        position: relative;

        margin: -10px -126px;

    }



    .topnav #myLinks {

        display: visible;

        background-color: white;

        margin: 10px 20px;

    }



    .topnav a {

        color: white;

        padding: 14px 16px;

        text-decoration: none;

        font-size: 17px;

        display: block;

    }



    .topnav a.icon {

        background: black;

        display: block;

        position: absolute;

        top: 0;

        margin: 5px 166px;

    }



    .topnav a:hover {

        background-color: #ddd;

    }



    .active {

        background-color: #4CAF50;

        color: white;

        float: right;

        margin: 0px 81px;

    }



    }



    div#myLinks {

        margin: 0px 20px 0px 107px;

    }

    <div class="topnav">

          <a href="#home" class="active">

         <img src="Images/logo-black.png" alt="AudiLogo" />

          

          </a>

          <div id="myLinks">

            <a href="#news">News</a>

            <a href="#contact">Contact</a>

            <a href="#about">About</a>

          </div>

          <a href="javascript:void(0);" class="icon" onclick="myFunction()">

            <i class="fa fa-bars">Menu</i>

          </a>

     </div>

</div>

    function myFunction() {

      var x = document.getElementById("myLinks");

      if (x.style.display === "block") {

        x.style.display = "none";

      } else {

        x.style.display = "block";

      }

    }

I expect a dropdown but it is taking within the same Menu Line
but the actual output i want is a drop down below the Menu when I click on it.

enter code here

edited Jan 3 at 9:55

asked Jan 3 at 9:34

Raghu

i am setting a Menu Bar with drop-down but the Problem is you can see In below code

I have tried By Changing Margin and Padding But None of the thing worked

  



  .topnav {

        overflow: hidden;

        background-color: white;

        position: relative;

        margin: -10px -126px;

    }



    .topnav #myLinks {

        display: visible;

        background-color: white;

        margin: 10px 20px;

    }



    .topnav a {

        color: white;

        padding: 14px 16px;

        text-decoration: none;

        font-size: 17px;

        display: block;

    }



    .topnav a.icon {

        background: black;

        display: block;

        position: absolute;

        top: 0;

        margin: 5px 166px;

    }



    .topnav a:hover {

        background-color: #ddd;

    }



    .active {

        background-color: #4CAF50;

        color: white;

        float: right;

        margin: 0px 81px;

    }



    }



    div#myLinks {

        margin: 0px 20px 0px 107px;

    }

    <div class="topnav">

          <a href="#home" class="active">

         <img src="Images/logo-black.png" alt="AudiLogo" />

          

          </a>

          <div id="myLinks">

            <a href="#news">News</a>

            <a href="#contact">Contact</a>

            <a href="#about">About</a>

          </div>

          <a href="javascript:void(0);" class="icon" onclick="myFunction()">

            <i class="fa fa-bars">Menu</i>

          </a>

     </div>

</div>

    function myFunction() {

      var x = document.getElementById("myLinks");

      if (x.style.display === "block") {

        x.style.display = "none";

      } else {

        x.style.display = "block";

      }

    }

I expect a dropdown but it is taking within the same Menu Line
but the actual output i want is a drop down below the Menu when I click on it.

enter code here

  



  .topnav {

        overflow: hidden;

        background-color: white;

        position: relative;

        margin: -10px -126px;

    }



    .topnav #myLinks {

        display: visible;

        background-color: white;

        margin: 10px 20px;

    }



    .topnav a {

        color: white;

        padding: 14px 16px;

        text-decoration: none;

        font-size: 17px;

        display: block;

    }



    .topnav a.icon {

        background: black;

        display: block;

        position: absolute;

        top: 0;

        margin: 5px 166px;

    }



    .topnav a:hover {

        background-color: #ddd;

    }



    .active {

        background-color: #4CAF50;

        color: white;

        float: right;

        margin: 0px 81px;

    }



    }



    div#myLinks {

        margin: 0px 20px 0px 107px;

    }

    <div class="topnav">

          <a href="#home" class="active">

         <img src="Images/logo-black.png" alt="AudiLogo" />

          

          </a>

          <div id="myLinks">

            <a href="#news">News</a>

            <a href="#contact">Contact</a>

            <a href="#about">About</a>

          </div>

          <a href="javascript:void(0);" class="icon" onclick="myFunction()">

            <i class="fa fa-bars">Menu</i>

          </a>

     </div>

</div>

    function myFunction() {

      var x = document.getElementById("myLinks");

      if (x.style.display === "block") {

        x.style.display = "none";

      } else {

        x.style.display = "block";

      }

    }

  



  .topnav {

        overflow: hidden;

        background-color: white;

        position: relative;

        margin: -10px -126px;

    }



    .topnav #myLinks {

        display: visible;

        background-color: white;

        margin: 10px 20px;

    }



    .topnav a {

        color: white;

        padding: 14px 16px;

        text-decoration: none;

        font-size: 17px;

        display: block;

    }



    .topnav a.icon {

        background: black;

        display: block;

        position: absolute;

        top: 0;

        margin: 5px 166px;

    }



    .topnav a:hover {

        background-color: #ddd;

    }



    .active {

        background-color: #4CAF50;

        color: white;

        float: right;

        margin: 0px 81px;

    }



    }



    div#myLinks {

        margin: 0px 20px 0px 107px;

    }

    <div class="topnav">

          <a href="#home" class="active">

         <img src="Images/logo-black.png" alt="AudiLogo" />

          

          </a>

          <div id="myLinks">

            <a href="#news">News</a>

            <a href="#contact">Contact</a>

            <a href="#about">About</a>

          </div>

          <a href="javascript:void(0);" class="icon" onclick="myFunction()">

            <i class="fa fa-bars">Menu</i>

          </a>

     </div>

</div>

    function myFunction() {

      var x = document.getElementById("myLinks");

      if (x.style.display === "block") {

        x.style.display = "none";

      } else {

        x.style.display = "block";

      }

    }

html css

edited Jan 3 at 9:55

asked Jan 3 at 9:34

Raghu

edited Jan 3 at 9:55

asked Jan 3 at 9:34

Raghu

edited Jan 3 at 9:55

asked Jan 3 at 9:34

Raghu

asked Jan 3 at 9:34

Raghu

asked Jan 3 at 9:34

Raghu

add a comment |

3 Answers
3

active

oldest

votes

Try this code

.navbar {

  overflow: hidden;

  background-color: #333;

  font-family: Arial, Helvetica, sans-serif;

}



.navbar a {

  float: left;

  font-size: 16px;

  color: white;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

}



.dropdown {

  float: left;

  overflow: hidden;

}



.dropdown .dropbtn {

  font-size: 16px;  

  border: none;

  outline: none;

  color: white;

  padding: 14px 16px;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

}



.navbar a:hover, .dropdown:hover .dropbtn {

  background-color: red;

}



.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

}



.dropdown-content a {

  float: none;

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

  text-align: left;

}



.dropdown-content a:hover {

  background-color: #ddd;

}



.dropdown:hover .dropdown-content {

  display: block;

}

  <!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>



<div class="navbar">

  <a href="#home">Home</a>

  <a href="#news">News</a>

  <div class="dropdown">

    <button class="dropbtn">Dropdown 

      <i class="fa fa-caret-down"></i>

    </button>

    <div class="dropdown-content">

      <a href="#">Link 1</a>

      <a href="#">Link 2</a>

      <a href="#">Link 3</a>

    </div>

  </div> 

</div>



<h3>Dropdown Menu inside a Navigation Bar</h3>

<p>Hover over the "Dropdown" link to see the dropdown menu.</p>



</body>

</html>

answered Jan 3 at 9:53

Nooruddin Saheb

2719

I have Used same Code but its not working

– Raghu
Jan 3 at 9:57

Why are u using JavaScript? Its just HTML and CSS.

– Nooruddin Saheb
Jan 3 at 10:00

@Raghu The code I've given is working fine as u can check by using the run Snippets above...

– Nooruddin Saheb
Jan 3 at 10:01

add a comment |

I edited your code to show the sub navigation as you wanted to show. It still needs some styling and I assumed you wanted to use javascript as you did in your original code.

    function myFunction() {

      var x = document.getElementById("myLinks");

      if (x.style.display === "block") {

        x.style.display = "none";

      } else {

        x.style.display = "block";

      }

    }

.topnav {

	overflow: hidden;

	background-color: white;

	position: relative;

	margin: -10px -126px;

}



.topnav #myLinks {

	display: visible;

	background-color: white;

	margin: 10px 20px;

}



.topnav a {

	color: white;

	padding: 14px 16px;

	text-decoration: none;

	font-size: 17px;

	display: block;

}



.topnav a.icon {

	background: black;

	display: block;

	position: absolute;

	top: 0;

	margin: 5px 166px;

}



.topnav a:hover {

	background-color: #ddd;

}



.active {

	background-color: #4caf50;

	color: white;

	float: right;

	margin: 0px 81px;

}



div#myLinks {

	margin: 0px 20px 0px 107px;

}

div#myLinks > a:first-child {

	margin-top: 52px;

}

div#myLinks > a {

  color: black;

  margin-left: 100px;

  padding-left: 60px;

}

<div class="topnav">

          <a href="#home" class="active">

         <img src="Images/logo-black.png" alt="AudiLogo" />

          

          </a>

          <div id="myLinks">

            <a href="#news">News</a>

            <a href="#contact">Contact</a>

            <a href="#about">About</a>

          </div>

          <a href="javascript:void(0);" class="icon" onclick="myFunction()">

            <i class="fa fa-bars">Menu</i>

          </a>

     </div>

</div>

answered Jan 3 at 10:11

Vrle

564716

still there is a problem drop down should appear after i click the Menu but

– Raghu
Jan 3 at 10:21

It should. Did you enclose your javascript with <script></script> tags and put it at the end of <body> html ?

– Vrle
Jan 3 at 10:31

add a comment |

-2

pls try this code

<html>

<head>

    <style>

        .topnav {

          overflow: hidden;

          background-color:white;

          position: relative;

          /*margin: -10px -126px;*/

        }



        .topnav #myLinks {

          display: none;

          background-color:white;

          margin:48px 0px;



        }

        .topnav #myLinks a {

            color: #000;

        }



        .topnav a {

          color: white;

          padding: 14px 16px;

          text-decoration: none;

          font-size: 17px;

          display: block;

        }



        .topnav a.icon {

          background: black;

          display: block;

          position: absolute;



          top: 0;

         /*margin: 5px 166px;*/



        }



        .topnav a:hover {

          background-color: #ddd;



        }



        .active {

          background-color: #4CAF50;

          color: white;

          float:right;

          margin: 0px;

        }

        }

        div#myLinks {

            margin: 0px 20px 0px 107px;

        }

    </style>

    <script>

        function myFunction(){

            var menu = document.getElementById("myLinks");

            if(menu.style.display == "block"){

                menu.style.display = "none";

            }

            else{

                menu.style.display = "block";

            }

        }

    </script>

</head>    



<body>

    <div class="container-fluid">

        <header>

            <!-- Top Navigation Menu -->

            <div class="topnav">

              <a href="#home" class="active">

                <img src="Images/logo-black.png" alt="AudiLogo">

              </a>

              <div id="myLinks">

                <a href="#news">News</a>

                <a href="#contact">Contact</a>

                <a href="#about">About</a>

              </div>

              <a href="javascript:void(0);" class="icon" onclick="myFunction()">

                <i class="fa fa-bars">Menu</i>

              </a>

            </div>

        </header>

    </div>

</body>

</html>

answered Jan 3 at 10:00

AddWeb Solution Pvt Ltd

13.3k11339

Thank you this code is working Fine

– Raghu
Jan 3 at 10:54

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54019550%2fi-am-setting-a-menu-bar-with-drop-down-but-the-problem-is-you-can-see-in-below-c%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

Try this code

.navbar {

  overflow: hidden;

  background-color: #333;

  font-family: Arial, Helvetica, sans-serif;

}



.navbar a {

  float: left;

  font-size: 16px;

  color: white;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

}



.dropdown {

  float: left;

  overflow: hidden;

}



.dropdown .dropbtn {

  font-size: 16px;  

  border: none;

  outline: none;

  color: white;

  padding: 14px 16px;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

}



.navbar a:hover, .dropdown:hover .dropbtn {

  background-color: red;

}



.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

}



.dropdown-content a {

  float: none;

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

  text-align: left;

}



.dropdown-content a:hover {

  background-color: #ddd;

}



.dropdown:hover .dropdown-content {

  display: block;

}

  <!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>



<div class="navbar">

  <a href="#home">Home</a>

  <a href="#news">News</a>

  <div class="dropdown">

    <button class="dropbtn">Dropdown 

      <i class="fa fa-caret-down"></i>

    </button>

    <div class="dropdown-content">

      <a href="#">Link 1</a>

      <a href="#">Link 2</a>

      <a href="#">Link 3</a>

    </div>

  </div> 

</div>



<h3>Dropdown Menu inside a Navigation Bar</h3>

<p>Hover over the "Dropdown" link to see the dropdown menu.</p>



</body>

</html>

answered Jan 3 at 9:53

Nooruddin Saheb

2719

I have Used same Code but its not working

– Raghu
Jan 3 at 9:57

Why are u using JavaScript? Its just HTML and CSS.

– Nooruddin Saheb
Jan 3 at 10:00

@Raghu The code I've given is working fine as u can check by using the run Snippets above...

– Nooruddin Saheb
Jan 3 at 10:01

add a comment |

Try this code

.navbar {

  overflow: hidden;

  background-color: #333;

  font-family: Arial, Helvetica, sans-serif;

}



.navbar a {

  float: left;

  font-size: 16px;

  color: white;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

}



.dropdown {

  float: left;

  overflow: hidden;

}



.dropdown .dropbtn {

  font-size: 16px;  

  border: none;

  outline: none;

  color: white;

  padding: 14px 16px;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

}



.navbar a:hover, .dropdown:hover .dropbtn {

  background-color: red;

}



.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

}



.dropdown-content a {

  float: none;

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

  text-align: left;

}



.dropdown-content a:hover {

  background-color: #ddd;

}



.dropdown:hover .dropdown-content {

  display: block;

}

  <!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>



<div class="navbar">

  <a href="#home">Home</a>

  <a href="#news">News</a>

  <div class="dropdown">

    <button class="dropbtn">Dropdown 

      <i class="fa fa-caret-down"></i>

    </button>

    <div class="dropdown-content">

      <a href="#">Link 1</a>

      <a href="#">Link 2</a>

      <a href="#">Link 3</a>

    </div>

  </div> 

</div>



<h3>Dropdown Menu inside a Navigation Bar</h3>

<p>Hover over the "Dropdown" link to see the dropdown menu.</p>



</body>

</html>

answered Jan 3 at 9:53

Nooruddin Saheb

2719

I have Used same Code but its not working

– Raghu
Jan 3 at 9:57

Why are u using JavaScript? Its just HTML and CSS.

– Nooruddin Saheb
Jan 3 at 10:00

@Raghu The code I've given is working fine as u can check by using the run Snippets above...

– Nooruddin Saheb
Jan 3 at 10:01

add a comment |

Try this code

.navbar {

  overflow: hidden;

  background-color: #333;

  font-family: Arial, Helvetica, sans-serif;

}



.navbar a {

  float: left;

  font-size: 16px;

  color: white;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

}



.dropdown {

  float: left;

  overflow: hidden;

}



.dropdown .dropbtn {

  font-size: 16px;  

  border: none;

  outline: none;

  color: white;

  padding: 14px 16px;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

}



.navbar a:hover, .dropdown:hover .dropbtn {

  background-color: red;

}



.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

}



.dropdown-content a {

  float: none;

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

  text-align: left;

}



.dropdown-content a:hover {

  background-color: #ddd;

}



.dropdown:hover .dropdown-content {

  display: block;

}

  <!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>



<div class="navbar">

  <a href="#home">Home</a>

  <a href="#news">News</a>

  <div class="dropdown">

    <button class="dropbtn">Dropdown 

      <i class="fa fa-caret-down"></i>

    </button>

    <div class="dropdown-content">

      <a href="#">Link 1</a>

      <a href="#">Link 2</a>

      <a href="#">Link 3</a>

    </div>

  </div> 

</div>



<h3>Dropdown Menu inside a Navigation Bar</h3>

<p>Hover over the "Dropdown" link to see the dropdown menu.</p>



</body>

</html>

answered Jan 3 at 9:53

Nooruddin Saheb

2719

Try this code

.navbar {

  overflow: hidden;

  background-color: #333;

  font-family: Arial, Helvetica, sans-serif;

}



.navbar a {

  float: left;

  font-size: 16px;

  color: white;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

}



.dropdown {

  float: left;

  overflow: hidden;

}



.dropdown .dropbtn {

  font-size: 16px;  

  border: none;

  outline: none;

  color: white;

  padding: 14px 16px;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

}



.navbar a:hover, .dropdown:hover .dropbtn {

  background-color: red;

}



.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

}



.dropdown-content a {

  float: none;

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

  text-align: left;

}



.dropdown-content a:hover {

  background-color: #ddd;

}



.dropdown:hover .dropdown-content {

  display: block;

}

  <!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>



<div class="navbar">

  <a href="#home">Home</a>

  <a href="#news">News</a>

  <div class="dropdown">

    <button class="dropbtn">Dropdown 

      <i class="fa fa-caret-down"></i>

    </button>

    <div class="dropdown-content">

      <a href="#">Link 1</a>

      <a href="#">Link 2</a>

      <a href="#">Link 3</a>

    </div>

  </div> 

</div>



<h3>Dropdown Menu inside a Navigation Bar</h3>

<p>Hover over the "Dropdown" link to see the dropdown menu.</p>



</body>

</html>

.navbar {

  overflow: hidden;

  background-color: #333;

  font-family: Arial, Helvetica, sans-serif;

}



.navbar a {

  float: left;

  font-size: 16px;

  color: white;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

}



.dropdown {

  float: left;

  overflow: hidden;

}



.dropdown .dropbtn {

  font-size: 16px;  

  border: none;

  outline: none;

  color: white;

  padding: 14px 16px;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

}



.navbar a:hover, .dropdown:hover .dropbtn {

  background-color: red;

}



.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

}



.dropdown-content a {

  float: none;

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

  text-align: left;

}



.dropdown-content a:hover {

  background-color: #ddd;

}



.dropdown:hover .dropdown-content {

  display: block;

}

  <!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>



<div class="navbar">

  <a href="#home">Home</a>

  <a href="#news">News</a>

  <div class="dropdown">

    <button class="dropbtn">Dropdown 

      <i class="fa fa-caret-down"></i>

    </button>

    <div class="dropdown-content">

      <a href="#">Link 1</a>

      <a href="#">Link 2</a>

      <a href="#">Link 3</a>

    </div>

  </div> 

</div>



<h3>Dropdown Menu inside a Navigation Bar</h3>

<p>Hover over the "Dropdown" link to see the dropdown menu.</p>



</body>

</html>

.navbar {

  overflow: hidden;

  background-color: #333;

  font-family: Arial, Helvetica, sans-serif;

}



.navbar a {

  float: left;

  font-size: 16px;

  color: white;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

}



.dropdown {

  float: left;

  overflow: hidden;

}



.dropdown .dropbtn {

  font-size: 16px;  

  border: none;

  outline: none;

  color: white;

  padding: 14px 16px;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

}



.navbar a:hover, .dropdown:hover .dropbtn {

  background-color: red;

}



.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

}



.dropdown-content a {

  float: none;

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

  text-align: left;

}



.dropdown-content a:hover {

  background-color: #ddd;

}



.dropdown:hover .dropdown-content {

  display: block;

}

  <!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>



<div class="navbar">

  <a href="#home">Home</a>

  <a href="#news">News</a>

  <div class="dropdown">

    <button class="dropbtn">Dropdown 

      <i class="fa fa-caret-down"></i>

    </button>

    <div class="dropdown-content">

      <a href="#">Link 1</a>

      <a href="#">Link 2</a>

      <a href="#">Link 3</a>

    </div>

  </div> 

</div>



<h3>Dropdown Menu inside a Navigation Bar</h3>

<p>Hover over the "Dropdown" link to see the dropdown menu.</p>



</body>

</html>

answered Jan 3 at 9:53

Nooruddin Saheb

2719

answered Jan 3 at 9:53

Nooruddin Saheb

2719

answered Jan 3 at 9:53

Nooruddin Saheb

2719

answered Jan 3 at 9:53

Nooruddin Saheb

2719

I have Used same Code but its not working

– Raghu
Jan 3 at 9:57

Why are u using JavaScript? Its just HTML and CSS.

– Nooruddin Saheb
Jan 3 at 10:00

@Raghu The code I've given is working fine as u can check by using the run Snippets above...

– Nooruddin Saheb
Jan 3 at 10:01

add a comment |

I have Used same Code but its not working

– Raghu
Jan 3 at 9:57

Why are u using JavaScript? Its just HTML and CSS.

– Nooruddin Saheb
Jan 3 at 10:00

@Raghu The code I've given is working fine as u can check by using the run Snippets above...

– Nooruddin Saheb
Jan 3 at 10:01

I have Used same Code but its not working

– Raghu
Jan 3 at 9:57

Why are u using JavaScript? Its just HTML and CSS.

– Nooruddin Saheb
Jan 3 at 10:00

@Raghu The code I've given is working fine as u can check by using the run Snippets above...

– Nooruddin Saheb
Jan 3 at 10:01

add a comment |

I edited your code to show the sub navigation as you wanted to show. It still needs some styling and I assumed you wanted to use javascript as you did in your original code.

    function myFunction() {

      var x = document.getElementById("myLinks");

      if (x.style.display === "block") {

        x.style.display = "none";

      } else {

        x.style.display = "block";

      }

    }

.topnav {

	overflow: hidden;

	background-color: white;

	position: relative;

	margin: -10px -126px;

}



.topnav #myLinks {

	display: visible;

	background-color: white;

	margin: 10px 20px;

}



.topnav a {

	color: white;

	padding: 14px 16px;

	text-decoration: none;

	font-size: 17px;

	display: block;

}



.topnav a.icon {

	background: black;

	display: block;

	position: absolute;

	top: 0;

	margin: 5px 166px;

}



.topnav a:hover {

	background-color: #ddd;

}



.active {

	background-color: #4caf50;

	color: white;

	float: right;

	margin: 0px 81px;

}



div#myLinks {

	margin: 0px 20px 0px 107px;

}

div#myLinks > a:first-child {

	margin-top: 52px;

}

div#myLinks > a {

  color: black;

  margin-left: 100px;

  padding-left: 60px;

}

<div class="topnav">

          <a href="#home" class="active">

         <img src="Images/logo-black.png" alt="AudiLogo" />

          

          </a>

          <div id="myLinks">

            <a href="#news">News</a>

            <a href="#contact">Contact</a>

            <a href="#about">About</a>

          </div>

          <a href="javascript:void(0);" class="icon" onclick="myFunction()">

            <i class="fa fa-bars">Menu</i>

          </a>

     </div>

</div>

answered Jan 3 at 10:11

Vrle

564716

still there is a problem drop down should appear after i click the Menu but

– Raghu
Jan 3 at 10:21

It should. Did you enclose your javascript with <script></script> tags and put it at the end of <body> html ?

– Vrle
Jan 3 at 10:31

add a comment |

I edited your code to show the sub navigation as you wanted to show. It still needs some styling and I assumed you wanted to use javascript as you did in your original code.

    function myFunction() {

      var x = document.getElementById("myLinks");

      if (x.style.display === "block") {

        x.style.display = "none";

      } else {

        x.style.display = "block";

      }

    }

.topnav {

	overflow: hidden;

	background-color: white;

	position: relative;

	margin: -10px -126px;

}



.topnav #myLinks {

	display: visible;

	background-color: white;

	margin: 10px 20px;

}



.topnav a {

	color: white;

	padding: 14px 16px;

	text-decoration: none;

	font-size: 17px;

	display: block;

}



.topnav a.icon {

	background: black;

	display: block;

	position: absolute;

	top: 0;

	margin: 5px 166px;

}



.topnav a:hover {

	background-color: #ddd;

}



.active {

	background-color: #4caf50;

	color: white;

	float: right;

	margin: 0px 81px;

}



div#myLinks {

	margin: 0px 20px 0px 107px;

}

div#myLinks > a:first-child {

	margin-top: 52px;

}

div#myLinks > a {

  color: black;

  margin-left: 100px;

  padding-left: 60px;

}

<div class="topnav">

          <a href="#home" class="active">

         <img src="Images/logo-black.png" alt="AudiLogo" />

          

          </a>

          <div id="myLinks">

            <a href="#news">News</a>

            <a href="#contact">Contact</a>

            <a href="#about">About</a>

          </div>

          <a href="javascript:void(0);" class="icon" onclick="myFunction()">

            <i class="fa fa-bars">Menu</i>

          </a>

     </div>

</div>

answered Jan 3 at 10:11

Vrle

564716

still there is a problem drop down should appear after i click the Menu but

– Raghu
Jan 3 at 10:21

It should. Did you enclose your javascript with <script></script> tags and put it at the end of <body> html ?

– Vrle
Jan 3 at 10:31

add a comment |

I edited your code to show the sub navigation as you wanted to show. It still needs some styling and I assumed you wanted to use javascript as you did in your original code.

    function myFunction() {

      var x = document.getElementById("myLinks");

      if (x.style.display === "block") {

        x.style.display = "none";

      } else {

        x.style.display = "block";

      }

    }

.topnav {

	overflow: hidden;

	background-color: white;

	position: relative;

	margin: -10px -126px;

}



.topnav #myLinks {

	display: visible;

	background-color: white;

	margin: 10px 20px;

}



.topnav a {

	color: white;

	padding: 14px 16px;

	text-decoration: none;

	font-size: 17px;

	display: block;

}



.topnav a.icon {

	background: black;

	display: block;

	position: absolute;

	top: 0;

	margin: 5px 166px;

}



.topnav a:hover {

	background-color: #ddd;

}



.active {

	background-color: #4caf50;

	color: white;

	float: right;

	margin: 0px 81px;

}



div#myLinks {

	margin: 0px 20px 0px 107px;

}

div#myLinks > a:first-child {

	margin-top: 52px;

}

div#myLinks > a {

  color: black;

  margin-left: 100px;

  padding-left: 60px;

}

<div class="topnav">

          <a href="#home" class="active">

         <img src="Images/logo-black.png" alt="AudiLogo" />

          

          </a>

          <div id="myLinks">

            <a href="#news">News</a>

            <a href="#contact">Contact</a>

            <a href="#about">About</a>

          </div>

          <a href="javascript:void(0);" class="icon" onclick="myFunction()">

            <i class="fa fa-bars">Menu</i>

          </a>

     </div>

</div>

answered Jan 3 at 10:11

Vrle

564716

I edited your code to show the sub navigation as you wanted to show. It still needs some styling and I assumed you wanted to use javascript as you did in your original code.

    function myFunction() {

      var x = document.getElementById("myLinks");

      if (x.style.display === "block") {

        x.style.display = "none";

      } else {

        x.style.display = "block";

      }

    }

.topnav {

	overflow: hidden;

	background-color: white;

	position: relative;

	margin: -10px -126px;

}



.topnav #myLinks {

	display: visible;

	background-color: white;

	margin: 10px 20px;

}



.topnav a {

	color: white;

	padding: 14px 16px;

	text-decoration: none;

	font-size: 17px;

	display: block;

}



.topnav a.icon {

	background: black;

	display: block;

	position: absolute;

	top: 0;

	margin: 5px 166px;

}



.topnav a:hover {

	background-color: #ddd;

}



.active {

	background-color: #4caf50;

	color: white;

	float: right;

	margin: 0px 81px;

}



div#myLinks {

	margin: 0px 20px 0px 107px;

}

div#myLinks > a:first-child {

	margin-top: 52px;

}

div#myLinks > a {

  color: black;

  margin-left: 100px;

  padding-left: 60px;

}

<div class="topnav">

          <a href="#home" class="active">

         <img src="Images/logo-black.png" alt="AudiLogo" />

          

          </a>

          <div id="myLinks">

            <a href="#news">News</a>

            <a href="#contact">Contact</a>

            <a href="#about">About</a>

          </div>

          <a href="javascript:void(0);" class="icon" onclick="myFunction()">

            <i class="fa fa-bars">Menu</i>

          </a>

     </div>

</div>

    function myFunction() {

      var x = document.getElementById("myLinks");

      if (x.style.display === "block") {

        x.style.display = "none";

      } else {

        x.style.display = "block";

      }

    }

.topnav {

	overflow: hidden;

	background-color: white;

	position: relative;

	margin: -10px -126px;

}



.topnav #myLinks {

	display: visible;

	background-color: white;

	margin: 10px 20px;

}



.topnav a {

	color: white;

	padding: 14px 16px;

	text-decoration: none;

	font-size: 17px;

	display: block;

}



.topnav a.icon {

	background: black;

	display: block;

	position: absolute;

	top: 0;

	margin: 5px 166px;

}



.topnav a:hover {

	background-color: #ddd;

}



.active {

	background-color: #4caf50;

	color: white;

	float: right;

	margin: 0px 81px;

}



div#myLinks {

	margin: 0px 20px 0px 107px;

}

div#myLinks > a:first-child {

	margin-top: 52px;

}

div#myLinks > a {

  color: black;

  margin-left: 100px;

  padding-left: 60px;

}

<div class="topnav">

          <a href="#home" class="active">

         <img src="Images/logo-black.png" alt="AudiLogo" />

          

          </a>

          <div id="myLinks">

            <a href="#news">News</a>

            <a href="#contact">Contact</a>

            <a href="#about">About</a>

          </div>

          <a href="javascript:void(0);" class="icon" onclick="myFunction()">

            <i class="fa fa-bars">Menu</i>

          </a>

     </div>

</div>

    function myFunction() {

      var x = document.getElementById("myLinks");

      if (x.style.display === "block") {

        x.style.display = "none";

      } else {

        x.style.display = "block";

      }

    }

.topnav {

	overflow: hidden;

	background-color: white;

	position: relative;

	margin: -10px -126px;

}



.topnav #myLinks {

	display: visible;

	background-color: white;

	margin: 10px 20px;

}



.topnav a {

	color: white;

	padding: 14px 16px;

	text-decoration: none;

	font-size: 17px;

	display: block;

}



.topnav a.icon {

	background: black;

	display: block;

	position: absolute;

	top: 0;

	margin: 5px 166px;

}



.topnav a:hover {

	background-color: #ddd;

}



.active {

	background-color: #4caf50;

	color: white;

	float: right;

	margin: 0px 81px;

}



div#myLinks {

	margin: 0px 20px 0px 107px;

}

div#myLinks > a:first-child {

	margin-top: 52px;

}

div#myLinks > a {

  color: black;

  margin-left: 100px;

  padding-left: 60px;

}

<div class="topnav">

          <a href="#home" class="active">

         <img src="Images/logo-black.png" alt="AudiLogo" />

          

          </a>

          <div id="myLinks">

            <a href="#news">News</a>

            <a href="#contact">Contact</a>

            <a href="#about">About</a>

          </div>

          <a href="javascript:void(0);" class="icon" onclick="myFunction()">

            <i class="fa fa-bars">Menu</i>

          </a>

     </div>

</div>

answered Jan 3 at 10:11

Vrle

564716

answered Jan 3 at 10:11

Vrle

564716

answered Jan 3 at 10:11

Vrle

564716

answered Jan 3 at 10:11

Vrle

564716

still there is a problem drop down should appear after i click the Menu but

– Raghu
Jan 3 at 10:21

It should. Did you enclose your javascript with <script></script> tags and put it at the end of <body> html ?

– Vrle
Jan 3 at 10:31

add a comment |

still there is a problem drop down should appear after i click the Menu but

– Raghu
Jan 3 at 10:21

It should. Did you enclose your javascript with <script></script> tags and put it at the end of <body> html ?

– Vrle
Jan 3 at 10:31

still there is a problem drop down should appear after i click the Menu but

– Raghu
Jan 3 at 10:21

It should. Did you enclose your javascript with <script></script> tags and put it at the end of <body> html ?

– Vrle
Jan 3 at 10:31

add a comment |

-2

pls try this code

<html>

<head>

    <style>

        .topnav {

          overflow: hidden;

          background-color:white;

          position: relative;

          /*margin: -10px -126px;*/

        }



        .topnav #myLinks {

          display: none;

          background-color:white;

          margin:48px 0px;



        }

        .topnav #myLinks a {

            color: #000;

        }



        .topnav a {

          color: white;

          padding: 14px 16px;

          text-decoration: none;

          font-size: 17px;

          display: block;

        }



        .topnav a.icon {

          background: black;

          display: block;

          position: absolute;



          top: 0;

         /*margin: 5px 166px;*/



        }



        .topnav a:hover {

          background-color: #ddd;



        }



        .active {

          background-color: #4CAF50;

          color: white;

          float:right;

          margin: 0px;

        }

        }

        div#myLinks {

            margin: 0px 20px 0px 107px;

        }

    </style>

    <script>

        function myFunction(){

            var menu = document.getElementById("myLinks");

            if(menu.style.display == "block"){

                menu.style.display = "none";

            }

            else{

                menu.style.display = "block";

            }

        }

    </script>

</head>    



<body>

    <div class="container-fluid">

        <header>

            <!-- Top Navigation Menu -->

            <div class="topnav">

              <a href="#home" class="active">

                <img src="Images/logo-black.png" alt="AudiLogo">

              </a>

              <div id="myLinks">

                <a href="#news">News</a>

                <a href="#contact">Contact</a>

                <a href="#about">About</a>

              </div>

              <a href="javascript:void(0);" class="icon" onclick="myFunction()">

                <i class="fa fa-bars">Menu</i>

              </a>

            </div>

        </header>

    </div>

</body>

</html>

answered Jan 3 at 10:00

AddWeb Solution Pvt Ltd

13.3k11339

Thank you this code is working Fine

– Raghu
Jan 3 at 10:54

add a comment |

-2

pls try this code

<html>

<head>

    <style>

        .topnav {

          overflow: hidden;

          background-color:white;

          position: relative;

          /*margin: -10px -126px;*/

        }



        .topnav #myLinks {

          display: none;

          background-color:white;

          margin:48px 0px;



        }

        .topnav #myLinks a {

            color: #000;

        }



        .topnav a {

          color: white;

          padding: 14px 16px;

          text-decoration: none;

          font-size: 17px;

          display: block;

        }



        .topnav a.icon {

          background: black;

          display: block;

          position: absolute;



          top: 0;

         /*margin: 5px 166px;*/



        }



        .topnav a:hover {

          background-color: #ddd;



        }



        .active {

          background-color: #4CAF50;

          color: white;

          float:right;

          margin: 0px;

        }

        }

        div#myLinks {

            margin: 0px 20px 0px 107px;

        }

    </style>

    <script>

        function myFunction(){

            var menu = document.getElementById("myLinks");

            if(menu.style.display == "block"){

                menu.style.display = "none";

            }

            else{

                menu.style.display = "block";

            }

        }

    </script>

</head>    



<body>

    <div class="container-fluid">

        <header>

            <!-- Top Navigation Menu -->

            <div class="topnav">

              <a href="#home" class="active">

                <img src="Images/logo-black.png" alt="AudiLogo">

              </a>

              <div id="myLinks">

                <a href="#news">News</a>

                <a href="#contact">Contact</a>

                <a href="#about">About</a>

              </div>

              <a href="javascript:void(0);" class="icon" onclick="myFunction()">

                <i class="fa fa-bars">Menu</i>

              </a>

            </div>

        </header>

    </div>

</body>

</html>

answered Jan 3 at 10:00

AddWeb Solution Pvt Ltd

13.3k11339

Thank you this code is working Fine

– Raghu
Jan 3 at 10:54

add a comment |

-2

pls try this code

<html>

<head>

    <style>

        .topnav {

          overflow: hidden;

          background-color:white;

          position: relative;

          /*margin: -10px -126px;*/

        }



        .topnav #myLinks {

          display: none;

          background-color:white;

          margin:48px 0px;



        }

        .topnav #myLinks a {

            color: #000;

        }



        .topnav a {

          color: white;

          padding: 14px 16px;

          text-decoration: none;

          font-size: 17px;

          display: block;

        }



        .topnav a.icon {

          background: black;

          display: block;

          position: absolute;



          top: 0;

         /*margin: 5px 166px;*/



        }



        .topnav a:hover {

          background-color: #ddd;



        }



        .active {

          background-color: #4CAF50;

          color: white;

          float:right;

          margin: 0px;

        }

        }

        div#myLinks {

            margin: 0px 20px 0px 107px;

        }

    </style>

    <script>

        function myFunction(){

            var menu = document.getElementById("myLinks");

            if(menu.style.display == "block"){

                menu.style.display = "none";

            }

            else{

                menu.style.display = "block";

            }

        }

    </script>

</head>    



<body>

    <div class="container-fluid">

        <header>

            <!-- Top Navigation Menu -->

            <div class="topnav">

              <a href="#home" class="active">

                <img src="Images/logo-black.png" alt="AudiLogo">

              </a>

              <div id="myLinks">

                <a href="#news">News</a>

                <a href="#contact">Contact</a>

                <a href="#about">About</a>

              </div>

              <a href="javascript:void(0);" class="icon" onclick="myFunction()">

                <i class="fa fa-bars">Menu</i>

              </a>

            </div>

        </header>

    </div>

</body>

</html>

answered Jan 3 at 10:00

AddWeb Solution Pvt Ltd

13.3k11339

pls try this code

<html>

<head>

    <style>

        .topnav {

          overflow: hidden;

          background-color:white;

          position: relative;

          /*margin: -10px -126px;*/

        }



        .topnav #myLinks {

          display: none;

          background-color:white;

          margin:48px 0px;



        }

        .topnav #myLinks a {

            color: #000;

        }



        .topnav a {

          color: white;

          padding: 14px 16px;

          text-decoration: none;

          font-size: 17px;

          display: block;

        }



        .topnav a.icon {

          background: black;

          display: block;

          position: absolute;



          top: 0;

         /*margin: 5px 166px;*/



        }



        .topnav a:hover {

          background-color: #ddd;



        }



        .active {

          background-color: #4CAF50;

          color: white;

          float:right;

          margin: 0px;

        }

        }

        div#myLinks {

            margin: 0px 20px 0px 107px;

        }

    </style>

    <script>

        function myFunction(){

            var menu = document.getElementById("myLinks");

            if(menu.style.display == "block"){

                menu.style.display = "none";

            }

            else{

                menu.style.display = "block";

            }

        }

    </script>

</head>    



<body>

    <div class="container-fluid">

        <header>

            <!-- Top Navigation Menu -->

            <div class="topnav">

              <a href="#home" class="active">

                <img src="Images/logo-black.png" alt="AudiLogo">

              </a>

              <div id="myLinks">

                <a href="#news">News</a>

                <a href="#contact">Contact</a>

                <a href="#about">About</a>

              </div>

              <a href="javascript:void(0);" class="icon" onclick="myFunction()">

                <i class="fa fa-bars">Menu</i>

              </a>

            </div>

        </header>

    </div>

</body>

</html>

answered Jan 3 at 10:00

AddWeb Solution Pvt Ltd

13.3k11339

answered Jan 3 at 10:00

AddWeb Solution Pvt Ltd

13.3k11339

answered Jan 3 at 10:00

AddWeb Solution Pvt Ltd

13.3k11339

answered Jan 3 at 10:00

AddWeb Solution Pvt Ltd

13.3k11339

Thank you this code is working Fine

– Raghu
Jan 3 at 10:54

add a comment |

Thank you this code is working Fine

– Raghu
Jan 3 at 10:54

Thank you this code is working Fine

– Raghu
Jan 3 at 10:54

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk