Appearance of double border in dropdown menu in horizontal navigation bar

I’ve been working on a simple horizontal navigation bar using html, css and javascript. The navigation bar contains a dropdown menu (named More). Clicking on the More menu causes hidden links to be shown (vertically) beneath the More heading, and clicking again causes the links to be hidden again.

In the css file, I have set all of the links in the navigation bar to have a double border. However, the appearance of the borders around the links in the dropdown menu look different to the appearance of the borders around the other links. Specifically, the borders at the top and bottom of the links in the dropdown menu look different to the borders of the other links. Why is this?

I’ve included the html, css and javascript code.

Thanks,
Mfl

Screenshot

function clickMoreMenu() {
  var x = document.getElementById("hiddenlinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
#navbar { 
    padding : 0; 
    display : flex;   
    width : 400px; 
    margin-left : auto;  
    margin-right : auto; 
    margin-bottom : 20px; 
} 

.navoption {
   text-align : center; 
   width: 100px; 
   display : inline-block; 
   float : left; 
}  

#moremenu {
    display : inline-block; 
}


#hiddenlinks {
    display: none;
    position : absolute; 
    z-index : 1;
}


#navbar a { 
    display : block; 
    text-align : center; 
    text-decoration : none; 
    padding-top : 10px;  
    padding-bottom : 10px; 
    width : 100px; 
    color : Blue; 
    background : Yellow; 
    border-style : double; 
    border-color : Blue;  
    border-width : medium; 
} 


#navbar a.currentpage { 
    color : DarkBlue; 
    background : Gold; 
} 

#navbar a:hover { 
    background : Blue; 
    color : Yellow; 
} 

h1 { 
    color : blue; 
    text-align : center; 
} 
<!doctype html>
<html lang = "en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Border Test</title>
    <link href="styles.css" type="text/css" rel="stylesheet" />
</head>

<body>
<h1>Border Test</h1>
<nav id = "navbar">
    <div class="navoption">
        <a href="index.html" class="currentpage">Index</a>
    </div>
    <div class="navoption">
        <a href="option2.html">Option 2</a>
    </div>
    <div class="navoption">
        <a href="option3.html">Option 3</a>
    </div>
    <div class="navoption" id="moremenu">
        <div>
            <a href="javascript:void(0);" onclick="clickMoreMenu()">More...</a>
        </div>
        <div id="hiddenlinks">
            <a href="option4.html">Option 4</a>
            <a href="option5.html">Option 5</a>
            <a href="option6.html">Option 6</a>
        </div>
    </div>
</nav>

<script src="moremenu.js"></script>
</body>
</html>

3 thoughts on “Appearance of double border in dropdown menu in horizontal navigation bar”

  1. 192115 346503BTW, and I hope we do not drag this too long, but care to remind us just what kind of weapons were being used on Kurds by Saddams army? Towards the tune of hundreds of thousands of dead Talk about re-written history 123156

    Reply

Leave a Comment