CODEWITHSUNDEEP
htmlcss
smally
smally

Reputation: 463

navigation bar with sub menus html and css only

I'm trying to create a site navigation bar that uses sub-menus. Using whatever I can gather from the internet I've done my best and have got one working with one small issue.

When you hover the mouse over the sub-menu, the main menu text colour does not stay white like I'd like it to. Can anyone get this to work?

.header nav.site_nav {
  float: right;
}

.header ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.header ul a {
  display: block;
  font-weight: bold;
  color: #2C395D;
  font-size: 14px;
  text-decoration: none;
  padding: 8px 8px 8px 8px;
}

.header ul a:hover {
  color: white;
}

.header ul li {
  float: left;
  position: relative;
  margin: 0 2px 0 2px;
}

.header ul li:hover {
  background: #2C395D;
}

.header ul ul {
  display: none;
  position: absolute;
  text-align: right;
  top: 100%;
  right: 0;
}

.header ul ul li {
  float: none;
  width: 150px;
  background: #BFC8E1;
  margin: 0;
}

.header ul li:hover > ul {
  display: block;
}

jsfiddle code

Upvotes: 2

Views: 229

Answers (1)

Brino
Brino

Reputation: 2502

I wasn't able to do this easily without adding more information to your html. I added a class to all top level menu items, then added a small amount of css to make them white on hover.

Updated Fiddle

Add this class to your top level menu items in html:

<a class="topLevel" href="#">Courses &#x25BE;</a>

Add this to your CSS: 

.header ul li:hover a.topLevel  {
  color: white;
}

Upvotes: 2

Related Questions