Drop down menu border lines are doubled up

Report · Jun 11, 2021

Hello

In this example of a menu I want a 1px border all around.

The problem is the dividing lines and the horizontal lines in the drop down menu are doubled up.

How to fix?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Horizontal Drop Down Menu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body {
background-color: #FFFFE0;
padding: 0px;
margin-top: 50px;
margin-bottom: 50px;
}

.container {
min-width: 650px;
max-width: 750px;
width: 70%;
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;

}

.menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}

.menu li {
float: left;
position: relative;
border-bottom: 1px solid #555555;
border-top: 1px solid #555555;
border-left: 1px solid #555555;
border-right: 1px solid #555555;
}

.menu a {
display: block;
font-size: 100%;
width: 130px;
color: #000;
text-decoration: none;
text-align: left;
font-family: "open sans";
font-size: 14pt;
font-weight: bold;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 50px;
background-color: #84d7ba;
}

.menu :visited {
}

.menu :hover {
color: #FFFFFF;
background: #ffa07a;
border-bottom: 0px solid #555555;
}

.menu ul ul {
visibility: hidden;
position: absolute;
width: 130px;
height: 0;
}

.menu ul li:hover ul, .menu ul a:hover ul {
visibility: visible;
}

</style>
</head>

<div class="container">

<div class="menu">

<ul>
<li><a href="#">Dropdown</a></a>

<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Dropdown</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>

<li><a href="#">Menu 1</a></a>

<ul>
<li><a href="#" title="Dropdown">Dropdown</a></li>
<li><a href="#" title="Menu">Menu</a></li>
<li><a href="#" title="Dropdown">Dropdown</a></li>
<li><a href="#" title="Menu">Menu</a></li>
</ul>
</li>

<li><a href="#">Menu 2</a></a>

<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Dropdown</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>

<li><a href="#">Menu 3</a></a>

<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Dropdown</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>
</ul>
</div>

<!--*/end of menu -->
<!--*/end of container -->

</body>
</html>

Report · Jun 11, 2021

Change/add the following style rules

.menu li:first-child {

border-left: 1px solid #555555;

}

.menu li {

float: left;

position: relative;

border-bottom: 1px solid #555555;

border-top: 1px solid #555555;

border-right: 1px solid #555555;

}

.menu li li:first-child {

border-top: 1px solid #555555;

}

.menu li li {

float: left;

position: relative;

border-bottom: 1px solid #555555;

border-top: none;

border-left: 1px solid #555555;

border-right: 1px solid #555555;

}

Also

1. make sure that you have a starting BODY tag as in <body>

2. on lines 96, 105, 115 and 124 remove the extra </a> tag

3. don't forget to close the `container` element by adding </div> before </body>

Wappler, the only real Dreamweaver alternative.

Report · Jun 11, 2021

Thanks. I sure missed seeing all those extra tags. Corrected code below.

The menu does not have a border on all levels of the drop down menu starting 3rd level down etc. If I add what you see in bold I now have a border but it is doubled from 1px to 2px. Not a bad look but would like the same 1px. Looking over a site that has many menu generators I see pretty much no border lines. https://blog.templatetoaster.com/css-menu-makers/ so it may not be possible.

.menu :hover {
color: #FFFFFF;
background: #ffa07a;
border-bottom: 1px solid #555555;
}

After following your tips I found I needed to add what you see in bold as the border was missing on the leftside of the dropdown menu.

.menu li li {
float: left;
position: relative;
border-bottom: 1px solid #555555;
border-top: none;border-right: 1px solid #555555;
border-left: 1px solid #555555;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Horizontal Drop Down Menu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body {
background-color: #FFFFE0;
padding: 0px;
margin-top: 50px;
margin-bottom: 50px;
}

.container {
min-width: 650px;
max-width: 750px;
width: 70%;
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;

}

.menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}

.menu li:first-child {
    border-left: 1px solid #555555;
}

.menu li {
float: left;
position: relative;
border-bottom: 1px solid #555555;
border-top: 1px solid #555555;
border-right: 1px solid #555555;
}

.menu li li:first-child {
    border-top: 1px solid #555555;
}

.menu li li {
    float: left;
    position: relative;
    border-bottom: 1px solid #555555;
    border-top: none;
    border-right: 1px solid #555555;
border-left: 1px solid #555555;
}


.menu a {
display: block;
font-size: 100%;
width: 130px;
color: #000;
text-decoration: none;
text-align: left;
font-family: "open sans";
font-size: 14pt;
font-weight: bold;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 50px;
background-color: #84d7ba;
}

.menu :visited {
}

.menu :hover {
color: #FFFFFF;
background: #ffa07a;
border-bottom: 0px solid #555555;
}

.menu ul ul {
visibility: hidden;
position: absolute;
width: 130px;
height: 0;
}

.menu ul li:hover ul, .menu ul a:hover ul {
visibility: visible;
}

</style>
</head>
<body>

<div class="container">

<div class="menu">

<ul>
<li><a href="#">Dropdown</a>

<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Dropdown</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>

<li><a href="#">Menu 1</a>

<ul>
<li><a href="#" title="Dropdown">Dropdown</a></li>
<li><a href="#" title="Menu">Menu</a></li>
<li><a href="#" title="Dropdown">Dropdown</a></li>
<li><a href="#" title="Menu">Menu</a></li>
</ul>
</li>

<li><a href="#">Menu 2</a>

<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Dropdown</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>

<li><a href="#">Menu 3</a>

<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Dropdown</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!--*/end of menu -->
<!--*/end of container -->

</body>
</html>

Report · Jun 11, 2021

Oops, sorry for that. I have corrected my code in case someone else is following.

Wappler, the only real Dreamweaver alternative.

Report · Jun 14, 2021

Just as some extra helpful tips on the CSS....

How the borders are done can be just:

border: 1px solid #555;

Then you can overide a side after that.

Any colour like #fffff (white) can be just #fff

And in modern CSS you can do...

:root{

--white: #fff;

}

and use it anywhere...

color:var(--white);

Adobe Support Community

Drop down menu border lines are doubled up

1 Correct answer