title: two hyperlink inside a <li> list item
body: <p>How to insert two hyperlinks side by side inside an li item?</p>
  
  <p>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. </p>
  
  <p>Thanks. </p>
  
  <p>The html file:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;/html&gt; 
  &lt;html&gt; 
  &lt;head&gt; 
          &lt;link href="styledel.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt; 
  
  &lt;body&gt;
  &lt;div id="navcontainer"&gt;
                  &lt;ul id="navlist"&gt;   
                       &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="index.php"&gt;The Tool &lt;/a&gt;                       
                          &lt;ul id="subnavlist"&gt;
                              &lt;li&gt;&lt;a href="subtitle1.php" target = "_blank"&gt;Secondary Link&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;li&gt;&lt;a href="tutorials.php"&gt;Tutorials &amp;AMP; FAQs&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="login.php" target="_blank"&gt;Login&lt;/a&gt; | &lt;a href="user_add.php" target="_blank"&gt;Register&lt;/a&gt;&lt;/li&gt;      
          &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The css file:</p>
  
  <pre><code>#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 */
  </code></pre>
  
  <p>Thanks a ton. </p>