Clever Geek Handbook

Vertical pop-up navbar menus

body {
  margin: auto;
  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;
}
a,visited {
  color: black;
}
#nav {
    position: relative;
    background-color: brown;
    float: left;
    width: 11%;
    height: 820px;
    margin-top: 70px;
    margin-bottom: 10px;
}
#nav_wrapper {
  width: 900px;
  margin: 0px auto;
  text-align: left;
}
#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;
  display: block;
  padding: 15px;
  text-decoration: none;
}
#nav ul a:hover {
  color: #099;
  text-decoration: none;
  padding: auto;
}
#nav ul li:hover ul {
  display: block;
  width: 219px;
}
#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;
}
ul .sub_navi {
  display: none;
}
li:hover .sub_navi {
  background: #999;
  border: #fff solid;
  border-width: 1px;
  display: block;
  position: absolute;
  left: 220px;
  top: 4px;
}
.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;
    position: relative;
    clear: both;
}
      

        
        
        
      

    
<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="style.css"/>
        <title></title>
    </head>
    <body>
        <div id=header>
            <p id="name">Henry jones</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 class="sub_navi">
                        <li>Cosmic Encounter</li>
                        <li>Agricola</li>
                        <li>Trajan</li>
                        </ul>
                  </li>
                  <li>League of Legends</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.google.com">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>
Run codeHide result


I created a dropdown menu, but I'm having problems. Please help me with this html. The problem is that when I hover the cursor next to the navbar I, the navbar keeps flashing. I would like some helper to be able to code this more efficiently. Also, where do I put the display: none of these can make the nav bar disappear if something else is selected. Thank.

+3


source to share


2 answers


Try using width: 100%;

for #nav_wrapper

. This will fix the problem.



0


source


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;}

0


source






More articles:


All Articles