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: 
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0
Upvote

Drop down menu border lines are doubled up

davidhelp
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

1.4K

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

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
...

Votes

Translate

Translate
replies 4 Replies 4
latest latest Jump to latest reply
BenPleysier Community Expert
Community Expert ,
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.

Votes

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

Copy link to clipboard

Copied

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>

 

 

 

Votes

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
BenPleysier Community Expert
Community Expert ,
Jun 11, 2021 Jun 11, 2021

Copy link to clipboard

Copied

In Response To davidhelp

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

 

Wappler, the only real Dreamweaver alternative.

Votes

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
Liam Dilley
LEGEND ,
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);

Votes

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
Copyright © 2024 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