CODEWITHSUNDEEP
htmlcss
NULL
NULL

Reputation: 1589

css html mouseover hover

Below is my code, currently when I hover on "About Us" everything below the dropdown menu opens; how can i change the css so that it only hovers when i mouseover, this means, when i hover on "Team", then I should see the menus below it.

also how can i adjust the width so that it is shiffted more to the left.

also when the dropdown menu is longer in lenth, it hides below my content, i want the dropdown menu to be over the body of the page, not in hiding.

thanks in advance you all.

<style>
ul {
  font-family: Arial, Verdana;
font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #000061;
  margin-left: 1px;
  white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
  display: block;
  position: absolute;
}
ul li:hover li {
  float: none;
  font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>

<body>
<ul id="menu">
  <li><a href=""><b>Home</b></a></li>
  <li><a href=""><b>About Us</b></a>
    <ul>
    <li><a href="">Team</a>
    <ul>
        <li><a href="">Profile</a></li>
        <li><a href="">Board</a></li>
    </ul>
    </li>
    </ul>
  </li>
<ul>
</body>

JSFiddle: http://jsfiddle.net/LWEry/

Upvotes: 4

Views: 6416

Answers (2)

97ldave
97ldave

Reputation: 5249

Like this:

ul {
  font-family: Arial, Verdana;
font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #000061;
  margin-left: 1px;
  white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover > ul {
  display: block;
  position: absolute;
  width: 100%;
}
ul li:hover li {
  float: none;
  font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }

.sub-menu
 {
    position: absolute;
    top: 0;
    left: 100%;
 }

http://jsfiddle.net/3xWcu/2/

I changed one selector.

FROM

li:hover ul

TO

li:hover > ul

Edited my fiddle above. Added a sub-menu class to the ul containing the Profile and Board li tags:

 <ul class="sub-menu">
    <li><a href="">Profile</a></li>
    <li><a href="">Board</a></li>
 </ul>

and added some CSS above.

Upvotes: 3

martriay
martriay

Reputation: 5742

You mean like this? http://jsfiddle.net/3xWcu/

<style>
ul {
  font-family: Arial, Verdana;
font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #000061;
  margin-left: 1px;
  white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
  display: block;
  position: absolute;
  width: 100%;
}
ul li:hover li {
  float: none;
  font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>

<body>
<ul id="menu">
  <li><a href=""><b>Home</b></a></li>
  <li><a href=""><b>About Us</b></a>
    <ul>
    <li><a href="">Team</a>
    <ul>
        <li><a href="">Profile</a></li>
        <li><a href="">Board</a></li>
    </ul>
    </li>
    </ul>
  </li>
<ul>
</body>

Upvotes: 0

Related Questions