Inspiring

Answered

Drop down menu border lines are doubled up

Forum|Forum|4 years ago
June 12, 2021
2 replies
1793 views

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>

This topic has been closed for replies.

Correct answer BenPleysier

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>

Liam Dilley

Inspiring

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

BenPleysier

Correct answer

Community Expert

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!

davidhelpAuthor

Inspiring

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>

BenPleysier

Community Expert

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!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded