0

Have a CSS DROPDOWN MENU that works great from the Developers machine - based off the W3SCHOOLS with slight modification

http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button

My version with 2 DROP DOWN Buttons.:

@{
ViewBag.Title = "MENU";
}
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
   background-color: #4CAF50;
   color: white;
   padding: 16px;
   font-size: 16px;
   border: none;
   cursor: pointer;
 }

 .dropdown {
   float: left;
   position: relative;
   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;
 }

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
 }

.dropdown:hover .dropbtn {
   background-color: #3e8e41;
}
</style>
</head>
<body>


<h2>MENU</h2>

<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div>
<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
 </div>


<div class="dropdown">
 <button class="dropbtn">Dropdown2</button>
 <div class="dropdown-content">
    <a href="#">Link 1a</a>
    <a href="#">Link 2a</a>
    <a href="#">Link 3a</a>
 </div>
</div>

</div>
<p><strong>Note:</strong>  Test links. </p>

</body>
</html>

When Application is published to website and accessed from another machine the dropdown menu sub menu is displayed to left of MENU Button instead of BELOW the MENU Button.

Working:

DROPDOWN working and NOT working from different machine

Displaying in IE8

Improve this question
7
  • SHOUT much? Perhaps you need to rethink your typing format. Commented Dec 16, 2015 at 19:23
  • I just noted that the first three lines (@{ ViewBag.Title = "MENU"; } make your code behave strange right here in the code box: Some words in the regular text (like "move", "dropdown", "Menu") are displayed in another color. Is there any functional difference if you take out these first three lines? BTW: float: left; in the .dropdownrule should not be necessary. Commented Dec 16, 2015 at 19:24
  • SORRY about the SHOUT @Paulie_D - emphasis not SHOUT Commented Dec 16, 2015 at 19:37
  • The (@{ ViewBag.Title = "MENU"; } I can remove it - seemed to be default when view was created and I don't know why those words are colored different - in my app they the same color - just text. In the bottom of the _Layout.cshtml I have the jquery & bootstrap - may have them wrong - @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false) Commented Dec 16, 2015 at 19:45
  • Created new project and only added style & 2 button & STILL did not work on website. New website also. Commented Dec 18, 2015 at 18:26
Related questions
767
CSS text-overflow: ellipsis; not working?
0
My blogger dropdown sub menu disappears on hover
1
li menu links going underneath content when page loads + css
Load 4 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.