Jason Chan Jason Chan - 2 months ago 19
CSS Question

CSS horizontal menu , add class selector in CSS cause the submenu off position

I want to create a horizontal two level menu navigation. I copied some code on Internet and work fine. Below is the original CSS style and HTML



<style>
/*Style for horizontal CSS menu*/
ul {
list-style-type: none;
position: absolute;
margin: 0;
padding: 0;
}
ul li {
float: left;
margin-right: 1px;
display: inline-block;
}
ul li a {
display: block;
text-decoration: none;
height: 18px;
min-width: 120px;
text-align: center;
line-height: 18px;
font-family: Arial, "Times New Roman", Georgia;
color: #ffffff;
background: #004080;
font-size: 12px;
}
ul li:hover a {
background: #FFC062;
}
ul li:hover ul a {
background: #d9efff;
color: #2f3036;
line-height: 18px;
height: 18px;
}
ul li:hover ul a:hover {
background: #7db0db;
color: #ffffff;
}
ul li ul {
display: none;
}
ul li ul li {
display: block;
float: none;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
ul li ul li:first-child {
display: block;
float: none;
border-top: 1px solid #000;
}
ul li ul li a {
width: auto;
min-width: 120px;
padding: 0 15px;
text-align: left;
color: #000;
}
ul li a:hover + .sub-menu,
.sub-menu:hover {
display: block;
}
</style>


<ul id="hor-menu" class="menu">
<li style="width:142px">
<a href="#">Home</a>
<ul class="sub-menu">
<li><a href="#">Country 1</a>
</li>
<li><a href="#">Country 1</a>
</li>
<li><a href="#">Country 1</a>
</li>
</ul>
</li>
<li style="width:130px">
<a href="#">Main Menu 2</a>
<ul class="sub-menu">
<li><a href="#">Sub Menu</a>
</li>
<li><a href="#">Sub Menu</a>
</li>
</ul>
</li>
<li style="width:130px">
<a href="#">Main Menu 2</a>
<ul class="sub-menu">
<li><a href="#">Sub Menu</a>
</li>
<li><a href="#">Sub Menu</a>
</li>
</ul>
</li>
</ul>





enter image description here

Since the CSS is on the standard ul and li element so I want to add a class selector so that it only affect the horizontal menu. So I append .menu to each ul style. However the submeun will become off the position of the main menu. Any idea which style go wrong?



<style>
/*Style for horizontal CSS menu*/
ul.menu {
list-style-type: none;
position: absolute;
margin: 0;
padding: 0;
}

ul.menu li {
float: left;
margin-right: 1px;
display: inline-block;
}

ul.menu li a {
display: block;
text-decoration: none;
height: 18px;
min-width: 120px;
text-align: center;
line-height: 18px;
font-family: Arial, "Times New Roman", Georgia;
color: #ffffff;
background: #004080;
font-size: 12px;
}

ul.menu li:hover a {
background: #FFC062;
}

ul.menu li:hover ul a {
background: #d9efff;
color: #2f3036;
line-height: 18px;
height: 18px;
}

ul.menu li:hover ul a:hover {
background: #7db0db;
color: #ffffff;
}

ul.menu li ul {
display: none;
}

ul.menu li ul li {
display: block;
float: none;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}

ul.menu li ul li:first-child {
display: block;
float: none;
border-top: 1px solid #000;
}

ul.menu li ul li a {
width: auto;
min-width: 120px;
padding: 0 15px;
text-align: left;
color: #000;
}

ul.menu li a:hover + .sub-menu, .sub-menu:hover {
display: block;
}
</style>


<ul id="hor-menu" class="menu">
<li style="width:142px">
<a href="#">Home</a>
<ul class="sub-menu">
<li><a href="#">Country 1</a>
</li>
<li><a href="#">Country 1</a>
</li>
<li><a href="#">Country 1</a>
</li>
</ul>
</li>
<li style="width:130px">
<a href="#">Main Menu 2</a>
<ul class="sub-menu">
<li><a href="#">Sub Menu</a>
</li>
<li><a href="#">Sub Menu</a>
</li>
</ul>
</li>
<li style="width:130px">
<a href="#">Main Menu 2</a>
<ul class="sub-menu">
<li><a href="#">Sub Menu</a>
</li>
<li><a href="#">Sub Menu</a>
</li>
</ul>
</li>
</ul>





enter image description here

Answer

Check this out- you have missed some styles that need to be applied to sub-menu also. Guess you can figure it out now. Thanks!

/*Style for horizontal CSS menu*/

ul.menu, ul.sub-menu {
  list-style-type: none;
  position: absolute;
  margin: 0;
  padding: 0;
}
ul.menu li, ul.sub-menu li {
  float: left;
  margin-right: 1px;
  display: inline-block;
}
ul.menu li a, ul.sub-menu li a {
  display: block;
  text-decoration: none;
  height: 18px;
  min-width: 120px;
  text-align: center;
  line-height: 18px;
  font-family: Arial, "Times New Roman", Georgia;
  color: #ffffff;
  background: #004080;
  font-size: 12px;
}
ul.menu li:hover a, ul.sub-menu li:hover a {
  background: #FFC062;
}
ul.menu li:hover ul a {
  background: #d9efff;
  color: #2f3036;
  line-height: 18px;
  height: 18px;
}
ul.menu li:hover ul a:hover {
  background: #7db0db;
  color: #ffffff;
}
ul.menu li ul {
  display: none;
}
ul.menu li ul li {
  display: block;
  float: none;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}
ul.menu li ul li:first-child {
  display: block;
  float: none;
  border-top: 1px solid #000;
}
ul.menu li ul li a {
  width: auto;
  min-width: 120px;
  padding: 0 15px;
  text-align: left;
  color: #000;
}
ul.menu li a:hover + .sub-menu,
.sub-menu:hover {
  display: block;
}
<ul id="hor-menu" class="menu">
  <li style="width:142px">
    <a href="#">Home</a>
    <ul class="sub-menu">
      <li><a href="#">Country 1</a>
      </li>
      <li><a href="#">Country 1</a>
      </li>
      <li><a href="#">Country 1</a>
      </li>
    </ul>
  </li>
  <li style="width:130px">
    <a href="#">Main Menu 2</a>
    <ul class="sub-menu">
      <li><a href="#">Sub Menu</a>
      </li>
      <li><a href="#">Sub Menu</a>
      </li>
    </ul>
  </li>
  <li style="width:130px">
    <a href="#">Main Menu 2</a>
    <ul class="sub-menu">
      <li><a href="#">Sub Menu</a>
      </li>
      <li><a href="#">Sub Menu</a>
      </li>
    </ul>
  </li>
</ul>

Comments