Help with horizontal tool bars

HTML-CSS
#1

So for my portfolio project i wanted to have a tool bar but i also wanted to use more than one set
of li/ul elements. Also this was done in code pen so i did import bootstrap and Jquery.
i am trying to use id’s but i am not sure if that is what i should be using. Any advice would help!
Write now the end result is kinda silly looking and if i don’t use the id’s and and just do

li {
  code...ect
}

it will work but when trying to use id’s and calling custom classes it does not. Please help!

<ul id="ul-1">
  <li id="li-1">< a id="a-1" href="default.asp">Home</a></li>
  <li id="li-1">< a id="a-1" href="news.asp">News</a></li>
  <li id="li-1">< a id="a-1" href="contact.asp">Contact</a></li>
  <li id="li-1">< a id="a-1" href="about.asp">About</a></li>
</ul>

body{
    background-color: #D3D3D3;
}

.ul-1{  
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #C0C0C0;
    position: fixed;
    top: 0;
    width: 100%;
    border: 2px solid #000;
}

.li-1{ 
    border-right: 2px solid #ffffff;
    float: left;
}

.a-1 {  
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.a-1:hover {
    background-color: #A9A9A9;
}

$(document).ready(function() {
  $("#ul-1").addClass("ul-1");
  $("#li-1").addClass("li-1");
  $("#a-1").addClass("a-1");
});
#2

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

I think I edited correctly, it was all over the place with weird characters, so I apologize if I removed something by accident.

#3

First off, you should only have one element for id. An id should be unique to an element and not found anywhere else on the page.

I’m not sure I understand what you are trying to do here, but I’ll try to help. If you are wanting two sets of lists and want each different, you should use classes not ids. Let me give you an example:

<ul id="ul-1">
  <li class="li-1"><a class="a-1" href="default.asp">Home</a></li>
  <li class="li-1"><a class="a-1" href="news.asp">News</a></li>
  <li class="li-1"><a class="a-1" href="contact.asp">Contact</a></li>
  <li class="li-1"><a class="a-1" href="about.asp">About</a></li>
</ul>

<ul id="ul-2">
  <li class="li-2"><a class="a-2" href="default.asp">Home</a></li>
  <li class="li-2"><a class="a-2" href="news.asp">News</a></li>
  <li class="li-2"><a class="a-2" href="contact.asp">Contact</a></li>
  <li class="li-2"><a class="a-2" href="about.asp">About</a></li>
</ul>

We use classes when we want to target multiple elements with the same style. But this isn’t even necessary. Since you have the id for the two ul, you can drop all the classes and ids altogether:

<ul id="ul-1">
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

<ul id="ul-2">
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

You can target that with css using multiple selectors like this:

#ul-1 li {
  /* styles for ul-1 items */
}

#ul-2 li {
  /* styles for ul-2 items */
}

As for your JavaScript, it makes no sense whatsoever. Why are you getting elements by id to add a class to them. I can’t see any reason why you would do that. If you want the classes, just manually add them like I showed you above, but you don’t even need to have the classes at all!

#4