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

Caleb Kleveter
  • 11,170
  • 8
  • 62
  • 92
farmer
  • 47
  • 1
  • 1
  • 10
  • SHOUT much? Perhaps you need to rethink your typing format. – Paulie_D Dec 16 '15 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 `.dropdown`rule should not be necessary. – Johannes Dec 16 '15 at 19:24
  • SORRY about the SHOUT @Paulie_D - emphasis not SHOUT – farmer Dec 16 '15 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) – farmer Dec 16 '15 at 19:45
  • Created new project and only added style & 2 button & STILL did not work on website. New website also. – farmer Dec 18 '15 at 18:26
  • Still not working - just going to not use bundles - ive wasted 2 weeks on this piece of ... – farmer Dec 23 '15 at 16:45
  • SOLUTION was turning the IE Compatibility Mode OFF - too simple and too rewarding to see it actually work – farmer Sep 14 '16 at 18:32

0 Answers0