Home/ Questions/Q 7693629
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T21:08:04+00:00

How to insert two hyperlinks side by side inside an li item? In the

  • 0

How to insert two hyperlinks side by side inside an li item?

In the html code below, I need to put “login” and “register” link side by side separated by a “|”. What modification is required in the below code to accomplish the task.

Thanks.

The html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"></html> 
<html> 
<head> 
        <link href="styledel.css" rel="stylesheet" type="text/css" />
</head> 

<body>
<div id="navcontainer">
                <ul id="navlist">   
                     <li><a href="index.php">Home</a></li>
                    <li><a href="index.php">The Tool </a>                       
                        <ul id="subnavlist">
                            <li><a href="subtitle1.php" target = "_blank">Secondary Link</a></li>
                    </ul>
                        </li>
                    <li><a href="tutorials.php">Tutorials &AMP; FAQs</a></li>
                <li><a href="login.php" target="_blank">Login</a> | <a href="user_add.php" target="_blank">Register</a></li>      
        </ul>
</div>

</body>
</html>

The css file:

#navcontainer
{
border-right: 1px solid #000000;
padding: 0px;  /* menu look*/
font-family: 'Courier New',Courier,monospace;
background-color: #d4cfcf;
}

#navcontainer ul
{
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}

#navcontainer li
{

border-bottom: 1px solid #90bade; /*separator*/
margin: 0;
}

#navcontainer li a  /*menu */
{
display: block;
padding: 5px .3em 5px .3em;
border-left: .3em solid #1958b7;
border-right: .3em solid #508fc4;
color: #004963;
text-decoration: none;
}

#navcontainer li a:hover  /*behavior on hover */
{
background-color: #ffffff;
color: #ad0000; 
}

#navcontainer li li   /*sub menu*/
{   
border-top: 1px solid #90bade;
border-bottom: 0;
margin: 0;
font-family: 'Courier New',Courier,monospace;
font-size: 13px;
}

#    navcontainer li li a  /* sub menu */
{
padding: 4px 4px 4px 15px;
color: #5b6f7b /* light slate color: #00788a  color of text */
}
/* navigation menu end */

Thanks a ton.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try switching a little of the CSS out from the <a> tag to the <li> element instead, like below, where you remove display:block from the li a and move the border-decoration to the li. Then, where you have #navcontainer li li, remove the border-decoration by setting border-left:0px and border-right:0px;

    #navcontainer  li
{
 padding: 5px .3em 5px .3em;
 border-left: .3em solid #1958b7;
border-right: .3em solid #508fc4;
border-bottom: 1px solid #90bade; /*separator*/
margin: 0;
}





color: #004963;
text-decoration: none;
}

#navcontainer li a:hover  /*behavior on hover */
{
background-color: #ffffff;
color: #ad0000; 
}

#navcontainer li li   /*sub menu*/
{   
border-top: 1px solid #90bade;
border-bottom: 0;
margin: 0;
font-family: 'Courier New',Courier,monospace;
font-size: 13px;
border-left:0px;
border-right:0px;
}

#navcontainer li li a  /* sub menu */
{
padding: 4px 4px 4px 15px;
color: #5b6f7b /* light slate color: #00788a  color of text */
}
/* navigation menu end */​
    • 0