TechQA.

html/css Vertical Navigation Bar

3.7k views Asked by At 

body {
  margin: 0px;
  max-width: 98%;
  overflow-y: scroll;
}
div {
  border-radius: 5px;
}
span {
  font-weight:bold;
}
#header {
  position: absolute;
  z-index: 1;
  background-color: orange;
  height: 70px;
  width: 98%;
  margin-top: -10px;
  margin-bottom: 10px;
}
#name {
  float:left;
  margin-left: 400px;
  margin-top: 10px;
  padding-top: 1px;
  font-size: 20px;
  font-family: Verdana, sans-serif;
  color: brown;
}
#contact {
  position: absolute;
  margin-left: 250px;
  margin-top: 30px;
  padding-top: -1px;
  font-family: Verdana, sans-serif;
  color: brown;
}
#email  {
  position: absolute;
  margin-left: 360px;
  margin-top: 45px;
  padding-top: 1px;
  font-size: 16px;
  font-family: Verdana, sans-serif;
  color: brown;

}
a:hover {
  font-weight: bold;
  padding: 0;
}
a,visited {
  color: black;
  padding: 0;
}
#nav {
  position: relative;
  background-color: brown;
  float: left;
  width: 11%;
  height: 830px;
  margin-top: 70px;
  margin-bottom: 10px;
}
#nav_wrapper {
  width: 100%;
  margin: 0px auto;
  text-align: left;
  z-index: 1;
}
#nav ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  position: relative;
}
#nav ul li {
  display: block;
}
#nav ul li:hover {
  background-color: #333;
  width: 219px;

}
#nav ul a,visited {
  color: #ccc;
  padding: 15px;
  text-decoration: none;
  display: block;
}
#nav ul a:hover {
  color: #099;
  text-decoration: none;
  padding: auto;
  display: block;
}
#nav ul li:hover ul {
  display: block;
  width: 100%;
  margin: 0 auto;
}

#nav ul ul {
  display: none;
  position: absolute;
}
#nav ul ul li {
  display: block;
  padding: 25.5px;
  background-color: #222;
}

#nav ul ul li:hover {
  color: #099;
  width: 168px;
}
#nav ul ul li,visited {
  color: #ccc;
  margin: 0;
}
li:hover #Board_Games {
  background: #999;
  border: #099 solid;
  border-width: 1px;
  display: block;
  position: absolute;
  left: 219.2px;
  top: 3px;
}

li:hover .sub_navi {
  background: #999;
  border: #099 solid;
  border-width: 1px;
  display: block;
  position: absolute;
  left: 290px;
  top: 100px;
}
.right {
  position: static;
  background-color: linen;
  float: right;
  width: 88%;
  height: 820px;
  margin-top: 70px;
  margin-bottom: 10px;
  padding: 5px;
}
h4 {
  margin-left: 5px;
  margin-bottom: 15px;
  font-family: Verdana, sans-serif;
  text-decoration: underline;
}

.right p {
  margin-left: 5px;
  margin-right: 5px;
  margin-top: -10px;
  font-family: Garamond, serif;
  color: #000000;
}
#company {
  font-family: Garamond, serif;

}
#position {
  font-style: italic
}
li {
  list-style-type: square;
}
#footer {
  height: 40px;
  width: 100%;
  background-color: orange;
  clear: both;
  padding: 0px;
  bottom: 0px;
}
#footer p {
    margin-top: 10px;
    margin-left: 400px;
    text-shadow: 1px 1px 1px black;
    color: brown;
}
<!DOCTYPE html>
  <html>
  <head>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <title></title>
  </head>
  <body>
    <div id=header>
      <p id="name">Hang Li</p>
    </div>
    <div id="nav">
      <div id="nav_wrapper">
        <ul>
          <li><a href="home.html">Home</a></li>
          <li><a href="#">About  Me</a>
            <ul>
              <li><a href="#">Board Games</a>
                <ul id="Board_Games">
                <li><a href="https://boardgamegeek.com/thread/536444/cosmodex-20-encyclopedia-cosmic-encounter">Cosmic Encounter</a></li>
                  <li><a href="https://boardgamegeek.com/thread/536444/cosmodex-20-encyclopedia-cosmic-encounter">Agricola</a></li>
                  <li><a href="https://boardgamegeek.com/thread/536444/cosmodex-20-encyclopedia-cosmic-encounter">Trajan</a></li>
                </ul>
              </li>
              <li><a href="#">League of Legends</a>
                <ul class="sub_navi">
                <li><a href="https://boardgamegeek.com/thread/536444/cosmodex-20-encyclopedia-cosmic-encounter">Orianna</a></li>
                  <li><a href="https://boardgamegeek.com/thread/536444/cosmodex-20-encyclopedia-cosmic-encounter">Kalista</a></li>
                  <li><a href="https://boardgamegeek.com/thread/536444/cosmodex-20-encyclopedia-cosmic-encounter">Annie</a></li>
                </ul>
              </li>
              <li>Sports</li>
            </ul>
          </li>
          <li><a href="#">Travels</a>
            <ul>
              <li><a href="https://www.google.com">Paris</a></li>
              <li><a href="https://www.flickr.com/photos/56661116@N02/sets/72157642714119143/">Turks and Caicos</a></li>
              <li><a href="https://www.google.com">Puerto Rico</a></li>
              <li><a href="https://www.google.com">Chicago</a></li>
            </ul>
          </li>
        </li>
        <li><a href="resume.html">Resume</a></li>
        <li><a href="#">Contact</a>
          <ul>
            <li>Phone</li>
            <li>Email</li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <div class="right">
    <h4>Welcome</h4>
    <p><img src="https://pbs.twimg.com/media/CAY3PIpXEAAkO75.png"></a>
    </p>
  </div>
  <div id="footer">
    <p>Copyright (c) 2010 mysite.com All rights reserved</p>
  </div>
</body>
</html>

Hi have been stuck at this the whole day.

My Problem is

Problem 1: when you hover over "about me" the dropdown menu appears and also the dropdown menu for Board Games and League of Legends' drop down menus both show up, which i dont. I on;y want board game nenus to pop up only when i hover over it. Problem 2: The dropdown menu for League of Legends doesnt go away thus the dropdown menu for board games rests behind the menu of league of legends.

html css drop-down-menu navigation navigationbar
Original Q&A
2

There are 2 answers

0
KBK On

try this :)

html

<div class="navigation">

    <ul>

    <li class="has-sub"> <a href="#">Menu 1</a>

    <ul>

    <li class="has-sub"> <a href="#">Submenu 1.1</a>

    <ul>

    <li><a href="#">Submenu 1.1.1</a></li>

    <li class="has-sub"><a href="#">Submenu 1.1.2</a>

    <ul>

    <li><a href="#">Submenu 1.1.2.1</a></li>

    <li><a href="#">Submenu 1.1.2.2</a></li>

    </ul>

    </li>

    </ul>

    </li>

    <li><a href="#">Submenu 1.2</a></li>

    </ul>

    </li>

    <li class="has-sub"> <a href="#">Menu 2</a>

    <ul>

    <li><a href="#">Submenu 2.1</a></li>

    <li><a href="#">Submenu 2.2</a></li>

    </ul>

    </li>

    <li class="has-sub"> <a href="#">Menu 3</a>

    <ul>

    <li><a href="#">Submenu 3.1</a></li>

    <li><a href="#">Submenu 3.2</a></li>

    </ul>

    </li>

    </ul>

    </div>

css

.navigation {
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 1;
}

.navigation ul,
.navigation ul li,
.navigation ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation ul {
  position: relative;
  z-index: 500;
  float: left;
}

.navigation ul li {
  float: left;
  min-height: 0.05em;
  line-height: 1em;
  vertical-align: middle;
  position: relative;
}

.navigation ul li.hover,
.navigation ul li:hover {
  position: relative;
  z-index: 510;
  cursor: default;
}

.navigation ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 520;
  width: 100%;
}

.navigation ul ul li { float: none; }

.navigation ul ul ul {
  top: 0;
  right: 0;
}

.navigation ul li:hover > ul { visibility: visible; }

.navigation ul ul {
  top: 0;
  left: 99%;
}

.navigation ul li { float: none; }

.navigation ul ul { margin-top: 0.05em; }

.navigation {
  width: 13em;
  background: #333333;
  font-family: 'roboto', Tahoma, Arial, sans-serif;
  zoom: 1;
}

.navigation:before {
  content: '';
  display: block;
}

.navigation:after {
  content: '';
  display: table;
  clear: both;
}

.navigation a {
  display: block;
  padding: 1em 1.3em;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
}

.navigation > ul { width: 13em; }

.navigation ul ul { width: 13em; }

.navigation > ul > li > a {
  border-right: 0.3em solid #34A65F;
  color: #ffffff;
}

.navigation > ul > li > a:hover { color: #ffffff; }

.navigation > ul > li a:hover,
.navigation > ul > li:hover a { background: #34A65F; }

.navigation li { position: relative; }

.navigation ul li.has-sub > a:after {
  content: 'ยป';
  position: absolute;
  right: 1em;
}

.navigation ul ul li.first {
  -webkit-border-radius: 0 3px 0 0;
  -moz-border-radius: 0 3px 0 0;
  border-radius: 0 3px 0 0;
}

.navigation ul ul li.last {
  -webkit-border-radius: 0 0 3px 0;
  -moz-border-radius: 0 0 3px 0;
  border-radius: 0 0 3px 0;
  border-bottom: 0;
}

.navigation ul ul {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}

.navigation ul ul { border: 1px solid #34A65F; }

.navigation ul ul a { color: #ffffff; }

.navigation ul ul a:hover { color: #ffffff; }

.navigation ul ul li { border-bottom: 1px solid #0F8A5F; }

.navigation ul ul li:hover > a {
  background: #4eb1ff;
  color: #ffffff;
}

.navigation.align-right > ul > li > a {
  border-left: 0.3em solid #34A65F;
  border-right: none;
}

.navigation.align-right { float: right; }

.navigation.align-right li { text-align: right; }

.navigation.align-right ul li.has-sub > a:before {
  content: '+';
  position: absolute;
  top: 50%;
  left: 15px;
  margin-top: -6px;
}

.navigation.align-right ul li.has-sub > a:after { content: none; }

.navigation.align-right ul ul {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 598;
  width: 100%;
}

.navigation.align-right ul ul li.first {
  -webkit-border-radius: 3px 0 0 0;
  -moz-border-radius: 3px 0 0 0;
  border-radius: 3px 0 0 0;
}

.navigation.align-right ul ul li.last {
  -webkit-border-radius: 0 0 0 3px;
  -moz-border-radius: 0 0 0 3px;
  border-radius: 0 0 0 3px;
}

.navigation.align-right ul ul {
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}
0
Hang Li On

Thank you, I finally fixed it!

nav ul li {display: block;}

changed to

nav ul li {Visibility: hidden;}

and

nav ul li:hover ul {display: block;width: 219px;}

changed to

nav ul li:hover > ul {Visibility: visible;width: 219px;}

Related Questions in HTML

Related Questions in CSS

Related Questions in DROP-DOWN-MENU

Related Questions in NAVIGATION

Related Questions in NAVIGATIONBAR

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions