cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Exit
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0
Upvote

Drop down menu border lines are doubled up

davidhelp
Contributor ,
Jun 11, 2021 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>

 

 

1.7K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

BenPleysier Community Expert
Community Expert , Jun 11, 2021 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-rig
...
Translate
replies 4 Replies 4
latest latest Jump to latest reply
BenPleysier Community Expert
Community Expert ,
Jun 11, 2021 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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
davidhelp
Contributor ,
Jun 11, 2021 Jun 11, 2021
In Response To BenPleysier

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>

 

 

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
BenPleysier Community Expert
Community Expert ,
Jun 11, 2021 Jun 11, 2021
In Response To davidhelp

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

 

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Liam Dilley
LEGEND ,
Jun 14, 2021 Jun 14, 2021
LATEST

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);

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Copyright © 2025 Adobe. All rights reserved.
Using the Community Experience League Terms of Use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices