我想要下拉子项中的箭头图标并更改选项卡的背景颜色

Question

Please tell me the simple method I want to add pause/play icon in all my parent child of drop down menu. Also how can I change my tabs background colour?

 #nav { float: left; font: 14px calibri, Helvetica, Sans-serif; border: 1px solid #121314; border-top: 1px solid #2b2e30; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; overflow:visible; line-height:7px; } #nav ul { margin:0; padding:0; list-style:none; } #nav ul li { float:left; } #nav ul li a { float: left; color:#d4d4d4; padding: 8px 20px; /* change the height of whole menu*/ text-decoration:none; background:#3C4042; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) ); background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% ); background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% ); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset; border-left: 1px solid rgba(255, 255, 255, 0.05); border-right: 1px solid rgba(0,0,0,0.2); text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6); } #nav ul li a:hover, #nav ul li:hover > a { color:#FFF; /* change tabs font hover color */ background:#3C4042; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) ); background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% ); background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% ); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000; } #nav li ul a:hover, #nav ul li li:hover > a { color:#FFF; /* change the drop down font color*/ background: #5C9ACD; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) ); background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% ); background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% ); border-bottom: 1px solid rgba(0,0,0,0.6); border-top: 1px solid #7BAED9; text-shadow: 0 1px rgba(255, 255, 255, 0.3); } #nav li ul { overflow:visible; background:#3C4042; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) ); background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% ); background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% ); border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; left: -999em; margin: 32px 0 0; /* change the position of drop down menu, up and down.*/ position: absolute; width: 160px; z-index: 9999; box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; border: 1px solid rgba(0, 0, 0, 0.5); } #nav li:hover ul { left: auto; } #nav li ul a { background: none; border: 0 none; margin-right: 0; width: 120px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; border-bottom: 1px solid transparent; border-top: 1px solid transparent; } #nav li li ul { margin: -1px 0 0 160px; -webkit-border-radius: 0 10px 10px 10px; -moz-border-radius: 0 10px 10px 10px; border-radius: 0 10px 10px 10px; visibility:hidden; } #nav li li:hover > ul { visibility: visible; } #nav li:hover > ul { left: auto; } #nav ul ul li:last-child > a { -moz-border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; border-radius:0 0 10px 10px; } #nav ul ul ul li:first-child > a { -moz-border-radius:0 10px 0 0; -webkit-border-radius:0 10px 0 0; border-radius:0 10px 0 0; }

 <div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Our Portfolio</a></li> <li><a href="#">One Dropdown</a> <ul> <li><a href="#">Level 2.1</a></li> <li><a href="#">Level 2.2</a></li> <li><a href="#">Level 2.3</a></li> <li><a href="#">Level 2.4</a></li> <li><a href="#">Level 2.5</a></li> </ul> </li> <li><a href="#">Three Levels</a> <ul> <li><a href="#">Level 2.1</a></li> <li><a href="#">Level 2.2</a></li> <li><a href="#">Level 2.3 ></a> <ul> <li><a href="#">Level 2.3.1</a></li> <li><a href="#">Level 2.3.2</a></li> <li><a href="#">Level 2.3.3 ></a> <ul> <li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2A</a></li> <li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2B</a></li> </ul> </li> <li><a href="#">Level 2.3.4</a></li> <li><a href="#">Level 2.3.5</a></li> <li><a href="#">Level 2.3.6</a></li> <li><a href="#">Level 2.3.7</a></li> </ul> </li> <li><a href="#">Level 2.4</a></li> <li><a href="#">Level 2.5</a></li> </ul> </li> <li><a href="#">Services</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">About Me</a></li> <li><a href="#">AlhamduLillah</a></li> </ul> </div>

Answer 1

Do you want it like this?

I just added ► to the dropdowns and fixed the margin of #nav li ul to 23px . Maybe this was just a snippet problem. If yes, don't mind the change then.

 #nav { float: left; font: 14px calibri, Helvetica, Sans-serif; border: 1px solid #121314; border-top: 1px solid #2b2e30; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; overflow:visible; line-height:7px; } #nav ul { margin:0; padding:0; list-style:none; } #nav ul li { float:left; } #nav ul li a { float: left; color:#d4d4d4; padding: 8px 20px; /* change the height of whole menu*/ text-decoration:none; background:#3C4042; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) ); background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% ); background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% ); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset; border-left: 1px solid rgba(255, 255, 255, 0.05); border-right: 1px solid rgba(0,0,0,0.2); text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6); } #nav ul li a:hover, #nav ul li:hover > a { color:#FFF; /* change tabs font hover color */ background:#3C4042; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) ); background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% ); background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% ); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000; } #nav li ul a:hover, #nav ul li li:hover > a { color:#FFF; /* change the drop down font color*/ background: #5C9ACD; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) ); background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% ); background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% ); border-bottom: 1px solid rgba(0,0,0,0.6); border-top: 1px solid #7BAED9; text-shadow: 0 1px rgba(255, 255, 255, 0.3); } #nav li ul { overflow:visible; background:#3C4042; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) ); background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% ); background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% ); border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; left: -999em; margin: 23px 0 0; /* change the position of drop down menu, up and down.*/ position: absolute; width: 160px; z-index: 9999; box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; border: 1px solid rgba(0, 0, 0, 0.5); } #nav li:hover ul { left: auto; } #nav li ul a { background: none; border: 0 none; margin-right: 0; width: 120px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; border-bottom: 1px solid transparent; border-top: 1px solid transparent; } #nav li li ul { margin: -1px 0 0 160px; -webkit-border-radius: 0 10px 10px 10px; -moz-border-radius: 0 10px 10px 10px; border-radius: 0 10px 10px 10px; visibility:hidden; } #nav li li:hover > ul { visibility: visible; } #nav li:hover > ul { left: auto; } #nav ul ul li:last-child > a { -moz-border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; border-radius:0 0 10px 10px; } #nav ul ul ul li:first-child > a { -moz-border-radius:0 10px 0 0; -webkit-border-radius:0 10px 0 0; border-radius:0 10px 0 0; }

 <div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Our Portfolio</a></li> <li><a href="#">One Dropdown &#9658;</a> <ul> <li><a href="#">Level 2.1</a></li> <li><a href="#">Level 2.2</a></li> <li><a href="#">Level 2.3</a></li> <li><a href="#">Level 2.4</a></li> <li><a href="#">Level 2.5</a></li> </ul> </li> <li><a href="#">Three Levels &#9658;</a> <ul> <li><a href="#">Level 2.1</a></li> <li><a href="#">Level 2.2</a></li> <li><a href="#">Level 2.3 &#9658;</a> <ul> <li><a href="#">Level 2.3.1</a></li> <li><a href="#">Level 2.3.2</a></li> <li><a href="#">Level 2.3.3 &#9658;</a> <ul> <li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2A</a></li> <li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2B</a></li> </ul> </li> <li><a href="#">Level 2.3.4</a></li> <li><a href="#">Level 2.3.5</a></li> <li><a href="#">Level 2.3.6</a></li> <li><a href="#">Level 2.3.7</a></li> </ul> </li> <li><a href="#">Level 2.4</a></li> <li><a href="#">Level 2.5</a></li> </ul> </li> <li><a href="#">Services</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">About Me</a></li> <li><a href="#">AlhamduLillah</a></li> </ul> </div>

Answer 2

hmm Okey as long Patrick Mlr do the answer i just improve it by little bit hope it will help As long its dropdown you need down arrow and, left arrow when mouseenter, hovering look this also this will change background color as you want Jquery way and fixed margin

Edited

&#9660 ; is ▼

&#9658 ; is ►

JQuery has mouse events this is one of them Mouseenter, Mouseleave you can read Documentation in here

this is simpler than you see this will check hovering over your tabs if your tab has class named hoverdrop, it will find i in that hovered tab, after that this adding ▼ in found i also changing background

IF ANYTHING YOU CANT UNDERSTAND MENTION AND ASK I WILL TRY TO HELP AS POSSIBLE

 $('#nav ul li').mouseenter(function() { if($(this).hasClass('hoverdrop')){ $(this).find('i').html('▼'); } }).mouseleave(function() { $(this).find('i').html('►'); }); $('#nav ul li a').mouseenter(function() { $(this).css('color','#fff').css('background-color','#5f5f5f'); }).mouseleave(function() { $(this).css('color','#d4d4d4').css('background-color','#3C4042'); });

 #nav { float: left; font: 14px calibri, Helvetica, Sans-serif; border: 1px solid #121314; border-top: 1px solid #2b2e30; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; overflow: visible; line-height: 7px; } #nav ul { margin: 0; padding: 0; list-style: none; } #nav ul li { float: left; } #nav ul li a { float: left; color: #d4d4d4; padding: 8px 20px; /* change the height of whole menu*/ text-decoration: none; background: #3C4042; border-left: 1px solid rgba(255, 255, 255, 0.05); border-right: 1px solid rgba(0, 0, 0, 0.2); text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6); } #nav ul li a:hover, #nav ul li:hover > a { } #nav li ul a:hover, #nav ul li li:hover > a { } #nav li ul { overflow: visible; background: #3C4042; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77, 79, 79)), color-stop(0.55, rgb(67, 70, 71)), color-stop(0.78, rgb(69, 70, 71))); background-image: -moz-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%); background-image: -o-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%); border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; left: -999em; margin: 22px 0 0; /* change the position of drop down menu, up and down.*/ position: absolute; width: 160px; z-index: 9999; box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; border: 1px solid rgba(0, 0, 0, 0.5); } #nav li:hover ul { left: auto; } #nav li ul a { background: none; border: 0 none; margin-right: 0; width: 120px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; border-bottom: 1px solid transparent; border-top: 1px solid transparent; } #nav li li ul { margin: -1px 0 0 160px; -webkit-border-radius: 0 10px 10px 10px; -moz-border-radius: 0 10px 10px 10px; border-radius: 0 10px 10px 10px; visibility: hidden; } #nav li li:hover > ul { visibility: visible; } #nav li:hover > ul { left: auto; } #nav ul ul li:last-child > a { -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; } #nav ul ul ul li:first-child > a { -moz-border-radius: 0 10px 0 0; -webkit-border-radius: 0 10px 0 0; border-radius: 0 10px 0 0; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Our Portfolio</a></li> <li class='hoverdrop'><a href="#">One Dropdown <i class='arrows'>&#9658;</i></a> <ul> <li><a href="#">Level 2.1</a></li> <li><a href="#">Level 2.2</a></li> <li><a href="#">Level 2.3</a></li> <li><a href="#">Level 2.4</a></li> <li><a href="#">Level 2.5</a></li> </ul> </li> <li class='hoverdrop'><a href="#">Three Levels<i class='arrows'>&#9658;</i></a> <ul> <li><a href="#">Level 2.1</a></li> <li><a href="#">Level 2.2</a></li> <li class='hoverdrop'><a href="#">Level 2.3<i class='arrows'>&#9658;</i></a> <ul> <li><a href="#">Level 2.3.1</a></li> <li><a href="#">Level 2.3.2</a></li> <li class='hoverdrop'><a href="#">Level 2.3.3 <i class='arrows'>&#9658;</i></a> <ul> <li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2A</a></li> <li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2B</a></li> </ul> </li> <li><a href="#">Level 2.3.4</a></li> <li><a href="#">Level 2.3.5</a></li> <li><a href="#">Level 2.3.6</a></li> <li><a href="#">Level 2.3.7</a></li> </ul> </li> <li><a href="#">Level 2.4</a></li> <li><a href="#">Level 2.5</a></li> </ul> </li> <li><a href="#">Services</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">About Me</a></li> <li><a href="#">AlhamduLillah</a></li> </ul> </div>

Answer 3

Answer to your question

► 

is the uni code for the ► symbol

Adding

  

To your line will function as a space since html doesnt reckonize spaces and tabs on its own.

Your line of code would look something like this

<li><a href="#">Level 2.3.3 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#9658;</a>

Hope this helps you and or others out.