Change priority for drawing border - html

Question

I want draw <div> border over <li> border.
Now it see like that:
But i want draw that:
All my code on JsFiddle:
#mainmenu ul ul {
display: none;
}
#mainmenu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#mainmenu ul li {
list-style-type: none;
text-align: center;
width: 120pt;
height: 20pt;
padding: 10pt 0pt 10pt 0pt;
border: 2px gray solid;
}
#mainmenu ul li:hover {
background-color: gray;
}
#mainmenu ul li:hover ul {
position: absolute;
top: 10px;
left: 130pt;
display: block;
}
#mainmenu h1 {
font-size: 14pt;
margin: 0px;
}
#mainmenu {
display: inline-block;
border: 2px red solid;
}
<div id="mainmenu">
<ul>
<li>
<h1>Семинар 1</h1>
<ul>
<li>Задача 1</li>
<li>Задача 2</li>
<li>Задача 3</li>
</ul>
</li>
<li>
<h1>Семинар 2</h1>
<ul>
<li>Задача 1</li>
<li>Задача 2</li>
<li>Задача 3</li>
</ul>
</li>
</ul>
</div>
Big thanks for your response!

Answer 1

Based on your screenshot, I'm guessing you're trying to change the border-color of the left-most boxes.
Rather than "covering" up the gray border with a red one, I'd recommend specifically targeting those top-level <li>s with CSS, and setting the border of those elements to red. You can use the CSS direct descendant selector to do that:
#mainmenu > ul > li {
border: 2px solid red;
}
Full Example Below (click "run code snippet"):
#mainmenu ul ul {
display: none;
}
#mainmenu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#mainmenu ul li {
list-style-type: none;
text-align: center;
width: 120pt;
height: 20pt;
padding: 10pt 0pt 10pt 0pt;
border: 2px gray solid;
}
#mainmenu > ul > li {
border: 2px solid red;
}
#mainmenu ul li:hover {
background-color: gray;
}
#mainmenu ul li:hover ul{
position: absolute;
top: 10px;
left: 130pt;
display: block;
}
#mainmenu h1 {
font-size: 14pt;
margin: 0px;
}
#mainmenu {
display: inline-block;
}
<div id="mainmenu">
<ul>
<li><h1>Семинар 1</h1>
<ul>
<li>Задача 1</li>
<li>Задача 2</li>
<li>Задача 3</li>
</ul>
</li>
<li><h1>Семинар 2</h1>
<ul>
<li>Задача 1</li>
<li>Задача 2</li>
<li>Задача 3</li>
</ul>
</li>
</ul>
</div>

Answer 2

Your Image:
From your image (that I have posted above), I believe you are looking for something like this:
#mainmenu ul ul {
display: none;
}
#mainmenu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#mainmenu ul li {
list-style-type: none;
text-align: center;
width: 120pt;
height: 20pt;
padding: 10pt 0pt 10pt 0pt;
}
ul li ul li {
border: 2px gray solid;
margin-left:6px;
}
#mainmenu ul li:hover {
background-color: gray;
}
#mainmenu ul li:hover ul {
position: absolute;
top: 10px;
left: 130pt;
display: block;
}
#mainmenu h1 {
font-size: 14pt;
margin: 0px;
z-index:2;
}
#mainmenu {
display: inline-block;
border: 6px red solid;
}
<div id="mainmenu">
<ul>
<li>
<h1>Семинар 1</h1>
<ul>
<li>Задача 1</li>
<li>Задача 2</li>
<li>Задача 3</li>
</ul>
</li>
<li>
<h1>Семинар 2</h1>
<ul>
<li>Задача 1</li>
<li>Задача 2</li>
<li>Задача 3</li>
</ul>
</li>
</ul>
</div>