CSS doesn't make sense

Question

I am trying to improve my jQuery menu.

However, I am running some CSS issues and I'm stuck. Here are my questions.

#nav { list-style: none; margin: 0; padding: 0; margin-bottom: 20px; } #nav li { position: relative; margin: 0; font-size: 15px; border-bottom: 1px solid #fff; padding: 0; } #nav li ul { opacity: 0; height: 0px; } #nav li a { font-style: normal; font-weight: 400; position: relative; display: block; padding: 16px 25px; color: #fff; white-space: nowrap; z-index: 2; text-decoration: none } #nav li a:hover { color: #c0392b; background-color: #ecf0f1; } #nav ul li { background-color: #e74c3c; color: #fff; display: block; list-style: disc; } #nav li:first-child { border-top: 1px solid #fff; } #nav ul { margin: 0; padding: 0; } #nav .fa { margin: 0px 17px 0px 0px; } .logo { width: 100%; padding: 21px; margin-bottom: 20px; box-sizing: border-box; } #logo{ color: #fff; font-size: 30px; font-style: normal; } .sidebar-icon { position: relative; float: right; text-align: center; line-height: 1; font-size: 25px; padding: 6px 8px; color: #fff; } .disp { opacity: 1!important; height:auto!important; transition: height 100ms ease-in-out; transition-delay: 300ms; } 

I am running some CSS issues and I'm stuck. Here are my questions. I am running some CSS issues and I'm stuck. Here are my questions.

Answer 1

Summarizing:

• To add padding to iconless links, wrap all the text inside the elements in <span> (only those that don’t have a <span> yet), and add padding-left to those that don’t have an icon in front of them:

   nav li span:first-child { padding-left: 24px; } 

• Show borders only for elements that are the last in the group:

   nav li:not(:last-child) { border-bottom: 1px solid #aaa; } 

• The scroll bar is displayed because you specified the min-width rule. Do not do this. This will ruin the small screens because it will never crash. Also remove padding-right: 65px; and padding-right: 280px; - they are fictitious.

Here's the last fiddle: https://jsfiddle.net/pjb7jzjk/36/

P. S. I suggest you add the overflow-y: scroll rule to .sidebar-nav to make it scrollable on low-height screens.

Answer 2

Ad.1 - try adding

 #nav li > ul > li { padding-left: 3em; }