Drop down menu border lines are doubled up

Contributor ,
Jun 11, 2021 Jun 11, 2021

Copy link to clipboard

Copied

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>

 

 

Views

757

Likes

Translate

Translate

Report

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

Adobe Community Professional , 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
...

Likes

Translate

Translate
Adobe Community Professional ,
Jun 11, 2021 Jun 11, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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>

 

 

 

Likes

Translate

Translate

Report

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
Adobe Community Professional ,
Jun 11, 2021 Jun 11, 2021

Copy link to clipboard

Copied

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

 

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

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
Adobe Community Professional ,
Jun 14, 2021 Jun 14, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

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